Note: I've tried to make sure this website can be used with JS disabled, but some of the articles use MathJax to display math formulas. Those formulas will sadly be displayed as LaTeX code if your browser has JavaScript disabled.
Ever wondered what would happen if Shadertoy and Scratch had a baby?
...
No?
...
Am I the only one, then?
...
Oh well.
I've been wondering that for like a decade, and a few weeks ago I decided to give it a try, so I built a prototype to scratch that itch, and I uploaded it to:
It's a simple Shadertoy clone (no multiple buffers, no user accounts, no... well, let's just say it has more noes than yeses), which also has a "blocks" mode that shows the same GLSL source code as the text mode, but in a Scratch-like blocky representation.
Internally, it builds an AST out of the GLSL code and renders each node as a CSS block of a different type. And then each modification to the blocks gets converted to GLSL code, to keep a bidirectional source<->blocks map as the user edits the shader. You can edit either side, and the other one will be automatically updated.
As a bonus, all expressions can be previewed inline. And for expressions that get evaluated multiple times (anything inside a loop, or functions that get called several times), you get multiple results inside the preview.
For example, here's the previews from the noise function in this Shadertoy:
This is not in any way a polished product. It's barely just a concept to explore what we could do to make editing and debugging shaders a bit easier, both for programmers and technical artists.
So, does it work? Does it make it easier to debug shaders? Well, it does feel pretty neat to me, but please try it out and tell me what you think!