Basic 3D Web Display Lighting Modes

Modes: Flat Shading Phong1 Phong2 Normal1 Normal2 Normal3 Normal4

When displaying 3D objects on the web there is always going to be a trade off between the look and the performance of the system.  Different technologies have different capabilities and so they are going to produce different looking output.  Additionally, users have different hardware so when using some of the more advanced lighting modes what performs well on some systems may not work correctly on others.

The way an object is textured and rendered controls the look that the object will have when displayed.  In 3D graphics there is a big difference between what can be displayed at real time verses the look that can be done by rendering frames out to a video and then displaying the result.  I’ll run through some basic lighting methods that are suitable for displaying 3D models on the web with some examples using the cube.

The cube was produced using Away3D, an open source flash actionScript library.  You can either click on the sides or follow links in the text to change into the various lighting modes.  If you right click and select “Away3D Project stats” you can get a nice display of the frame rate (FPS) that you are getting when displaying the different modes.

Flat or Constant Shading

Flat Shading This type of lighting mode renders very fast and fairly complex geometry can be rendered at run time on the web by most computers.  Each side of the cube is textured using a single picture that is mapped to the sides of the cube.  The look here is completely dependent on what the texture looks like and the effect is not too convincing using the basic textures as shown.

The benefit of this type of shading is that it is very fast and has precise control over the final look and coloration of the object.  By combining this with textures that have been created to look photo-real and controlling your camera angle, you can get some very nice results.  The look you get out of flat shading is largely dependent on the skills of the artist you select to produce the texture and what type of software was used to make the texture.

Phong Shading

Phong1 This is a basic Phong lighting setup with a single directional light.  It calculates a bit slower than flat shading but the lighting effect is more convincing.  If you look closely at the ‘top’ of the cube you will see that the light acts a bit differently.  The specular light (bright shinny reflection) here looks more like the results from a lambert calculation, which is often used to make a paper or cloth looking material.  Variation in specular lighting can make materials appear differently.

Phong2 There are two directional lights here with slightly different vectors, one of them has a blue coloration and the other is white. Any number of lights can be added to the scene but as more lights are added the time it takes to calculate goes up.

Normal Maps

This lighting effect combines the Phong lighting calculation with a normal map to achieve some more detailed looking effects from a very simple (low polygon) model.  The normal map is like a texture that has been produced using a specialized program and it tells the calculation the direction that the polygon normal is facing. (A surface normal is a vector that is pointing 90 degrees to the surface it is calculated from)

Normal1 This lighting mode combines a single directional light with a normal map.

Normal2 This mode is very costly to compute and the frame rate (how fast you can move the cube around) may suffer depending on your computer hardware but I like the way it looks.

Normal3 A blue and white light.

Normal4 Another effect with blue and green directional lights.

Texture Baking

This is a technique where more advanced lighting and shadowing effects are used to produce a texture used in display of the 3D model.  Usually two 3D models are made – a very detailed model and a very simple one.  The detailed model is used to create a normal map and is often used to make a photo real looking texture.  By applying the texture and the normal map to the simple (low polygon) 3D model very nice highly detailed looking 3D models can be displayed using real time lighting effects on the web.

Although this sounds simple, getting good results can be difficult. Additionally camera movement and lighting need to be adjusted so that the objects will look correctly.

HDRI lighting

This lighting mode takes a high dynamic range image and uses it to produce the lighting effects for the 3D scene.  This can result in some very nice real time lighting effects. Both Away3D using Flash and Holomatrix Blaze 3D using Java, as well as other programs support this mode of lighting.  For a quick Holomatrix demo you can look here: http://www.lightsplasher.com/Demos/Blaze3DDemo.html (This is just for comparison and evaluation of the lighting effect – the demo needs work on camera movement – click and move the mouse to move the entire room around and please try not to get too sea sick <grin>).  The nice wood texture used in the demo has texture baked lighting effects and is based originally on a texture courtesy of Sue Chastain and About Graphics Software, http://graphicssoft.about.com. ©Sue Chastain, 1999-2009.

Conclusion

The focus here has been on lighting modes supported by technologies that either do not require browser plug-ins or use plug-ins that most people have installed. What type of lighting mode you use can affect the look of the project and how well it performs and how difficult it is to produce.  If you are willing to have your users install specialized browser plug-ins there are additional wonderful technologies like the Unity browser plug-in that can further enhance the experience.  (More on this later…) Many of these lighting effects were not practical without flash 10 and some support for hardware rendering.  This is an exciting time to be involved with 3D.