3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

Fragment Shader Point Light

Face Mapped Cube

Swipe Up, Down, Left, and Right, to Move the Cube

Your browser doesn't support WebGL.

View this example of a point light on a texture mapped cube. Lighting helps define the shape of the cube. Each face of the cube is mapped edge to edge with a photograph of the desert. The fragment shader declares constants with light location, light color, and ambient color.

The JavaScript for this example uploads an attribute with normal coordinates per vertex. Each animation frame uploads a normal matrix. The normal matrix is a 3 x 3 matrix derived from the inverted and transposed model matrix. The vertex shader applies normal attributes with the normal matrix to compute lighting per frame. Read the point light tutorial for details.

More WebGL Lighting Examples!

3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.