Optimizing Papervision Rendering Performance Part I

1 Comment

One of the big problems with Papervision as a 3D engine is that because it’s cross platform, not hardware accelerated, it really uses up a lot of the hardware CPU.
Many Papervision projects can really bog down the CPU and can be a major turnoff for a user or a site visitor.

One of the easiest most common sense things to do is to render only when necessary. This only works for certain types of Papervision projects. If you have a 3D 1st person shooter, this probably won’t apply as much since you are always in motion. However if you have a project with clearly defined animation states that end up into mostly static states, this trick is a good one.

What I do is have a global variable, singleton or what have you called NEEDS_RENDER, which is set to true only when you need to render of course. By that I mean, only when there’s animation. If the scene does not change, there’s no need for us to call the Papervision render loop to update the scene.

// our render loop should look something like this now:
private function enterFrameHandler(event:Event):void {
if (NEEDS_RENDER)
view.singleRender();
}

If we are doing tween based animation (I am a big fan of TweenMax), then right before we do the animation, we set ourvariable to true so that the render loop knows to update the scene.
We use the onComplete event to set the NEEDS_RENDER variable back to false so that when the animation is done, we are no longer updating the scene.

NEEDS_RENDER = true;
TweenMax.to(cube, 1, {
rotationY:180,
onComplete:function():void {NEEDS_RENDER = false;}
})

This works for really simple cases where we only have at most ONE animation going on at any one time. In a more complicated scene where there maybe animations starting in the middle of other animations ending, using this method will produce rendering artifacts where animations suddenly stop or freeze or disappear. This is because the previous animation has not had a chance to finish its animation when a new animation starts. When the first animation finishes, the global variable is set and the render loop gets the message to not have to update the scene. This results in the new animation not being able to finish.

The simple workaround for this is to use the onUpdate event of TweenMax. We just keep setting the variable to true on this event which will keep firing until the animation is complete.

TweenMax.to(cube, 1, {
rotationY:180,
onComplete:function():void {NEEDS_RENDER = false;},
onUpdate:function():void {NEEDS_RENDER = true;}
})

Using these simple techniques, I was able to get a Papervision project that was constantly eating up 70-80% CPU to something that hovered around 20%, only spiking up during the animation.

Popularity: 7% [?]

Lighting Bitmaps in Papervision

1 Comment

This is a technical article explaining how to code a light source into your Papervision 3D scene. Papervision is an open source 3d library for the Flash platform.

Lighting in Papervision is a very useful tool. It helps add realism to your 3D project. Often times, you will have a scene or 3D objects that have textures on them using bitmaps. You can easily add lighting effects to these textures.

First you’ll need to add the following import statements:
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.shaders.PhongShader;
import org.papervision3d.materials.shaders.ShadedMaterial;

Phong Shading is a set of 3D rendering techniques which includes a model for reflecting light onto surfaces. It was invented by Bui Tuong Phong at the University of Utah, who published them in his 1973 Ph.D. dissertation.

Where you set up your scene, just create a light source
light = new PointLight3D();

In the part where you create your 3D objects that you want to light, you will create a PhongShader based on the light source and a ShadedMaterial based on your BitmapMaterial and your PhongShader. Please note that it HAS to be a BitmapMaterial and not a BitmapFileMaterial.

var earthBitmap:Bitmap = new earthAsset() as Bitmap;
var mat:BitmapMaterial = new BitmapMaterial(earthBitmap.bitmapData, true);

// create a shader using the light source
var phongShader:PhongShader = new PhongShader(light, 0xFFFFFF, 0x000000, 10);

// create the material based on the Phong shader
var phongShaderMat:ShadedMaterial = new ShadedMaterial(mat, phongShader);

globe = new Sphere(phongShaderMat, 200, 20, 20);

view.scene.addChild( globe );

The project source code is available for download here.

Popularity: 12% [?]

AutoDesk Project Dragonfly Lead Developer Interviewed

No Comments

My friend Shelly Mujtaba, lead developer of Project Dragonfly, was interviewed over the web. Dragofly is a free online 2D/3D home layout design Rich Internet Application created by AutoDesk. Check out the video series here: http://www.youtube.com/view_play_list?p=D2617D775224DEBF

Read a review of it I posted earlier this year here.

Popularity: 2% [?]

Twitter + Augmented Reality

9 Comments

What happens when you put together Flash, Augmented Reality, Papervision3D, the Twitter API, and a bored geek? You get this little webcam demo of a Flash app that tracks a marker and displays a speech bubble with your latest tweet.

Although Augmented Reality (AR) has been around for a while now, cheap webcams, 3D on the web, and other factors have only recently enabled the field of AR to be usable by the masses.

Thanks to John Lindquist’s tutorials, I was able to quickly put together a small demo of what you can do with AR and the Twitter API.

The commercial use of AR is still in it’s infancy and people are still trying to figure out how to use it. There have been some examples in the entertainment space, namely the PS3 game Eye of Judgement and the Topps Baseball trading cards.

Here’s a cool AR idea for a conference. Your registration badge can come with a marker that can be read by a big interactive wall installation with cameras. You can then walk up to it and it would show you your sessions. Not only that, but other people who walk up to it can also see their sessions and maybe, if the person standing next to you has the same sessions as you, it would let you know that so you can connect.

Here’s another cool AR idea for the web. Webcam Poker. Each player would have a marker on their desk. The webcam can then pick up the marker and project a virtual hand on your desk, so that your opponent would see your desk as if you had cards on them and you would be able to play virtual poker in a slightly more realist fashion than just clicking cards on screen.

Popularity: 4% [?]

Adobe Max 2008: Unconference Flex + Papervision

No Comments

The Flex + Papervision Unconference talk was given by Vic Cekvenich CEO of PointCast Network. His company provides software solutions based on opensource packages but also provides services and additional libraries to facilitate development.

His talk was an intro to Papervision, so I won’t cover some of the material that’s pretty much all over the web. What I found interesting was that he uses FlashDevelop to do Flex development. His opinion is that it’s smaller, leaner, and much faster. He just has the Flex 4 SDK installed and when he builds, he targets the Flash Player 10 runtime, and that’s pretty much all he needs.

His talk was also geared towards people who want to build great experiences online that rival consumer apps like what you see on CNN, or the Xbox360 interface. His argument is that web experiences fall short of other experiences even though the PC is a much more powerful medium because developers are too lazy. His other focus was Papervision for online game development.

One insightful comment that he had was that people have this silly notion that you build great applications, then some magic happens, and then you become rich. The web world has convoluted that second step, that magic step. People think they out to give things away for free, and somehow they’ll get rich. He says charge for the damn thing. For the Flash games that he develops, he provides a free version with limited options, and if you want to use better guns, or have better clothes for your avatar, you pony up cash. Magic.

The other thing I learned from the talk which I will be trying out soon is adding lighting to my Papervision scene. Basically you use a Phong Shader which you apply to your material and specify lights for it, and voila – lighted objects. Look for a tutorial in the near future.

Popularity: 2% [?]

Older Entries