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

WebGL Scenes: Responsive Web Design

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.

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.

More WebGL Lighting Examples!

3D Graphics Display Here with WebGL

Read WebGL E-Books

Copyright © 2015 Seven Thunder Software. All Rights Reserved.