Point Light on a Cube Example

Fragment Shader Processes Lighting

Swipe to Spin the Cube

The fragment shader calculates lighting. The cube is mapped with a solid color green. Lighting helps define the shape of the cube. Light location, light color, and ambient color are all declared with constants in the vertex shader, to keep this example simple.

Compare to point lighting within the vertex shader, tap the link below. Read the point light tutorial for details. See more WebGL lighting examples.

As the cube spins and moves, both a model matrix and a normal matrix are uploaded. The vertex shader uses the normal attributes and normal matrix to compute lighting per frame. See the per vertex shader Point Light Tutorial with source code. The per vertex point light shader uses similar functionality, however the vertex shader accomplishes most of the light calculations.

Seven Thunder Software created a cube in 3DS Max then exported as a DAE file with normals. The JavaScript DAE Translator converted DAE data for use with WebGL.

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