Experimental on-line GLSL ES shader editing

About

I've been wanting to do some OpenGL stuff for a long time, and shaders are my easy way in. I've written ray-tracers in C/C++ for the last 15 years, so the potential to do proper per-pixel lighting and experiment with different shaders appeals. With these ray-tracers, the images were always static, so I'm starting from a place where being able to play with light and texture is more important than dynamic animation. Being on a Mac, I don't have access to RenderMonkey, and with WebGL it seems reasonable that something like that could be implemented as a web-app, with all the general cross-platform yumminess that brings.

So this is my initial proof of concept. I'm thinking of aiming towards a similar feature set to the Mac's own OpenGL Shader Builder, but not sure how much effort I will put into developing this yet.

Let me know any thoughts! @codedstructure

Plans

(these are vaguely in the order I'm planning to implement them, strikethrough when done!)

• checkbox to allow continual update of shaders - e.g. if the shader is valid and hasn't been changed for 1 second (or so), update the shader program
• checkbox to turn off geometry/vertex editing (and perspective etc transforms) and just have a single rectangle to allow frament shaders (using gl_FragCoord) to be developed for fractals, plasmas, and other 2D renderings (sort of done with default 2D)
• allow user to add arbitrary uniforms, e.g with sliders for float, X/Y grid controls for vec2, colour selection dialogs, etc
• arbitrary attributes (treat colour as one of an arbitrary number of vertex attributes). This would be essential for texture mapping
• mouse-controlled rotation (probably limited to looking at the origin from the surface of a sphere centered there)
• ability to upload textures
• possibly allow user to set font in text boxes, but see what happens with last point
• pop-out window for the WebGL canvas
• saving shaders (locally only for now, e.g. using web sql - though annoyed FF doesn't support that). Note the current settings are stored if your browser supports sessionStorage (and if it supports WebGL, it almost certainly does), but aim to store multiple sets of info
• Some examples!
• FPS display
• codemirror or similar GLSL highlighting. May need to write a plugin for it...
• update the interface, generally make it more of an 'application'. (possibly just the option of several predefined layouts)
• some online documentation / links to useful material

Credits

The basics of this were derived from the Getting Started with WebGL documentation from Mozilla - in fact the underlying javascript for setting things up (including the perspective transforms and the frame ticking) are in the webgl-demo.js file. To begin with this was is hardly touched from the live demo referenced from that page, but it's starting to diverge to the point where I should redo it from scratch - lots of the comments are no longer relevant, for example.

Also see the Learning WebGL resource, which pointed me in this general direction in the first place. Thanks Giles!