Projector Light Map Details

Lion Projected onto a Scroll

Earth With Light Map Scroll & Lion Light Map

Introduction

This very short tutorial discusses how to project lighting onto 3D models with WebGL. This page includes both texture maps applied to the Lion on Scroll: Projector Light example. Load both maps. One map textures the mesh model. The other map provides lighting. In the Lion on Scroll: Projector Light example, the light map serves as a projection map. The lion image displays on different areas of the scroll as the scroll moves. The scroll rotates and moves in response to swipe motion over the canvas.

Light maps provide a quick and easy method to display lighting. Simply load a different light map to change the visual effect.

Prepare Texture Maps

The image for the light map originated with a photograph. Seven Thunder modified and simplified the photograph for use as a light map, with Photoshop. Invert values for the effect of a lighted image. The light map is an 8 bit GIF image. Eight bit graphics, with solid colored areas, often have small file sizes which download more quickly than 24 bit or 32 bit graphics.

Seven Thunder Software created the scrolls with 3ds Max. The scrolls were modeled similar to ancient Jewish scrolls containing Scripture. With 3ds Max, or similar 3D rendering software, apply render to texture to generate one map for the scrolls, text, and wood. The scroll's texture map is also an 8 bit GIF image.

Light Map

Texture Map

Summary

This very short tutorial discussed how to project lighting onto 3D models with WebGL. This page includes both texture maps applied to the Lion on Scroll: Projector Light example. Load both maps. One map textures the mesh model. The other map provides lighting. In the Lion on Scroll: Projector Light example, the light map serves as a projection map. The lion image displays on different areas of the scroll as the scroll moves. The scroll rotates and moves in response to swipe motion over the canvas.

Light maps provide a quick and easy method to display lighting. Simply load a different light map to change the visual effect.

Tags