3D Compass with Directional Light

Render to Texture with Directional Light

Swipe to Rotate the Compass

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

3D Models

If a picture's worth a thousand words, then a 3D model's worth ten thousand words! Consider 3D interactive content for learning, media, and marketing. Seven Thunder Software develops 3D models for Web design, with optimized (fast loading) 3D rendering software, from photographs, blue prints, ideas, and real objects.


Interactive media, 3D shapes, 3D models, 3D, online 3D modeling,3D viewer, Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, GLSL, 3D Web Design, 3D Web Development, Web development, WebGL, WebGL example, WebGL online, WebGL example online, create 3D website, 3D Media, 3D animation, graphic design, Website design,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.