This is how I UNroll

Having the penchant I have with 2D photo filters, but not having an idea of how to do that with shaders, I tried to port a couple of Bayer ordered dithering GLSL shaders to this Javascript setup. In the process I learnt a few things:

  1. Most of the times I don't quite know what I'm doing, but it's fun anyway!

  2. GLSL is VERY PICKY with data types. You forget a .0 and it's instantly complaining about not being able to mix integers with floats.

  3. WebGL shader support is not GLSL shader support. Not every sample code can be copied and pasted "and it just works". There are some limitations in place-- probably an understandable consequence of WebGL coming from OpenGL ES and not from the fully featured OpenGL "big brother".

An important derivation from the latter is that one can't use variable expressions in loops. That is discussed in this mailing list post, but to cut things short, that means that you can't access vector indices with a for loop (!!!). This caused one of the shaders I was trying to port to fail when compiling.

Thankfully it was just four components in each loop so I made an inelegant manual unrolling of the expression and it worked:

Now, I'm not sure this is the best way of doing things, but for now it works. Although I can't keep myself from thinking about the processor cost of each if branching and all those things we computer engineers worry about. So if you know of a better way of doing this, please let me know!

Meanwhile, and if you're running the latest Chrome/ium, you can have a look at one of the ported shaders here. Enjoy!

Apparently Firefox 17 (will have|has) access to userMedia, which means it'll be able to access the Webcam, but I haven't tested it myself.

Also, be sure to check out the blog of Martins Upitis, the author of the original shaders, who also has a lot more of posts with impressively amazing shaders, and generally nice CG imagery!