Fast Image Filters with WebGL
But to quote myself from twitter:
That awkward moment when you realize the lib you've been polishing for the past 6 hours already exists. With more features and a better API.
So, yes, there's already a library called glfx.js which basically does the same thing. And I'm almost saddened to say that it's excellent.
I also learned some things about WebGL and Shaders with all this. One interesting aspect is that you can't draw a framebuffer texture onto itself. So in order to apply more than one effect for the same image, you need to juggle around 2 textures - use one as the source, the other one as the target and then switch. And if you don't want to waste any draw calls, you need to know which draw call will be the last, so that you can draw directly onto the target Canvas instead of on a framebuffer texture.
WebGL's coordinate system also complicates things a bit. It has the origin in the bottom left corner, instead of in the top left like most 2D APIs, essentially flipping everything on the Y axis. This has caused me a lot of pain with Ejecta already. The solution sounds trivial: just scale your drawing coordinates by -1, but this only gets you so far. If you need to get the pixel data of your image or draw one canvas into another, you suddenly have to invert everything again.
Lesson learned: Always google before you start working.
Download: WebGLImageFilter on github.