Jean-Marc Le Roux Web, RIAs and chocolate spaghettis…

AIR 3.2, Stage3D and Minko: 100k polygons at 26fps!

AIR 3.2 beta 5 is available on Adobe Labs, but one of the most ancitipated new features is the addition of Stage3D for Android and iOS devices (iPhone and iPad). Thanks to AIR 3.2 and Stage3D, Flash developers will now be able to create 3D applications targeting mobile devices. According to Adobe's engineer, GPU-wise performances are very close to what you would have with a native apps. And that's really incredible (I guess we now just have to wait for the VM to catch up but thing are getting better and better...).

As a member of the private prerelease program, I have access to AIR 3.2 for Android/iOS with Stage3D enabled. So I decided to give it a try with the latest prerelease drop. And boy was I impressed! My test device is an HTC Desire HD with Android 2.2 (official HTC rom). I build a very simple mobile application with Flash Builder 4.5 and Minko (thank you Thibault for letting me post that photo!):

The framerate, memory usage and other values are tracked with monitor. And that's right, it's a bit more than 100 000 polygons at 26 frames per second! Here is the code:

public class Teapot extends Sprite
{
  private var _viewport		: Viewport	= new Viewport();
  private var _scene		: StyleGroup	= null;
 
  private var _shader		: IShader	= new CelShadingShader();
  private var _lightMatrix	: Matrix4x4	= new Matrix4x4();
 
  public function Teapot()
  {
    super();
 
    // simple scene: camera and a teapot with normals
    _scene = new Group(
      new Camera(new Vector4(0, 0, -12), new Vector4(0, 0, 0)),
      new NormalMeshModifier(new TeapotMesh(40))
    );
 
    // use the cel shading effect by default
    _viewport.defaultEffect = new SinglePassRenderingEffect(_shader);
    // grey background
    _viewport.backgroundColor = 0x666666;
 
    // setup the stage
    stage.frameRate = 30.;
    stage.addChild(_viewport);
    stage.addChild(Monitor.monitor.watch(_viewport, ["numTriangles"]));
    stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
  }
 
  private function enterFrameHandler(event : Event) : void
  {
    // rotate the light
    _lightMatrix.appendRotation(0.01, ConstVector4.Y_AXIS);
    _shader.setNamedParameter(
      "light direction",
      _lightMatrix.transformVector(ConstVector4.Z_AXIS)
    );
 
    // render
    _viewport.render(_scene);
}

You can find the full source code on my GitHub.

That's only a few lines of code, and yet it displays a Utah teapot with cel shading and a rotating light. An important thing to remember is that this cel shading effect is coded using ActionScript shaders. AS shaders is a feature of Minko: you program the GPU with ActionScript code and Minko's JIT compiler turns it into AGAL bytecode at runtime. And the ActionScript to AGAL shader compiler runs just fine on mobile devices. Even better: Minko 2 will feature a new and even more optimized compiler so it will be very easy and very efficient to program mobile GPUs with ActionScript code!

Considering my phone is not supposed to perform as well as the Samsung Galaxy SII or the iPad 2, I can just imagine what you can do on those! But I'll have an iPad 2 tomorrow and I'll try to see how BlackSun performs on it, so just be patient

AIR 3.2 will be available "very soon" and so will be Minko 2. In the meantime, you can start playing with Minko 1 and get ready to rock on mobile devices! As usual, if you have questions/suggestions, please post them in the comments or on Aerys Answers.