Papervision3D: The Learning Experience

posted by Jon - 12:18 28/10/10

For those not in the know Papervision3D is a rendering engine that allows advanced 3D effects within the Adobe Flash platform.  We first used it to create a tool for designing packaging.  The tool was simple a rotatable rectangle with clickable sides which once selected allowed for the editing and moving of all its graphical contents, it also allowed text to be typed onto the surfaces. It was all very roughly coded as we just really jumped into use of the engine without learning it fully.  We promised ourselves that the second time will be different.

By the time the second change to develop with Papervision came around we had armed ourselves with a number of detailed tutorials and little in house test projects.  One of the most helpful tutorial sets was Seb Lee-Delisle’s, details of which can be found here.

This new project was our alcohol awareness campaign for the Bolton Primary Care Trust.  The project brief called for an interactive that highlighted the positive and negative sides of drinking.  This requirement was designed up into a series of face playing cards that could be flipped and rotated to display the drinking facts.

Now, this could have been made using the basic 3D rotation effects that now come as standard within the Flash IDE, but since it was a simple concept we decided to use Papervision as a learning experience. So armed with a basic coverflow tutorial and designs in hand we set out on a voyage of discovery.

So after using the coverflow and Seb’s tutorials we had the first incarnation of a structured object driven coverflow engine.  Then came the adding of the UI elements (rotation buttons and drink fact speech bubble) on paper this seemed like the easiest aspect to implement but it turned into the hardest.

The first attempt was to add the interface elements into a movie clips and use these as the textures for the card planes.  This turned out to be problematic when we attempted to dispatch events from within the movie clip texture up to the plane object.

So after a little rethinking we moved all the UI elements into their own layer external from the Papervision scene.  This new layer was simply turned on and off dependant on the position of the cards.  There was much rejoicing in the production department as we had our first properly developed Papervision project.

This happiness did not last for long due to the being hit with performance issues once the project went out for testing.  A few machines where hit with a drop in frame rates when an animation was in progress.

A few Google searches later and we had a list of performance improving tips (one such site is CodeJockey’s Corner).  To help with the performance issues we implemented the following;

• Rendered Papervision frames only during animation sequences
• Lowered stage and texture detail during animation sequences
• Reduced the number of polygons that make up the structure of the cards

Once we had a fully working engine we were able to tweak the coverflow animation to change it into a stack of cards that reshuffle themselves on click.

All in all we are pleased with the outcome of this Papervision experience and we are looking forward to the next chance to use the rendering engine.