Bitmap Camera Example Scene
home | developer central
Note: This example scene uses several different texture effects simultaneously, and may not be appropriate for older video cards. If your target platform is older hardware, you may wish to restrict the number of bitmap camera effects in your scene, or to avoid them entirely.

Introduction

One of the new features in Web Driver 3.0 is the ability to place cameras in your scene that render to a bitmap rather than to the screen. This example scene demonstrates some of the uses of this feature, including image-based lighting, real-time reflection and refraction maps, and custom portal geometry. You can view the scene here.

Audience

Some of the techniques used in this example scene (such as the refraction mapping on the crystal ball) are fairly simple, and should be no problem for Intermediate Web Driver developers, but other techniques (such as the water or cloth dynamics) are more appropriate for advanced Web Driver developers.

Overview

Since this scene is example code, we won't be going over the entire project line by line, but this section will provide an overview of the bitmap camera techniques used.

Crystal Ball: Custom Portal and Real-Time Refraction

Two bitmap cameras are used to create the crystal ball effect. The camera used to create the refraction map is placed within the crystal ball, and is set to point away from the main camera (the main camera's parent group points at the main camera using setLookAt(), and the camera itself is rotated 180 degrees inside its parent group). The camera used to create the image that the ball displays when it's "on" is inside the Wizard Eye. When the crystal ball is turned on, its opacity is simply faded down to about 20 percent over the course of two seconds, revealing the plane object embedded within it that shows what the eye is seeing (The plane object is made circular through the use of an alpha mask).

Water Surface: Real-Time Reflection

The reflection map used on the water surface uses a single bitmap camera, which is placed directly below the main camera, such that the two cameras are equidistant from the water's plane. The bitmap camera rotates so that its orientation is parallel to that of the main camera. This may seem counter-intuitive, since the reflection camera's rotation seems like it should be a reflection of the main camera's rotation (that is, the y component of its orientation vector should be reversed), but in fact, the mathematics of reflection mapping will take care of flipping the bitmap camera's apparent rotation. A side effect of this is that when the main camera is pointed straight down, the bitmap camera will also be pointed straight down, and will not show anything in its image (except for the skybox). This effect, along with the distortion in the water that occurs near the edge of the camera, is due to the fact that the Web Driver's reflection mapping is optimized for spherical (or nearly spherical) objects, but the effect is still useful on other sorts of geometry.

Note that the water surface in this example uses a generic mesh object, rather than a patch- this makes the class a little more versatile, so that it can be used for non-rectangular water surfaces if need be.

Cloth and Wizard Eye: Image-Based Lighting

The texture effects on the cloth drape and the Wizard Eye both use texture cameras placed in a mock-up of the lighting in the scene (shown above), located 10,000 units below the main scene. The mock-up is made of duplicates of the torch lights, whose images are doubled in size and blurred, to create a more diffuse highlight, as would be approriate for a highlight on silk or whatever it is that Wizard Eyes are made of. If the surfaces involved were more glossy (such as tinted glass or gold), then it would be appropriate to use exact replicas of the light sources in the mock-up. The texture animation on the torches uses the technique described in the Texture Animation how-to, but be sure to check out Web Driver 3.0's new AVI Texture capabilities as well.

Note that the image based lighting only replaces the specular highlights on the object; other lights are still necessary for more traditional shading.

Class Overview

An overview of the classes relevant to bitmap camera techniques can be found here.

©2002 WildTangent Inc. All Rights Reserved. Website Terms & Privacy Statement