keyline2.jpg

Hello all, my name’s John Iacoviello and I work with Balind as a Sr. Interactive Developer at Red Interactive and I also go by Self Titled.

keyline2.jpg

After finally getting a chance to build a site which heavily uses Papervision, I feel like sharing some of the things I found to be useful on getting the most performance without sacrificing visual quality.

keyline2.jpg

ufc84.jpg

UFC 84: Ill Will Created by Red Interactive Agency, 2008

keyline2.jpg

The site I built was the UFC 84 microsite. I had to optimize the hell out of this thing due to the processing demand. One section in particular drove me nuts and still didn’t turn out as good as I had hoped. If you look at the fight card section in the above mentioned site you’ll know what I’m talking about.

keyline2.jpg

So I’ll tell you every little thing I did to conserve on processing power and memory. Whether they are common practices or not, I have no idea because my communication with other developers that have used Papervision has been fairly limited up to this point. I’m sure there are many other things I could have done but by not being completely familiar with the API, I feel I did what I could. And feel free to add any additional techniques or tell me if I’m mistaken in any way in the comments below or through email.

keyline2.jpg

Alright, lets get into it…

The main things that I focused on were the materials, I noticed the greatest difference in performance after altering properties on them, so that’s where the focus of this post will be.

Since most of my assets were MovieClips, I used the MovieMaterial object the majority of the time. So lets look at a basic code snippet.

var material:MovieMaterial = new MovieMaterial(displayObject, transparent, animated, precise);

keyline2.jpg

The first parameter is your DisplayObject that you want to use. The only thing to look at here are the dimensions of your object. For example, if you have a MovieClip that’s 800×600 but you’re only going to be displaying it at roughly half the size, you’ll save on file size and performance by resizing that MovieClip to 400×300 before using it in a material. Of course, this all depends on what the MovieClip contains and how high res you need it to look. If you have a large background plane, which is far off in the distance and doesn’t have a huge amount of detail, then you can shrink it down at the source. Then when you create your plane you can scale it up to achieve the same dimensions with less bitmap information, as seen below. If you do this you’ll most likely want to set the smooth property on the material to true. This will apply smoothing to the bitmap and will look much nicer when scaled up.

material.smooth = true;
var plane:Plane = new Plane(material, material.movie.width * 2, material.movie.height * 2, segmentsW, segmentsH);

keyline2.jpg

The second parameter is whether you need transparency or not. Setting this to false will help with performance. Most of the planes in the UFC 84 site required transparency because the materials were transparent png’s of the fighters. The background planes, however, are opaque since there’s never anything behind them.

keyline2.jpg

The third parameter is whether the material will be animated or not. For example, if your MovieClip has a timeline animation you’d need to set this parameter to true. Setting animated to true will cause the MovieClip to be redrawn to the materials bitmap every frame. This could be very taxing if the MovieClip is large or if you have multiple materials being redrawn at the same time. For the most part I’d imagine you wouldn’t need the material to be constantly playing, usually only during a transition. So one thing you can do is to set animated to false initially, and when you need to play the animation, set the animated property on the material to true. Then, when your animation is complete set it back to false.

material.animated = true;

keyline2.jpg

The fourth and what seems to be one of the more effective ways of gaining performance is whether the material uses precision when drawing the bitmap. This will draw the material more accurately and thus will need more processing to do so. I almost always set this to false as I noticed a huge performance drop when setting it to true. What you will notice (depending on the number of segments that you set on your object which I’ll touch on in a minute) is when having this property set to false your material might look a little distorted when it’s rotated on its Y or X. This is more apparent on materials using text but is visible in most cases. A good way I found to counter this is to bump up the number of segments your object uses for each side. For most planes I would typically use 3 for both segmentsW and segmentsH, but when I needed more accuracy I’d bump those up as high as needed, usually not above 9×9 segments.

keyline2.jpg

The version of Papervision I used for this site had a slight bug in it which I believe has been addressed now. The destroy method (which disposes the bitmap objects they use) in the material classes wasn’t being called when the objects were destroyed, so I had to go into the classes, change the destroy methods to public and call them explicitly when I needed to clean up the materials for garbage collection. I’m pretty sure this shouldn’t be an issue any more though.

keyline2.jpg

The last thing I’m going to talk about is the viewport dimensions. The smaller the viewport dimensions, the less has to be rendered. I couldn’t take advantage of this because this UFC site takes up the full browser area for some fullscreen goodness, just the way I like it. I’m also on a large widescreen monitor but when you scale down the size of the browser the site performs much faster is some areas. This is the only time I’ve seen an advantage to a smaller monitor.

keyline2.jpg

I think that’s about it, again if I’m mistaken anywhere or if you have any additional techniques to help speed up Papervision for us developers please add them below.

keyline2.jpg