Projector Light Maps & Information

Example: Eye over Earth Introduction Eye Light Map Earth Texture Map Summary


This tutorial briefly explains how to apply WebGL light maps. Two texture maps, applied to the eye over Earth example, are included.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in the WebGL e-book series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or three.js, as well.

Light maps provide a quick and uncomplicated method to render lighting. Load two maps to render one sprite. The first map textures the sprite. The second map provides stationary lighting. When the sprite transforms, light continues to shine from the same location. In other words, move the sprite, the light doesn't move. Rotate the sprite, the light doesn't rotate, just as lights in a room won't move, if you rotate a book.

The image for the eye light map was generated with a Photoshop wing ding, some gradients and filters. The light map resembles an eye. The light map also includes some light and shadow to give form to the shape of Earth. Consider creating light maps for light alone or light and texture. The eye over Earth example, applies the eye as a projector map, as if the eye were projected on the earth.

The image for the earth texture map was applied to a sphere. NASA generated the original earth map. Seven Thunder Software modified the texture map with Photoshop.

Eye Light Map

Lighting for the sphere of the earth plus an eye projected onto the earth.

Eye Light Map

Earth Texture Map

The globe, originally created by NASA, was modified with Photoshop, then mapped to a sphere.

Earth Texture Map


This tutorial briefly explained how to apply WebGL light maps. Two texture maps, applied to the eye over Earth example, were included.


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.