Shader Sandboxes Compared
This is an overview of the features provided by various GLSL shader sandboxes running inside the browser. Note that this list only considers fragment shader sandboxes that run inside the browser and use the WebGL flavour of GLSL.
I’ll be comparing the four most popular shader sandboxes plus our own. If there is anything missing from the list please let me know!
The best choices in each category have been hightlighted, so you can immediately see which sandbox is best for your specific task.
Overview
I’ll compare the sandboxes according to four main categories:
- Interaction
- Computation
- Media Input
- Community Features
In the end I’ll provide a huge mega-matrix that puts it all together.
Interaction Compared
Let’s see how the sandboxes make use of the User interface to control shader parameters:
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Mouse input | 6D | DIY | – | 4D | 2D |
| Keyboard | – | DIY | – | – | x |
| GUI input | – | DIY | – | – | YES |
| 6DOF input | – | – | – | – | YES |
Mouse Input
There are various ways to represent mouse interaction. In the most simple case (2D) only the mouse coordinates are passed as a 2D vector.
In Shadertoy 0.4 mouse coordinates are passed as a 4D vector. The first pair of components represent the mouse position, and changes continuously when the mouse is moved.
The second pair is used to code for “mouse orientation” a value that is only changed when the mouse is dragged.
The GLSL Sandbox extends this approach to 6 degrees of freedom by allowing both left- and right-drag actions. The corresponding vectors are called mouse, surfaceSize and surfacePosition.
This mapping suggests that the mouse buttons should be used to represent drag and zoom actions.
Check out this example to see it in action.
In the WebGL Playground the Programmer must provide her own code to map mouse and keyboard events to shader uniforms.
GUI Input
If there are several shader parameters it is quite convenient to control them via sliders. Neurovision is the only of the Sandboxes under comparison that allows for sliders, which can be generated from the code.
Keyboard Input
Currently none of the Sandboxes provides support for keyboard input, however its simple to implement this on the WebGL Playground.
6-Degress of Freedom Input
The Neurovision Sandbox has support for 3D Motion controllers with 6 Degrees of Freedom 6DOF.
We are currently using the Cognitive Suite of the Epoc Emotiv Brain device to control those parameters. Support for other devices such as the 3Dconnexion will be available upon request.
The Neurovision Sandbox also supports a 7th degrees of freedom corresponding to the disslove action of the Emotiv, that does not have a correspondence in the physical world.
Computation Compared
In the most simple case a shader takes some input and transforms it to a visual representation on the canvas. If the sandbox provides a memory layer or back buffer, we can access the output or the previous state of a shader. NeuroVision allows several shader layers, to be stacked, always passing the input to the next layer.
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Shader Layers | 1 | DIY | 1 | 1 | unlimited |
| Memory Layers | 1 | DIY | – | – | unlimited |
Media Input Compared
Lets have a look at how the sandboxes handle images, video and sound:
Image Input
If you want to experiment with different textures and images,
WebGL Playground and ShaderToy are your best options.
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Image Channels | – | DIY | – | 4 | – |
| Image Choices | – | 10 | – | 15 + 6 Cubemaps | – |
| Image Meshup | – | YES | – | – | – |
- Image Channels
- How many images can be accessed at the same time?
- Image Choices
- How many images are available as input?
- Image Meshup
- Can you use images from the web?
Video Input
NeuroVision is the only tool that allows for video-meshups,
when running in a hacked Browser.
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Video Channels | – | – | – | 4 | 1 |
| Video Choices | – | – | – | 2 | 1 |
| Video Meshup | – | – | – | – | YES |
- Video Channels
- How many vidoes can be accessed at the same time?
- Video Choices
- How many videos are available as input?
- Video Meshup
- Can you use videos from the web?
Audio Input
If you want to experiment with different sound reactive shaders,
ShaderToy is currently your tool of choice.
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Audio Channels | – | – | – | 4 | – |
| Audio Choices | – | – | – | 5 | – |
| Audio Meshup | – | – | – | – | – |
- Audio Channels
- How many audio tracks can be accessed at the same time?
- Audio Choices
- How many audio tracks are available as input?
- Audio Meshup
- Can you use audio from the web?
Camera Input
Camera Input is only available in PixelShaders and NeuroVision
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Camera Input | – | DIY | YES | – | YES |
Coding Features Compared
In terms of coding and community features the GLSL sandbox is most advanced.
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Host | YES | YES | – | YES | – |
| Share | YES | YES | YES | YES | YES |
| Fork | YES | YES | – | – | – |
| Diff | YES | – | – | – | – |
- Host
- Source Code is hosted on the server vs. encoded as Link
- Share
- Link to the Sketch can be easily shared
- Fork
- Sketches can be forked, and traced back to their origin
- Diff
- Changes between Versions can be visualized
More Info
I hope the comparison helped you get a little overview, of what you can and cannot do with the various shader sandboxes. In general it is a good idea to pick a sandbox that is as simple as possible, but not too simple, to achive what you want to do.
Below you’ll find the links to the sandboxes, their source code, and the twitter accounts of their authors.
| Sandbox Page | GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision |
|---|---|---|---|---|---|
| Open Source | YES | – | YES | – | Coming soon! |
| Author | Mr.Doob1 | Krystian Samp 2 | T. Schachmann 3 | Iñigo Quilez 4 | Martin Schneider 5 |
The Mega-Matrix
And finally the ultimate Mega-Matrix – Enjoy!
| GLSL Sandbox | WebGL Playground | PixelShaders | ShaderToy | NeuroVision | |
|---|---|---|---|---|---|
| Mouse input | 6D | DIY | – | 4D | 2D |
| Keyboard | – | DIY | – | – | x |
| GUI input | – | DIY | – | – | YES |
| 6DOF input | – | – | – | – | YES |
| Shader Layers | 1 | DIY | 1 | 1 | unlimited |
| Memory Layers | 1 | DIY | – | – | unlimited |
| Image Channels | – | DIY | – | 4 | – |
| Image Choices | – | 10 | – | 15 + 6 Cubemaps | – |
| Image Meshup | – | YES | – | – | – |
| Video Channels | – | – | – | 4 | 1 |
| Video Choices | – | – | – | 2 | 1 |
| Video Meshup | – | – | – | – | YES |
| Audio Channels | – | – | – | 4 | – |
| Audio Choices | – | – | – | 5 | – |
| Audio Meshup | – | – | – | – | – |
| Camera Input | – | DIY | YES | – | YES |
| Host | YES | YES | – | YES | – |
| Share | YES | YES | YES | YES | YES |
| Fork | YES | YES | – | – | – |
| Diff | YES | – | – | – | – |
| Open Source | YES | – | YES | – | Coming soon! |
| Author | Mr. Doob | Krystian Samp | Toby Schachmann | Iñigo Quilez | Martin Schneider |
-
Mr.Doob – twitter: @mrdoob
↩ -
Krystian Samp – twitter: @krystiansamp
↩ -
Toby Schachmann – twitter: @mandy3284
↩ -
Iñigo Quilez – twitter: @iquilezles
↩ -
Martin Schneider – twitter: @bitcraftlab
↩