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.

The utils wrapper does exactly what I was doing before when creating the GL context, but with more graceful validation and better cross-browser support.
The debug wrapper prints out all of your gl... function calls to the scripts console (under Tools->Development in Chrome). This is really handy, because it also tells you the values that are sent to each function, so you finally get a sort-of debugger for Javascript (which otherwise silently dies). In Javascript, if you refer to a variable and make a typo in the name it's not an error - a new object is created with that name, and value null. This is sometimes a valid value - so you can get silent bugs. You can also use the debug wrapper to check for these typos in variable names. It's a bit CPU-hungry, especially when running a rendering loop, so I added a few flags to enable/disable parts of it.

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.

per-vertex attribute variables have to be preceeded with the attribute keyword.
there doesn't seem to be a layout keyword for manually specifying the location of each attribute.
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).
There is no support for geometry shaders in ES 2.0.
There is no support for tessellation shaders in ES 2.0.

vertex shader:

1: attribute vec3 lc_vp; 2: 3: void main (void) { 4: gl_Position = vec4 (lc_vp, 1); 5: }

fragment shader:

1: precision mediump float; 2: 3: void main (void) { 4: gl_FragColor = vec4 (0, 0, 1, 1); 5: }

Matrices

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.

Timers

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.