Cool! I've been building something similar: <a href="https://github.com/cscheid/facet" rel="nofollow">https://github.com/cscheid/facet</a> (demos: <a href="http://cscheid.github.com/facet/demos/index.html" rel="nofollow">http://cscheid.github.com/facet/demos/index.html</a>)<p>It also has a "javascript fragment shader layer", so that you can evaluate GLSL code in CPU-land. This is pretty nice to prevent repeating things like coordinate transformation code, which turns out to happen all the time when doing mouse-picking in 3D, etc.<p>Another big win comes from writing your shader abstractions in Javascript itself. When you need to reuse bits of glsl here and there, you want 1) to pass around objects that are smarter than strings and 2) to configure the shader to behave differently when you have uniforms, attributes, textures, etc. Doing the heavy lifting in javascript and compiling down to GLSL really pays off here.
You shouldn't be using innerHTML to get your shader text, it'll break as soon as you put a comparison operator into the shader. Use textContent.<p>You should support using typed arrays instead of raw JS objects ({ x: , y: }) for setting vectors, since that will give people the option of using something like glMatrix.
I really like that this is DRY.<p>In programming for OpenGL I don't mind the dancing with the state machine, but I hate the repetition and desynchronisation. The cognitive / ergonomic inefficiency wears me out pretty quick.<p>This is very very nice. Hats off.
I know that Adobe's handling of the Flash Platform gets a lot of hate in these circles, but one thing I really enjoyed during my time there was writing shaders in PixelBender. Basically, it allowed you to write GPU-accelerated image filters in a GLSL-based language.<p>Most of the WebGL tutorials I've seen either require you to grok the entire OpenGL architecture or rely on something like THREE.js or ProcessingJS. It's really nice to see something in the middle (like PixelBender was).<p>Thanks!<p>(I've been keeping this in my to-read list. Seems to be similar, but in bare WebGL:<p><a href="http://dev.opera.com/articles/view/webgl-post-processing/" rel="nofollow">http://dev.opera.com/articles/view/webgl-post-processing/</a><p>)
If you just want to draw images into a canvas I don't see any benefits to using WebGL. You just lose cross browser compatibility. Most browsers have hardware accelerated rendering of 2d canvases. If you want to create unique shader effects, like blurs or masks or whatever, then there is definitely an argument to be made about the use of webgl.
Cool. But when will browser games be taken seriously? I'd like to see it happen, but web-based games are still mostly considered something to do when you've got five minutes to spare.