Tutorial: Away3D TypeScript: Shadows – ShadowSoftMethod

This is a quick overview tutorial of the ShadowSoftMethod Shadowing method in the Away3D TypeScript library used with the DirectionalLight.

To use a ShadowSoftMethod, you’ll need:

  • Declare, instantiate, and initialize a new DirectionalLight.
  • An object that will cast a shadow onto another object. So at bare minimum, two objects.
  • A Material object that has a shadowMethod node. Such as ColorMaterial or TextureMaterial.
  • Finally a new ShadowSoftMethod object pass to the shadowMethod node of the objects’ material.

This tutorial builds off of the Away3D TypeScript: Lights – DirectionalLight. All the important code will be highlighted in the full code block below.


Line 15 declares a variable named _objectMaterial of type ColorMaterial.

Line 70 instantiates a new ColorMaterial() object referenced by the variable _objectMaterial. It was initialized with 0xFFFFFF making the material white.

Line 71 instantiates a new ShadowSoftMethod object, initialized with this._light, 32, 8 . The important part is passing a reference to a DirectionalLight object in the scene. Then assigns it to the shadowMethod node of our ColorMaterial object.

Line 72 You can play with the epsilon values to see if it helps prevent “banding” in the shadows. Increase this if shadow banding occurs, decrease it if the shadow seems to be too detached.

Line 73 assigns the scene‘s _lightPicker object to the material’s lightPicker node..

Line 80 assigns our ColorMaterial object to the material node of our Mesh object.

Line 81 tells our Mesh object to cast a shadow. Since our cloned meshes also duplicate the material of our original mesh, we only need to set castShadows on the original mesh.

Line 99 turns off shadow casting on our ground plane. The light never comes from below, so it will never cast a shadow anyways. No need to waste system resources eh?

That’s it, our object are cast in light and shadows!

However, we glazed over the initialization process, let’s take a closer look at the object’s constructor.


The constructor looks as follows:

The Constructor’s Parameters:

  • castingLight:DirectionalLight — The light casting the shadows.
  • numSamples:int (default = 5) — The amount of samples to take for dithering. Minimum 1, maximum 32.
  • range:Number (default = 1).

So in our initialization we stated:

Which created a ShadowSoftMethod object:

  • With this._light which references our scene’s DirectionalLight.
  • With a numSamples of 32 (the max, for greater anti-aliasing on the shadow’s edge.
  • A range of 8. Try to stick to less than half of the numSamples value. But don’t just take my word for it, try it out yourself!

In Closing

Adding a ShadowSoftMethod is relatively easy. Just remember that it only works with DirectionalLight(s). Also, if your scene goes black, make sure all your materials have a lightPicker with a light source attached to it. You can look at an older version of the official documentation here.

If this tutorial helped you, you can follow us on Facebook or Twitter to keep an eye out for more tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *