A quick retrospective change to the lessons: image flipping

In the comments to lesson 5, where we introduce textures, rotoglup pointed out that adding an operation per-fragment to flip the texture vertically (which is required because its coordinates increase as you move down the GIF image, while we want maths-like coordinates that increase as you go upwards) is a bit of an overhead for something that should be done as a one-off. Rob just commented on the same post, saying how it would be done in OpenGL, and that reminded me that I’d been intending to search the spec to see if there was a better way of flipping textures. Lo and behold, I discovered that I’d missed out on a rather useful parameter for texImage2D:

texImage2D(target, level, image, flipY, asPremultipliedAlpha)

To be fair, there was no spec when I wrote the lesson :-)

Anyway, I’ve been through all of the lessons, replaced 1.0 - vTextureCoord.t with vTextureCoord.t in the fragment shaders, and added true to the end of all of the calls to texImage2D.

It’s fun to remove bad code :-)

[UPDATE] Argh, it looks like flipY isn’t implemented in WebKit yet. I’ll back these changes out tomorrow :-(

[UPDATE] as of 13 March 2010, WebKit’s problem seems to be fixed, so we’re using flipY once more.

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

3 Responses to “A quick retrospective change to the lessons: image flipping”

  1. murphy says:

    Such an amazing speedup ;)

    Anyway, I find it amazing that you keep refining and polishing the lessons over and over again. Also, your great work of keeping track of the WebGL community and standardization progress makes this site the actual lighthouse of the WebGL blogosphere :) Way to go!

  2. Rohit Garg says:

    Great web site. You have done a lot of hard work to make this website my go-to page for all things webgl.

    BTW, why bother with the flipY bit in GLSL. It might be better to just do 1.0 – vTextureCoord.t. Sure it is in the spec and everything but…

  3. giles says:

    @murphy — right, it must save at least a millisecond on each repaint ;-) Re: the never-ending updates lessons — it looks like people are using them to learn WebGL themselves, so if something’s wrong then I’d feel bad about leading people into bad habits… Glad you like the roundups! They’re really fun to write, too.

    @Rohit — glad you like the site! The reason I switched to using the flipY was that it means that the flipping is done just once, when the image is loaded, rather than imposing a cost (small though it is) on every repaint. It also makes the fragment shader code marginally cleaner, and so easier to explain in the writeup of lesson 5 :-)

Leave a Reply

Subscribe to RSS Feed Follow Learning WebGL on Twitter