Flash and JavaScript 3D with Sandy-HX - Shading

Shading is a term that refers to how a 3D object is lit. Lighting an object is used to highlight the depth and shape of an object, and for such a simple effect it adds a lot to the realism of the 3D scene.

There are a number of different ways to light an object, each achieving a different effect, and each having its own performance cost. Generally speaking the more realistic the lighting effect it, the more expensive it is to calculate. This is an important consideration when making 3D Flash and JavaScript applications, because they do not have the ability to utilize the underlying 3D graphics hardware that has become so prevalent today.

Cell shading attempts to recreate the look of a hand drawn cartoon image. It does this by shading the object with a few discreet shades of colour. The object is also outlined with a solid line. This effect has been used by a number of games to achieve a distinctive anime style.

Flat shading is a simple effect where each polygon has a single shade. For high polygon objects this type of shading can be quite effective, but for low polygon objects it makes the individual polygons stand out. It is very simple to compute though, so for scenes with a lot of individual objects flat shading may be the best choice.

Phong shading applies a lighting value to each individual pixel. This means that, unlike flat shading, phong shading looks good on high and low polygon models. Because each pixel has to have its own individual shade calculated, Phong shading can be quite expensive.

Something that is worth motioning is that the current version of Sandy-HX does not render these shading methods consistently between JavaScript and Flash. The Flash version does not show the underlying wireframe, whereas the JavaScript version does. And the Phone shading doesn’t work at all in JavaScript – you can only just see the bottom of the sphere being rendered in JavaScript when the Phong shading is applied. Some issues with the JavaScript version of Sandy-HX are to be expected though, as it is still experimental at this point.

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

Read more in the Flash and JavaScript 3D with Sandy-HX series