3D Compass with Directional Light

Render to Texture with Directional Light

Swipe to Rotate the Compass

This example applies directional light to a 3D model of a compass. The compass looks like it's made of metal or anodized aluminum. Lighting helps define the shape of the compass. The vertex shader declares light location, light color, and ambient color. The vertex shader computes directional light. The compass is also mapped with a baked texture which adds to the light effect.

As the compass spins JavaScript uploads both a model matrix and a normal matrix. The model matrix represents compass rotations. The normal matrix represents rotation for normals. The vertex shader uses normal attributes and a normal matrix to compute lighting per frame.

Seven Thunder Software modified a prepared model with 3ds Max, then exported as a Collada DAE file with normals. You may download Seven Thunder Software's free 3D DAE Translator Windows app to convert DAE data for use with JavaScript and WebGL.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.