Pin Me

Creating Effects With Papervision 3D

written by: Matthew Casperson•edited by: Linda Richter•updated: 9/29/2009

In this tutorial, we focus on applying Flash filters to objects designed with Papervision 3D to create all sorts of special effects.

  • slide 1 of 7

    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.

  • slide 2 of 7

    Using Filters

    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.

  • slide 3 of 7


    Papervision 3D Glow Filter The 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.

  • slide 4 of 7


    Papervision 3D Drop Shadow Filter The 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.

  • slide 5 of 7


    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 embodied a number of different texture files, reducing the size and load time of the final SWF file.

    Papervision 3D ColorMatrixFilter Papervision 3D ColorMatrixFilter 

  • slide 6 of 7

    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.

  • slide 7 of 7

    Related Article

    Away3D Screenshot Away3D Programming Tutorials - Animated Textures

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