Canvas 3d JS Library

While working in the OpenGLES 2.0 context, I came across some concerns. These originate from the limited functionality of canvas3d using this context. There are some functions which are available in 1.1 which are not included in 2.0, notably functions involving the matrix stack and lighting.

Using 1.1, users of canvas3d have access to the matrix stack commands, so they can write:

canvas3D.pushMatrix(); canvas3D.multMatrix(modelMatrix); canvas3D.drawArrays(canvas3D.TRIANGLES, 0, (vertices.length/3)); canvas3D.popMatrix();

Here, a copy of the top matrix (essentially a 4×4 array) is pushed onto a stack. Then a matrix called the modelMatrix which contains a specific model’s transformation is multiplied with the copied matrix. Therefore when drawArrays() is called, the vertices of the model are drawn using the top matrix transformation. This allows objects to be draw with their own positions, rotations and scaling.

Our library is currently not using the stack extensively; the code above is similar to the code found in the Model.js file. So emulating the 1.1 code in 2.0 is not an issue, it simply involves a line which multiplies matrices and vertices together.

// some code removed for this example. TransformedVertex = modelMatrix * currentVertex ; // The incoming vertex of a model is multiplied with the model’s transformation.

However if we ever decide to use the stack for a hierarchical structure, such as scenegraph, emulating the stack in 2.0 would likely be too slow in JavaScript and too awkward in shaders.  However, I suspect there would be preference over awkwardness if it can be done as speed is always a concern.

The next issue which is more pertinent is that of lighting. I had the task of making the 2.0 context behave identically to that of 1.1. This included getting textures working, the camera, ambient lighting, etc. The task which poses the greatest challenge is creating a way for users to create point, direction and spotlights in 2.0. In a shader, it is possible to query the OpenGLES light states using the gl_LightSource[] array, but actually setting the states using the 2.0 context isn’t provided, so this built-in variable isn’t much use. This means a structure which contains light information must be created and maintained in JavaScript, which users will be able to set.  When the scene is rendered, the light structures in the shader will be set to the values from the JavaScript code.  Then when drawing vertices, iterate over the lights and compute the final colour of the vertices.