I’ve updated my tutorials to reflect the WebGL spec changes; they should now run just fine on the most recent versions of WebKit, Chromium, and Minefield, with shader validation switched on. I’ll be updating the lesson text later on this evening.[UPDATE the lessons are all now updated.]
If you’ve still to update your own WebGL pages to match the spec, here are the precise changes I made — they might make things easier for you.
At the start of every fragment shader, I put this:
#ifdef GL_ES
precision highp float;
#endif
This is because all fragment shaders now need a qualifier to say what kind of floating-point precision they use; precision highp float gives you (as you’d expect) the highest precision. The #ifdef around it is a bit of guard code to stop this bit of code being executed in older browsers that don’t support this bit of the spec yet.
The other change I had to make was to update the way I called texImage2D. I used to do this:
gl.texImage2D(gl.TEXTURE_2D, 0, texture.image, true);
This created a texture using the HTML image element bound to texture.image, with a mip level of 0. It also flipped the image around the X axis, which I find useful because it allows me to have texture coordinates that have Y axes that increase as you go up the screen, but to use texture images in formats like GIF, whose Y coordinates increase as you go down the image. This now requires two steps: firstly, I call gl.pixelStorei with appropriate parameters to say that all textures I use should be flipped around the X axis:
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
Then, when I want to create a texture, I call this:
gl.texImage2D(
gl.TEXTURE_2D, 0,
gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE,
texture.image
);
The first two parameters are the same as before, and the last parameter is the same image as before. In the middle, we have a constant to tell WebGL that the image that we’re loading has red, green, blue and alpha components, another to say that we want to store it in the same way [UPDATE: in the comments, Benoit Jacob from the Mozilla team explains that these two must be the same value, and actually specify how the image is stored on the graphics card; so long as you're loading the image from an HTML element, WebGL knows already what format it's on], and a final one to say that each component is stored as an unsigned byte.
Those changes were all that were necessary to get everything working for me; let me know if you have any problems!
