This tutorial shows you how to generate a flat projection of a shadow using the SimpleShadow class using the Away3D 2.1 library or higher.

The concept

This is no high-tech class: we’ve remarked in the past that many designers were using floor planes with a radial gradient, blurred in their scene to simulate shadow projections under their models. The reason for this is simple. Using Flash Player 9, there are no ways to achieve shadow projection without placing the cpu under heavy load.

In many cases, especially for still objects, this class is a good alternative and look pretty convincing if the texture of the object contains some lighting information. What this class does is simply project the mesh information into a bitmapData object that is then used as the texture of a plane. It generates a plane with an automatic subdivision and places it under the Object3D of your choice. You are free to define the y offset of the plane, the minY of the object being the default.

On the design side, this class contributes to a more realistic looking shadow since the shape of the object influences the look, something that would require more design work for complex objects. You are able to define the amount of blur, color, alpha and gradual shading based on distance. The source bitmapData, the representation of the shadow, will be 1/1 scaling to the object creating the shadow, until it reaches a dimension higher than 2800 along the x or y axis. If this happens, the source will be stretched and only the plane geometry will be fitted to the object proportions.

You can access the plane object created if you need to move the object and adjust the plane position. At this stage of development the class doesn’t automatically update shadows with object and/or plane movement. Some tests were done in that area, but recalculating shadows is always going to be a processor intensive process, hopefully something will be updated in the near future.

This class does not use lights, as this would add to the processing overhead. Ultimately it is something used to fullfill an existing need, In the future there may well be further options with lights that will replace the SimpleShadow functionality.

In the meanwhile, lets looks at the way you can implement it into your code.

How to implement
Prepare your code as usual and import the class

import away3d.materials.utils.SimpleShadow

[... code ...]

Now we need to pass an object3D to the class. In this case a Sphere object, but you can pass any 3d object you like.

var mat:IMaterial = new BitmapMaterial(new myImageBitmap());

var mySphere:Sphere = new Sphere({material:mat, radius:200,

segmentsH:10, segmentsW:10});

Now we set the color of the shadow. The class has a dark grey as default value for the color, but for the purpose of the tutorial we want to have a red one.

var color:uint = 0xFF0000;

Note that if you want to apply some alpha to the shadow, just pass the alpha value into the hexadecimal color. The class handles ARGB for the color. For instance the same red at 50% alpha would be defined like this.

var color:uint = 0x88FF0000;

Now we want to add some blur to the shadow to make it look smoother. This is useful with low polygon models, as it will reduce the appearance of triangles.

var blur:int = 16;

var simpleShadow:SimpleShadow = new SimpleShadow(mySphere, color, blur);

If no more arguments are passed to the constructor, the generated shadow will be placed at the base (minY) of the object. But lets say you want it placed at y = 0. This can be done by passing a ‘base’ parameter.

var base:Number = 0;

var simpleShadow:SimpleShadow = new SimpleShadow(mySphere, color, blur, base);

Finally, if you display more objects placed at different y values, a way to visually enhance the result involves passing a distance factor for each shadow instance. The distance factor will automatically add alpha based on that distance and the ‘base’ parmeter of the class. Try to pass a number greater than height + y of your model to avoid irregular triangle fills into the shadow projection.

var distance:Number = 800;

var simpleShadow:SimpleShadow = new SimpleShadow(mySphere, color, blur, base, distance);

Now we build our shadow by passing the view.scene since the class needs to add the generated shadow plane to the scene automatically.

simpleShadow.apply(this.view.scene);

If you move your model and want to access the shadow plane in order to update its position, use:

simpleShadow.plane;

and adjust the x and z properties of the plane or its rotationY.
If you want to do it automatically (and if only x and z properties need to be updated) you can call:

simpleShadow.positionPlane();

Popularity: 4% [?]