theFlashFactor

Molehill at a glance

Serious flash developer should be excited by now since a few days ago Adobe introduced Molehill API under incubator program. Incubator is a new software development program that allows developer to have early access to what going on and under developed of the platform then provide extra testing and ideas to possibly improve the API. While Incubator program is actually nothing new in software development world (for example Eclipse Incubator), it really is a big step forward from Adobe to be more opened and insightful to platform developer.

Molehill has already become one of the most discussing topic since Max2010 when Adobe officially introduced their hardware acceleration implementation for Flash platform which is ubiquitous but heavily criticised for taking lot of CPU resource. Today software rendering is a dated technology and should only be a fall-back solution for machine that doesn’t have decent hardware support. That being said Molehill is all sweet and candy and very promising API not only for game developer but graphic programmer in general to deliver amazing experiment that traditionally written in Direct3D or OpenGL.

Currently, Molehill is still in very early stage and supposed to be changed until final version, nonetheless you can try the API right now by downloading Flash player 11 incubator and related playerglobal.swc library. In some perspective Molehill is very similar to Direct3D and OpenGL while you off load most rendering process to GPU pipeline. You control what will be rendered by designing input attribute under a form of “vertex” which is a point in 3D, there will be million vertex which forms numerous small triangle. A triangle is a smallest geometry unit that may contain pixels within it and constructs part of image data. To manipulate vertices, GPU provides kernel functions called Shaders, these are program written in some shader language that using GPU power to calculate and output very fast the number that you feed in shader program. GPU also takes care of other 3D related task like clipping, culling, projecting but you can also customize those tasks to fit your design. In other words, most simplest thing you have to do when working with GPU is to design the input and write shader program to create expected output.

3D engine, fast and furious

3D engine for Flash has already been developed since recent years. They actually have very rich set of feature but unfortunately base on software rendering that rely completely on CPU power, which is not efficiency to process graphic related task. Although Molehill grants developers access to GPU shader it’s really low level and to develop anything practical one will need a framework to speed up development process and enhance productivity. Fortunately Adobe decided to work with some popular 3D engine developers / team a few month ago so everyone can take advantage of 3D engine rich capability, powered by Molehill, accelerated by GPU

Away3D is one of the best 3D engine available so far and it’s open source you can learn a lot from them. Away3D team is also very active, currently Away3D version 4, codename Broomstick in alpha version is all ready to tryout. I’ve put together a demo app with Broomstick to show how easy it is to develop 3D app using 3D engine. The app is a CoverFlow photo gallery that search image from Flickr, many custom parameters are available. Hardware acceleration allows Flash player to render million polygon per frame in fast and smooth manner without stressing too much CPU resource. Special effect like lighting is possible to enhance more depth and 3d feeling, you need Flash Player 11 installed to see the demo:

Extra libraries:

• Minimal Component
• GreenSock Tween

Below is a whole detail setup for Molehill / Broomstick development, IDE of choice is Flash Builder Burrito which is similar to some Eclipse based IDE out there:

Download:

• Demo Source. The zip includes extra libraries like Broomstick.swc, greensock.swc, minimalcomp.swc to compile demo app
• Flash Player 11 Incubator and follow instruction to install it
• playerglobal.swc with Molehill API
• Flex Hero Build 19786. The SDK is actually not necessary since it doesn’t contain Molehill API, you can just safely use any Hero build that support -swf-version compiler arguments

Setup:

• Unzip Flex SDK to your local disk
• Inside Flex SDK folder, navigate to frameworks – libs – player
• You’ll see 10.2 folder which targets Flash Player 10.2 and contains a playerglobal.swc. However Molehill is only available if you target Flash Player 11, hence create a folder named 11.0 and put Molehill playerglobal.swc that you downloaded before inside it

Flash Builder:

• Launch Flash Builder, create a new Actionscript project
• In the wizard dialog, Flex SDK section, choose Configure Flex SDKs. Add the location of Flex SDK build 19786. Return to wizard dialog – Use a specific SDK and point to newly added SDK. Hit Next
• In Library path section, Add SWC. To compile demo app you’ll need to add all SWC in demo -libs folder: Away3D_broomstick.swc, greensock.swc, MinimalComps_0_9_9.swc. If you just use Broomstick, greensock and minimalcomp is not required
• Flash Builder creates a new project with a default .as file. To test and exported SWF that target Molehill, go to Project menu – Properties – Actionscript Compiler – Adobe Flash Player otions – Use a specific version – Enter 11.0.0
• In the same dialog – Additional compiler arguments, type -swf-version=13. Hit Ok
• Verifying: in Package Explorer view – Flex 4.5 – playerglobal.swc – flash, you should see display3D package





• Now we have to enable GPU render mode in html page. Open html-template and edit index.template.html. Add params.wmode = "direct"; inside javascript block of swfobject




• That’s it. You can now start developing Away3D / Molehill app. Make sure to compile and test in browser, the local player is currently not available.

Demo app:

• To compile demo app just copy the asset and com folder to your project src folder, then set default application to BroomStickCoverflow.as and point to it in Debug Configuration dialog