Papervision 3D Programming Tutorial - Effects

Article by Matthew Casperson (4,911 pts )
Edited & published by David Berry (2,943 pts ) on Sep 29, 2009

A Flex / Actionscript development tutorial that shows you how to use the Papervision 3D egine to create 3D Flash effects in your webpage. This article demonstrates the use of Flash filters with Papervision 3D objects.

Flash comes with the ability to apply filters to graphical objects, which allows you to create some interesting effects like blurring, glowing halos and drop shadows with very little code. Papervision also has the ability to use these effects to add some visual flare to 3D renderings, and the good news is that, just like Flash, these effects are very simple to implement.

The Papervision DisplayObject3D class, which is the base for all 3D objects rendered to the screen, has a property called useOwnContainer. This property gives you the ability to tell Papervision to dynamically create a layer for your DisplayObject3D when it is rendered in the viewport. By setting DisplayObject3D.useOwnContainer to true, your object will be rendered with its own ViewportLayer. Moreover, you can assign properties to your DisplayObject3D that will be passed along to your generated Layer. We make use of this to pass in some standard Flash effects to the filters property.

BlurFilter

Papervision 3D Blur Effect

The BlurFilter applies a blur visual effect to the Papervision 3D model. This effect could be used to simulate objects underwater or in a mist.

GlowFilter

Papervision 3D Glow FilterThe GlowFilter adds a halo like border to the Papervision 3D model. This can be used to highlight a model, maybe to indicate a powerup. This is an especially nice filter because it can also be used to add the solid black border that usually accompanies the cell shading technique to produce cartoon like images.

DropShadowFilter

Papervision 3D Drop Shadow FilterThe DropShadowFilter adds a shadow underneath the Papervision 3D model. This could be used to fake a shadow of a 3D object on a flat surface without the overhead that calculating 3D shadows projected onto the ground would incur.

ColorMatrixFilter

The ColorMatrixFilter modifies the colours of the Papervision 3D model. It can be used to highlight certain colours or remove them completely. The ColorMatricFilter takes a matrix which is used to modify the underlying pixel color values. The matrix is really an array with a length of 20, but by laying out the code like the example below you can easily see how the different colours are modified. The matrix below displays only the color red.

var matrix:Array = new Array();

matrix = matrix.concat([1, 0, 0, 0, 0]); // red

matrix = matrix.concat([0, 0, 0, 0, 0]); // green

matrix = matrix.concat([0, 0, 0, 0, 0]); // blue

matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

Using a matrix gives you a huge number of ways to play with the underlying colors. Take the follow matrix.

var matrix:Array = new Array();

matrix = matrix.concat([0, 0, 1, 0, 0]); // red

matrix = matrix.concat([0, 1, 0, 0, 0]); // green

matrix = matrix.concat([1, 0, 0, 0, 0]); // blue

matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha

This actually swaps the red and the blue colors. In the demo you will see this effect used to alter the texture of the ship to a predominately yellow color. This could be used to create random texture colors without having to embded a number of different texture files, reducing the size and load time of the final SWF file.

Papervision 3D ColorMatrixFilterPapervision 3D ColorMatrixFilter

As you can see using the standard Flash effects with Papervision allows you to add a number of interesting effects with a minimal amount of code and effort.

Check out the online demo, and download the source code.

Related Article

Away3D ScreenshotAway3D Programming Tutorials - Animated Textures

This free article shows you how to add animated textures to a 3D surface in Away3D

Comments

Jan 20, 2010 7:20 PM
RE: Papervision 3D Programming Tutorial - Effects
No, Papaervision can be used with Flash as well.
Jan 20, 2010 6:36 PM
john
hi
Does this need to be compiled in flex?
Sep 7, 2009 4:03 AM
kim
thanks
it's very useful
Jul 11, 2009 3:09 AM
Tuan
Thanks
They are very useful articles.
They contain many foundation concept and techniques in 3D.

Thanks so much.
Jun 13, 2009 9:33 AM
heeeeeeeeej :P
heeeeeeeeej :P
you so genius
:P
 
Subscribe to Web Development
RSS
Get free weekly updates, directly to your inbox.
Subscribe
Browse Web Development