The Back Button

I’ve just starting using Papervision3d for the first time and I decided to go head first into the Great White build.

After completing a portion of work in my project I usually run the profiler to make sure objects are being collected. So, after finishing my Papervision3d portion of work, I ran the project in the profiler. I immediately noticed that I had a worry number of PV3D objects still hanging out, taking up a lot of memory. They we’re mainly math type objects such as Number3D and Matrix3D. And after exploring some more using the profiler, I was able to see that the culprit was the MaterialManager. And surprise , surprise, it’s a Singleton.

Now, I’m not one of those people who hate Singleton’s in projects, all I ask is that they keep themselves tidy. So that when a singleton is “idle”, it’s memory foot print is minimal. And yes I understand that “Great White” is in a pre-release status so I’m not on a rant and bitch session here. I would merely like to warm others who are using Great White for projects to be carful.

So, how does MaterialManager leak? It would seem that the following Dictionary just keeps growing and growing with complex Material objects.

private var materials:Dictionary;

And in the way I’m using Papervision3d; I end up with hundreds of bitmap BitmapMaterial’s and WireframeMaterial’s by having Cubes covered in the BitmapMaterial’s fly on to stage and then off again. Once I remove the Cube from the Scene3D, I expected the Material to be GC’ed because I saw no hard deconstruct method. But no, I saw this Dictionary becomes quite large, very quickly.

To work around this problem I temporally commented out the body of the registerMaterial method so that my Material would never be added to materials:Dictionary.

public static function registerMaterial(material:MaterialObject3D):void {
//getInstance()._registerMaterial(material);
}

But you may need to build your own work around if you’re using shaders as the MaterialManager seems to be connected to ShadedMaterial’s. Maybe you could call init() on MaterialManager once you’re finished with your papervision3d portion of the project. Or work closely with MaterialManager when removing objects from the Scene3D.

I’m sure this issue shall be corrected for the final release of PV3D 2 but until then this work around will be working for me.

Ever since the release of Flash 8, I’ve rarely published a Flash project with a HIGH stage quality. If you know why, then you can skim this post and leave me a high-five in the comments, if not then read on …

So what’s stage quality I hear some of you asking? Well, you may of seen it feature within the default context menu of the Flash Player. And this small setting defines how certain elements are anti-aliased/smoothed within your Flash application.

Here are the four available quality settings:

• StageQuality.LOW - Graphics are not anti-aliased, and bitmaps are not smoothed.
• StageQuality.MEDIUM - Graphics are anti-aliased using a 2 x 2 pixel grid, but bitmaps are not smoothed.
• StageQuality.HIGH - Graphics are anti-aliased using a 4 x 4 pixel grid, and bitmaps are smoothed if the movie is static.
• StageQuality.BEST - Graphics are anti-aliased using a 4 x 4 pixel grid and bitmaps are always smoothed.

So, HIGH and BEST sounds really awesome right? Think again! Let’s take a brief look at (vector) graphics:

Vector graphics (also called geometric modeling or object-oriented graphics) is the use of geometrical primitives such as points, lines, curves, and polygons, which are all based upon mathematical equations to represent images in computer graphics. It is used in contrast to the term raster graphics (also know as a Bitmap), which is the representation of images as a collection of pixels, and used as the sole graphic type for actual photographic images.

When Flash renders a vector graphic, the bitmap result of the vector data is calculated on the fly. This can be awfully taxing on the users machine depending on how complex the vector graphic drawing is. A large part of this calculation goes on smoothening-out all of the lines and edges so that you end up with something that doesn’t look jaggy, and this is where the quality setting comes into play. You can think of the quality setting as accuracy level of anti-aliasing. So, the higher the accuracy, the more work has to be done when rendering.

So what changed in Flash 8?. Well, Bitmaps staged a military coup and took the crown away from vector graphics of course (err). First off, we got the cacheAsBitmap flag, this took a lot of stress of rendering complex vectors away such as UI components. Then we got the awesome BitmapData class (its like a freaking Swiss army knife!), and finally we got Advanced embedded text rendering. The new text rendering is the most important reason for not using HIGH anymore as it does not suffer from jaggies in lower modes.

Back in 2005, I created my first Flash 8 website while working at Sparkart for Mike Shinoda’s side project, Fort Minor (http://fortminor.com/site.php). I really wanted to dip my toes into as many Flash 8 features as possible. So, in the site you’ll see blend modes, blurs, vp6, BitmapData (used for image flattening) and advanced text. But the best thing about all of this is that the site stage quality is set to LOW! Now, this site wont win any awards for usability and the code is rushed (~2.5 week project) but you’ll see how I was able to push the speed of the animation by setting the quality to LOW without really loosing anything visually. An important thing to note from this is that the site has no vector graphics, its all bitmap based.

This brings me briefly onto Papervision 3D developers who actually inspired me to write this post. Today, I came across the papervision based game “Downtown Maze Master” from Nissan. I noticed that the game was running in HIGH mode through the games context menu as my MacBooks core was running at 77% and my laptops fan soon fired up. Thanks again to the context menu, I took the setting down to LOW and immediately watched my core usage go down to 54% without any anything visually bad happening in the game. I’d usually expect papervision3d developers to be close on the bleeding edge of Flash, so I wonder why the quality setting was forgotten. And this site is only once of many papervision3d sites guilty of this sin. End of rant, spread the word :).

Bitmaps rock your sock in Flash, but what about if you need to resize bitmap elements? Well in my world today, I work mainly on creating application UIs vs website experiences, and my best friend is 9 slice bitmap scaling. To read more about 9 slice resizing, check here. But what about if you still need to utilize vector graphics and run with a LOW setting? Well, you may still need to use the HIGH setting if your vector is quite dynamic and/or shape tweened. But if your only planing to pan your vector around the stage, then you might be able to use LOW successfully if you “flatten” the vector to a Bitmap in HIGH mode, then switch back to LOW.

// ActionScript 3

stage.quality = StageQuality.HIGH;
var shape:Shape = new Shape();
shape.graphics.lineStyle(2,0xcc00cc);
shape.graphics.drawCircle(100,100,100);
var bitmapCanvas:BitmapData = new BitmapData(200,200,true,0xffffff);
bitmapCanvas.draw(shape)
stage.quality = StageQuality.LOW;
var circleImg:Bitmap = new Bitmap(bitmapCanvas);
addChild(circleImg)

The result will be a wonderfully anti-aliased circle shown in LOW mode. This method also works well for cutting down the number of elements on stage in general, just think of it as an uneditable cacheAsBitmap.

The lesson I want you to take from this post is to always play with your default quality mode before pushing your site live. You just might get a pleasant surprise :).