OpenGL shader programming in your browser. One of the most talented guys from the demo scene, Inigo Quilez, decided that making awesome 4k demos wasnt challenging enough so he set out to make a shader programming environment for WebGL enabled browsers (Web-kit browsers, Firefox 3.7 and Chrome).
To enable WebGL in chrome nightly builds use this guide: http://www.m0interactive.com/archives/2009/10/26/how_to_enable_webgl_on_google_chrome.html
Here is what Inigo have to say about his tool:
It’s using the pretty new WebGL specification to allow you to edit GLSL shaders. Because the tool is online you don’t need to install anything (this will be true the day all browsers have support for WebGL – for the time being read the not in the end of the post). In the other hand, it comes with lots of interesting shaders. Raymarching, procedural distance fields, metaballs, tunnels, deformations, postprocessing effects, …. Just load them and have a look to learn how these techniques work, or start modifying them to make your own shader.
I think this tool is ideal when you have an idea and want to sketch it, or want to play a bit with shaders, but you don’t have your OpenGL framework handy, nor you have textures or even a compiler at all. Instead, wherever you are, in your vacations trip, at your mum’s, you just need a browser. Connect to the Shader Toy page, load one of the presets shaders, and start playing around. As simple as that! You can use any online image to feed the 4 texture units in the shader by providing Shader Toy with the url of the image. I even created some usefull “noise” textures for you, and there are quite a few “famous” demos in the presets, donated by several demoseners. Check them out.
Features:
– four texture input from online images
– mouse input to feed your shader parameters with some life data
– quick compile with ALT TAB shortcut
– framerate monitor
– viewport resolution selector
– glsl-es help
– time control
– lots of cool presets, for free!Coming soon:
– syntax highlight
– video input (feed a texture unit with online video!)
– flexible parameter input with custom user js functions
– advanced timeline control
– multithreaded render
– cubemaps
– submit/save your own shaders and presetsLINK: http://www.iquilezles.org/apps/shadertoy
** Note: most browsers don’t implement the WebGL specification yet. You need the nightly build of Firefox (3.7), Chrome or Safari to use Shader Toy. So far I have successfully tested it Firefox 3.7 and Chrome 4.0 under Windows, Firefox 3.7 under Linux. I have been reported that it works in Safari under Mac too. Please follow the instructions in http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation for installation.
** Note: ShaderToy was made for helping making “flat shaders” only, it was never intended to be a RenderMonkey-clone where you can load 3d meshes. ShaderToy is about filling pixels only. Of course, that doesn’t mean you can only do 2d, nothing prevents you from writing raytracers right? – check the presets.
See more: http://khronos.org/webgl/wiki/