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

WebGL Scenes: Responsive Web Design

Directional Light on a Ball

Lighted Texture Looks Like Colored Rubber or Plastic

Swipe to Move the Ball.

This example applies a directional light to a colored ball. The ball looks like it's made of dull plastic. Lighting helps define the texture of the surface covering the ball. Light location, light color, and ambient color are declared with constants in the vertex shader.

As the ball spins and moves, both a model matrix and a normal matrix upload to the GPU. The model matrix represents rotation and translation data for the ball. The normal matrix equals the model matrix inverted and transposed. The vertex shader uses normal attributes and the normal matrix to compute lighting per frame.

Seven Thunder Software exported a sphere from 3ds Max as a Collada DAE file with normals. The DAE file was then processed with the free 3D DAE Translator Windows app. The translator converts DAE data into arrays for use with JavaScript and WebGL. The JavaScript for this example uploads an attribute with normal coordinates per vertex.

See other WebGL lighting examples for the e-book WebGL Lighting. See free WebGL light techniques.

WebGL Lighting E-Book Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.