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.
Follow these steps to create a rotating crate with lihting in WebGL:
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>
Define the
initBuffers()
function which initializes the position buffer, normal buffer, texture buffer, and the index buffer for our cube:function initBuffers(gl){ var cubeBuffers = {}; cubeBuffers.positionBuffer = gl.createArrayBuffer([ // Front face -1, -1, 1, 1...