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% [?]

Using a WiiMote to Control an X-Wing

2 Comments

I spent this afternoon putting together a quick demo for my Rich Internet Interfaces Beyond Mice and Keyboards talk I’m giving at the DePaul University iTea Seminar tomorrow. The example is a simple one that illustrates using a WiiMote as an interface to controlling a 3D model. This can be easily used as a game control and or more general UI control. I believe it is a more natural way to interface with 3D elements navigating in 3D space and can be generalized to let people more intuitively navigate through and interface with software such as the operating system. After a few hours of looking for the WiiMote, charging it and some coding, I’ve put together this simple demo:

I can’t claim credit for putting together code to display a 3D X-Wing. I’m not interested in that. I quickly found what I was looking for here: http://code.google.com/p/papervision3d/downloads/list – the source code repository for PaperVision – the open source 3D engine for Flash. At the very bottom there’s sample code for displaying a 3D X-Wing.

First things first, you will need the WiiFlashServer that interfaces the WiiMote with your Mac. That code and supporting documentation can be found here: http://wiiflash.bytearray.org/. There are 2 pieces to the puzzle here. The WiiFlashServer which listens to the WiiMote and sends messages to your app and the WiiFlash Actionscript API which can receive those messages.

Once you download the Actionscript API and put that in your project directory, include it in your application:

import org.wiiflash.Wiimote;
import org.wiiflash.events.*;

var wiimote:Wiimote;

Initialize the Wiimote like so:

wiimote = new Wiimote();
wiimote.addEventListener( Event.CONNECT, onWiimoteConnect );

wiimote.connect();

The only thing we really have to do now is to use the pitch, yaw and roll values of the WiiMote and use them to control the X-Wing, like so:

function handleFrames(e:Event):void
{
var rotX = 0;
var rotY = 0;
var rotZ = 0;

if (!isNaN(wiimote.roll))
rotX = wiimote.roll/Math.PI * 180;

if (!isNaN(wiimote.yaw))
rotZ = wiimote.yaw/Math.PI * 180;

if (!isNaN(wiimote.pitch))
rotY = wiimote.pitch/Math.PI * 180;

// no easing - animation too jagged
//group.rotationX = -rotY;
////group.rotationY = rotZ;
//group.rotationZ = -rotX;

// added easing to smoothen motion
group.rotationX += ( -rotY - group.rotationX) / EASING;
group.rotationZ += ( -rotX - group.rotationZ) / EASING;
}

You can see from the code there’s a section I commented out. You can use the raw WiiMote values to feed to the X-Wing directly but I found that the values can be jumpy and discreet causing the X-Wing to turn and move with a lot of jitter. I added a simple easing function to make the movements smoother.

As you can see, it’s not rocket science. With a little bit more work, we can easily add other controls like button presses to control the firing of the X-Wing.

Here’s the link to the source if you’re interested. Thanks for watching.

Popularity: 6% [?]

Slides from “Tools for Creating WOW Experiences in FLEX” Talk

No Comments

Yesterday I gave a talk at the monthly Chicago Flex Users Group organized by Mike Epstein. In this presentation I give away all my tools and secrets on how I create great experiences for Rich Internet Applications. Here are the slides I promised.

Popularity: 1% [?]

RIApalooza 2: RIAs Beyond the Mouse and Keyboard Recap

1 Comment

On May 8th I as at RIApalooza Two, an unconference event for Rich Internet Application enthusiasts. Adam Flater and I gave a talk titled ‘RIA Beyond the Mouse and Keyboard’. Adam and I talked about how computing user interfaces are evolving and moving away from the current status quo of mouse and keyboard.

Adam talked about and demoed examples including his use of the mac accelerometer as an input device, his Lego Mindstorm robot controlled via Flash, and his mobile device, the Tesla Roadster.

I showed a couple videos of innovative uses of technologies such as augmented reality, touch computing, and the Wii balance board. Here’s a link to some of those videos. I demoed controlling a virtual 3D car with the Wii balance board, controlling a 3D earth using head tracking, combining Augmented Reality with Twitter, and my PostIt board with handwriting recognition. These are all part of a holistic vision of what constitutes a more natural user interface, moving away from the more artificial interaction that are the current state of input devices.

Here are some photos taken from Anthony Hand’s camera. My favorite picture has to be where I’m caught picking my nose – great.

Popularity: 2% [?]

Older Entries