Stage3D & Flex Demo w/ Source

Back in the summer, I was lucky enough to get my hands on some early builds of Stage3D for mobile. I built some simple examples, including basic geometric shapes and simple 3D bubble charts inside of mobile Flex/AIR applications. I have been asked numerous times for the source code, and I’ve finally given in, and am sharing some source code.

I am not posting the full mobile application source code, since Stage3D for mobile is not yet available. However, I have ported the 3D bubble chart example to run in a Flex application targeting the desktop (Flash Player 11). The bubble chart example extends the concepts explored in the basic geometric shapes example.

Before you say “shoot, he didn’t give us the mobile code”, let me explain… When I ported the code from the mobile project to the desktop Flex project, all I changed was code specific to the mobile Flex framework. I changed <s:ViewNavigatorapplication> to <s:Application> and the corresponding architecture changes that were required, and I changed the list item renderers to Spark item renderers based on <s:Group> instead of mobile item renderers.   In the mobile item renderers, all my drawing logic was done using the ActionScript drawing API.  For simplicity in the port, I just used <s:Rect> to add the colored regions in the desktop variant.

That is all I changed!  

The stage3D code between the desktop and mobile implementations is identical.    You can see the desktop port in action in the video below:

Or, you can test it for yourself here:

The source code was intended to be exploratory at best… I was simply experimenting with hardware accelerated content, and how it can be used within your applications.   There is one big “gotcha” that you will have to watch out for if you want Stage3D content within a Flex application… Stage3D content shows up behind Flex content on the display list.   By default, Flex apps have a background color, and they will hide the Stage3D content.   If you want to display any Stage3D content within a Flex application (regardless of web, desktop AIR, or mobile), you must set the background alpha of the Flex application to zero (0).  Otherwise you will pull out some hair trying to figure out why it doesn’t show up.

The source code for the web/Flex port of this example is available at:

This also requires inclusion of the Away3D library, available at:

You can check out my original posts, showing Stage3D on mobile here:

You can also check out a video of this code running on a mobile device (Samsung Galaxy Tab 10.1) below:

Enjoy!
  • http://lancelotmobile.com Emil

    Does this mobile demo run on iPad?

    • http://www.tricedesigns.com Andrew

      Stage3D is not available on mobile devices yet. Once it is available, yes, it will run on both iOS and Android.

  • http://www.tricedesigns.com Andrew

    Correction: Stage3D is already available for the BlackBerry Playbook, and iOS and Android will be supported in the future.

  • Nauman

    Stage3D is available but the read only vector array (stage.stage3Ds) is always null.
    This is the issue in the 3D development yet, but i am hopeful for some good solution by Adobe

    • http://www.tricedesigns.com Andrew

      Stage3D is not yet enabled for mobile devices. This is why it is always null if you attempt to access it.

  • fox

    Hi Andrew,you said Stage3d is not available in Android and IOS yet.but i saw your application has already run in samsung galaxy tablet.does galaxy’s OS is BleckBerry?

    • http://www.tricedesigns.com Andrew

      That video shows a prerelease build of the Stage3D capability on Android. The device shown is a standard “off the shelf” Samsung Galaxy 10.1. Stage3D is is not yet publicly available.

  • Tomdog

    Why you can use Stage3D in mobile devices in this vedio?

    • http://www.tricedesigns.com Andrew

      That video shows a prerelease build of the Stage3D capability on Android.

  • Richard

    I’m using Flash Builder ver 4.6 and am trying to create a simple, bare-bones project using a Flex Mobile Project + away3D and am having the worst luck. I keep getting the following error (even with direct):

    Cannot access a property or method of a null object reference.
    at away3d.containers::View3D/updateBackBuffer()[C:\Program Files (x86)\InstalledSoftware\away3d-core-fp11\src\away3d\containers\View3D.as:460]
    at away3d.containers::View3D/render()[C:\Program Files (x86)\InstalledSoftware\away3d-core-fp11\src\away3d\containers\View3D.as:486]

    Is there any way you could post/send an example project that works with Flex + Mobile + Away3d ?

    Thanks

    • http://www.tricedesigns.com Andrew

      Stage3D is not enabled for mobile projects. It has not been publicly released yet.

  • Richard

    Thanks for the speed response…very helpful. Do you haven any ideas as to when it will be released?

    Thanks,
    Richard

    • http://www.tricedesigns.com Andrew

      Sorry, the date isn’t public yet… All I can say is “soon”.

  • Patil

    Hi,

    Can you please tell me which version of Flex SDK and Away3D you are using to compile your demo app.

    Thanks

    • http://www.tricedesigns.com Andrew

      Patil, That uses the Flex 4.6 SDK with the latest version of Away3D. I did not keep track of the exact build number, but I am pretty sure it will work with the 4.0 beta version available at: http://away3d.com/download/

  • jack

    May be you should put that in the post above.

    “Stage3D is not enabled for mobile projects”

    • http://www.tricedesigns.com Andrew

      Jack, that is mentioned in the post above – “Stage3D for mobile is not yet available”

  • http://www.tricedesigns.com Andrew

    After much anticipation, Stage3D is now available for mobile devices using AIR 3.2, from Adobe Labs. Have fun, and be sure to share your creations! http://labs.adobe.com/technologies/flashplatformruntimes/air3-2/

  • Can anyone post a barebones Flex mobile + away3d project

    Hello,

    Can anyone post a barebones Flex mobile + away3d project. I’m having issues displaying the 3d object and I’m not sure I have the view3d + Flex View integration correct. My simple 3d geometry doesn’t seem to display.

    Basically I’d like to render ANY Away3d primitive inside of a View/ViewNavigator control in a Mobile Flex app.

    Thanks in advance for any help that you can provide!!!

    • http://www.tricedesigns.com Andrew

      The code referenced in this blog post works with Stage 3D. Make sure to set background alpha to 0 on ALL containers that may overlap the Stage3D area. This includes the root Flex application. Stage3D content shows up behind the display list, and any flex content has the potential to hide it.

  • Richard

    I am currently having issues getting a flex mobile + away3d + air 3.2 project working on the iPhone. Since air 3.2 has been released, would it be possible to release/publish at least a barebones project with away3d in a tab/view or something similar? Thanks for any help you can provide.

  • http://pierrechamberlain.ca/blog/ Pierre Chamberlain

    Hi Andrew,

    I was curious to know if you made (or know of) any other charting components to draw 2D Graphs in Stage3D? I would be very interested to know how to pull off bezier curves in Stage3D and how they are drawn.

    Thanks!

    • http://www.tricedesigns.com Andrew

      Sorry, I never pushed it much further than what I originally posted. I would think you could render the curve to a bitmap using the normal curveTo method from the Graphics class, and then use that bitmap as a texture in Stage3D. Otherwise, my guess is that you’d have to create the geometry for a curve yourself, and have it rendered using AGAL or one of the open source frameworks.