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

2Feb/1217

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.

Tagged as: 3D, ActionScript 3.0, AIR, AIR 3.2, Flash 11, Minko, Stage3D Leave a comment

Comments (17) Trackbacks (0) ( subscribe to comments on this post )

Erravenden
February 2nd, 2012 - 19:13

I can’t wait to see how well the iPad 2 handles it.

( REPLY )
Austin
February 3rd, 2012 - 17:46

Holy crap, this is awesome man. Keep up the great work – I cannot wait for this to be released!!!!!!!!!!!!

( REPLY )
edi
February 4th, 2012 - 14:21

is any chance to get full working code??

( REPLY )
- Promethe
  February 4th, 2012 - 15:21
  
  The source code is available on my GitHub:
  
  https://github.com/promethe42/teapot-mobile
  
  ( REPLY )
edi
February 4th, 2012 - 18:02

thx much

( REPLY )
edi
February 4th, 2012 - 18:56

it looks amazing.. i have changed framerate to 60 and my fps is around 45 on my Ipad1.. thx for great example.

( REPLY )
marbayclip
February 7th, 2012 - 12:21

Hi.
air3.2sdk Where can I find? What version of the SDK or different?

( REPLY )
- Promethe
  February 7th, 2012 - 13:38
  
  As far as I know the AIR 3.2 SDK is not available outside of the prerelease program.
  
  Regards,
  
  ( REPLY )
alchymi
February 8th, 2012 - 12:54

Euh …… La version de AIR que tu utilises est bien la http://labs.adobe.com/technologies/flashplatformruntimes/air3-2/ ?

Parce que je crève d’envie de tester une des maquettes que j’ai faite http://www.jeu-de-voiture.com/course+de+voiture+radiocommande.php
(Qui ne devrais pas marcher à cause de box2D qui utilise Alchemy)

( REPLY )
- alchymi
  February 8th, 2012 - 12:55
  
  Bon je me répond à moi même j’avais pas lu la suite de l’article ..
  
  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.
  
  Les boules ^^
  
  ( REPLY )
Andrew
February 21st, 2012 - 17:35

Can’t wait for the full release!

( REPLY )
temp
February 29th, 2012 - 23:39

Sounds good.
I’ve tried ND2D on my iPad.

Cloud sprite test
PC: 25 000 sprites
iPAD: 19 !!!
Everytest is slow like hell..

What i’m doing wrong?

( REPLY )
- Promethe
  March 1st, 2012 - 10:21
  
  It’s hard to tell. I don’t know how ND2D works.
  But the iPad (1 and 2) seems to have difficulties when you try to use more than 200 draw calls per frame. Which should be enough for a game if culling is done properly.
  
  Regards,
  
  ( REPLY )
Lotus
March 12th, 2012 - 08:54

Hello ~
I’ve been trying this source in flash C5.5 with of course the update of AIR 3.2…
But this i cannot get this teapot to work. I get the following errors :

CelShadingShader.as, Line 77 1180: Call to a possibly undefined method lessThan.
CelShadingShader.as, Line 46 1180: Call to a possibly undefined method getNamedParameter.

I really dont understand why i get this. I would be really great-full if anybody have a fix for that.

Best,

( REPLY )
- Promethe
  March 12th, 2012 - 08:56
  
  Hello,
  
  please use the sources available on my GitHub:
  
  https://github.com/promethe42/teapot-mobile
  
  This project was made with a development version of Minko available as a SWC in the /libs folder.
  
  Regards,
  
  ( REPLY )
  - Lotus
    March 12th, 2012 - 10:36
    
    Oh thank you -
    So this swc is a part of Minko 2 ?
    Everything is working well now, i’m also really curious to try the shader lab soon ^^
    Really great work.
    
    Best
    
    ( REPLY )
    - Promethe
      March 12th, 2012 - 10:43
      
      That swc IS minko. But an intermediate unreleased version of Minko 2.0.
      It features only a small subset of the new features.
      
      ( REPLY )