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 Online

If a picture's worth a thousand words, then a 3D model's worth ten thousand words! Consider 3D interactive content for education, 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.

If you'd like help with leading edge 3D Web development, modeling or rendering, contact Seven Thunder Software.

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