WebGL Demo 01: 3D transformation and Lambert lighting
This demo would talk about some 3D computer graphics background knowledge, and to show how to use WebGL to do 3D transformation and Lambert lighting. Using maximus.js, author by Ellis Mu In this demo, I develop a WebGL framework named maximus.js to proof the functions which been implemented by three.js. I choose the same 3d coordinate system as three.js, which is Y-up and right-hand system. 1. Vertex buffer In the 3d graphics pipeline, the data format of primitive which GPU can accept, They are vertex buffer and index buffer. What is vertex buffer? Each primitive must be constructed by vertices. In the case of cube, we create a mesh which has 24 vertices, because it has six faces and per face has four vertices. _cubeVertexBuffer = gl.createBuffer(); // create a buffer gl.bindBuffer( gl.ARRAY_BUFFER, _cubeVertexBuffer ); // bind this buffer as vertex buffer var vertices = [ // Create these vertices // Front face -1.0, -1.