Retrospective changes to the lessons

I realised today that the code for lesson 2 could be seriously improved. Instead of using a loop to create an array of colours for the square, one for each vertex, we could just set one single attribute using code like this:

    gl.vertexAttrib4f(vertexColorAttribute, 0.5, 0.5, 1.0, 1.0);

This is something I’d not really understood until now; for each of the attributes we’ve been getting using code like this:

    vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");

…and then putting arrays into, we’ve been calling code to “enable” it as an attribute array:


If instead we disable that feature, we can just pass in one single value and have it take effect for every vertex drawn in a call to, for example, drawArrays. So the square’s colour only needs to be specified once.

This made such a big improvement to lesson 2 that I’ve gone back and retro-fitted it into the lesson; this blog post is by way of explaining things to everyone who’s already read lesson 2, so that you don’t get totally confused when I refer to it in the future :-)

[UPDATE] Hmm. It looks like single-value attributes like this don’t work on Firefox my desktop PC unless I use MESA software rendering. With normal rendering, the square doesn’t show up at all. So now have to work out whether (a) doing things this way is a good idea but for some reason my desktop PC isn’t supporting it, or (b) doing things this way is a bad idea that MESA lets me get away with… time for some investigation.

If anyone reading this is using WebKit, I’d be really grateful if you could run up the current version of lesson 2 and let me know if you see both the triangle and the square.

[FURTHER UPDATE] OK, it looks like this change causes problems on certain ATI cards. Sounds like a bug in their driver, but it’s likely to cause confusion. I’ve backed out the change, so lesson 2 is back to where it was, and lessons 3 and 4 have been modified appropriately.

You can leave a response, or trackback from your own site.

3 Responses to “Retrospective changes to the lessons”

  1. subblue says:

    In the latest webkit I can see both the triangle and square.

  2. giles says:

    @subblue Thanks! That’s good to know.

  3. giles says:

    @subblue BTW awesome site! I look forward to seeing some of those animations in live WebGL ;-)

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter