Last Week over at there was a post on AGAL and how to create an animation of a field of barley waving in the sea breeze. The post it self is informative and has lots of useful links. However after profiling it in Scout it’s obvious that there are a number of issues with the execution. While it still runs close to 60 fps, the cpu budget sits around the 89% mark, with periodic jumps to 229% every second or so for Garbage Collection.


The author admits it’s not the most optimized demo and points out that the reading of the Perlin noise data is a big contributor in killing the performance.

But seeing as this was meant to be a post on “Adventures in AGAL” I found it somewhat disconcerting how bad the the performance is (although don’t get me wrong, I love to see people posting about AGAL!). So I figured I’d give it a go, however with a focus on performance.

First I opted to go with Away3D rather than Starling. While Starling is awesome, I’ve found over the last few years that I can squeeze a bit of performance out of Away3D and you have the obvious benefit of the extra dimension.

My approach is simple.

* Create a texture atlas with a number of blades of grass that vary in shape and colour. (Combining all the different blades of grass into one bitmap within a single texture atlas is extremely important because it will allow you to draw everything in one draw call).
* Create a row of planes, with a x offset and randomly assign one of the grass blades from the texture atlas.
* Merge the row of planes into one mesh.
* Take the merged row mesh and clone 150 times with a z offset.
* Merge again so you have only one mesh.  (Just like the texture, combining all the meshes into a single mesh is also extremely important because it will allow you to draw everything in one draw call).
* Create and apply an animationSet for animation. (All logic for the animation is in AGAL and there is only one offset param that needs to be updated every frame. This means that there are no expensive GPU uploads).

The result is a single Material, a single Mesh with 1.8 million polygons and a single animator producing a final animation that is both aesthetically pleasing and extremely performant. The swf runs at 60fps and uses 4% of it’s frame budget.


And the resulting swf.

Get Adobe Flash player

Source code can be found on GitHub.

Notes: on one of my PCs I noticed while testing with the built in chrome flash player (PepperFlash there are periodically huge jumps in Stage3D budget usage.