HTML5 Canvas Cookbook

Adding textures and lighting

Now that we know how to create a simple 3D model using position buffers and index buffers, let's make a wooden crate by wrapping our model with a crate texture and then adding some ambient and directional lighting to create shaded surfaces. This recipe introduces texture buffers to create textures and normal buffers which are required to handle lighting effects.

How to do it...

Follow these steps to create a rotating crate with lihting in WebGL:

1. Link to the glMatrix library and the WebGL wrapper:

   <script type="text/javascript" src="glMatrix-1.0.1.min.js"> </script> <script type="text/javascript" src="WebGL.js"> </script> ...