3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

Projector Light Map Details

Lion Projected onto a Scroll

Introduction Prepare Texture Maps Light Map Texture Map Summary

Introduction

This very short tutorial discusses how to project lighting onto 3D models with WebGL. Load two maps. One map textures the mesh model. The other map provides lighting. In the Lion Projected onto a Scroll 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 lighting.

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. 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

Lion Light Map

Texture Map

Texture Map

Summary

This very short tutorial discussed how to project lighting onto 3D models with WebGL. Load two maps. One map textures the mesh model. The other map provides lighting. In the Lion Projected onto a Scroll 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 lighting.

See other WebGL lighting examples for the e-book WebGL Lighting. See free WebGL light techniques.

WebGL Lighting E-Book Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.