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

Lion Light Map

Texture Map

Scroll 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

learn to code, Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, create 3D website, 3D Media, JavaScript, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.