Live Code your Shaders with GLSL Sandbox (WebGL)

If you already like Shader Toy, you will love GLSL Sandbox. GLSL Sandbox is a WebGL application for live-coding GLSL shaders. What is live coding (or live programming)? Simply the ability to edit a GLSL shader in real time and instantly get the feedback. No need to press a load or compile shader button to see the change.

Here is a nice video that shows the principle of live coding in case you still wonder what it is:

Like Shader Toy (which is not a pure live coding tool because one must click on a button to compile the shader), GLSL Sandbox is a tool dedicated to pixel shaders. If you need to live code other kind of shaders vertex, geometry, tessellation), GeeXLab 0.3.0+ is the solution 😉

Here are some examples of shaders available in GLSL Sandbox gallery that worked fine in the latest Chrome + Radeon HD 6870 (Cat 11.11 WHQL):

One very minor problem I noticed with Shader Toy (and perhaps in GLSL Sandbox too –the FPS is missing in GLSL Sandbox, would be cool to have this info) is the frame rate limitation certainly due to the WebGL layer. For an identical shader, the framerate is roughly much faster in GeeXLab than in GLSL Sandbox / Shader Toy. And the framerate also depends on the browser: firefox seems faster than Chrome. Some numbers with the Deform demo of Shader Toy: 90FPS in Chrome, 170FPS in Firefox and 1800FPS in GeeXLab (OpenGL renderer: Radeon HD 6870).

Pay attention if you live code in Firefox: in case of a problematic shader, all your firefox windows will be closed / killed (I lost my ton of firefox windows while I tried to test the android robot demo in GLSL Sandbox). I also noticed that some shaders work fine in Chrome and do not work in Firefox (even in case of a successful compilation) and vice-versa. Once you are aware of these little problems, both GLSL Sandbox and Shader Toy are great tools to play with pixels.