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. See more WebGL lighting examples.

Learn 3D Programming with Screen Shots Learn 3D Programming with Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.