Anton's Research Ramblings

28 May 2012

Shader Programme Object in Javascript

I have a better grasp of encapsulation of objects with Javascript now so I banged my ShaderProgramme object together in one go. The two caveats are; (1) remembering to explicitly use the this. keyword to refer to member attributes and variables, (2) defining whole member functions inside the constructor, not outside like you would in C++. This seemed to be a much cleaner way to go. The third trap is when creating an object from a JSON source; default constructors are not called, and any original object is completely wiped and rebuilt, so you have to remember to add in any member-creation code again after loading from JSON.

Handy Documents

I found a nice "cheat sheet" for WebGL that is a little bit more accessible than the Khronos Quick Reference because it retains the comments (says what each function does!). Sometimes it's hard to know which order you should use the functions. Mozilla has a nice introductory tutorial series. It doesn't go beyond the absolute basics, but that's all we need to get started anyway. They've made some common mistakes with regards to what goes inside the rendering loop, and not making it clear how to scale the code up, but I was used to this from OpenGL so dodged a few early trip-ups.

Implementation and Console Debugging

Loading a pair of OpenGL ES 2.0 shaders from separate URLs. I have the Chrome development tool open, where the debug context is dumping a log of function calls and parameters. Click image to run.

In the last few demos I went over every single OpenGL call with a fine-toothed comb, so it was no problem putting it all together now. Interestingly, all of the standard "glFunctionName" calls are done as methods of the context object in WebGL, rather than being functions from the GL.h file, as they are in C. I used the webgl-utils.js and webgl-debug.js wrappers suggested by Khronos.

Going to GLES 2.0 from GLSL 4.2.0

WebGL 1.0 use OpenGL ES 2.0 shaders. These are a little different to GLSL 4.2.0, which I have been using lately.

  1. per-vertex attribute variables have to be preceeded with the attribute keyword.
  2. there doesn't seem to be a layout keyword for manually specifying the location of each attribute.
  3. there is a precision mediump float; line that can go into the fragment shader to explicitly limit the precision of floats. Apparently this is because most mobile devices can't handle high precision yet (my PC+web browser was fine without it).
  4. There is no support for geometry shaders in ES 2.0.
  5. There is no support for tessellation shaders in ES 2.0.

vertex shader:
1: attribute vec3 lc_vp;
3: void main (void) {
4: gl_Position = vec4 (lc_vp, 1);
5: }
fragment shader:
1: precision mediump float;
3: void main (void) {
4: gl_FragColor = vec4 (0, 0, 1, 1);
5: }


There's a website that benchmarks the most popular Javascript matrix mathematics libraries. I had a look at the Google option, "Closure", but it looks a bit over-kill in terms of the bits and pieces involved. glMatrix looks rather nice. Will try.


There's a lot of mis-information floating around on the Intertubes. This, however, looks okay timer.js.

Next Steps

Matrix transformation, some sort of time step, and more use of uniform variables. Then later, a renderable object, similar to the shader object. This should contain the Vertex Buffer and Vertex Attribute handles, have a draw() operation, know which shader programme that it's supposed to use, and (hopefully) load a mesh from a file.