O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Adding textures and lighting

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required