Sunday, 17 July 2016

Embedding Shadertoy shaders in web pages

Did you know you can run custom GPU pixel shaders from javascript inside a web browser?  I am super delighted by that fact.

Shadertoy ( is basically Youtube for GLSL shaders.

You can embed a Shadertoy shader in a webpage using this little snippet:
<iframe src="" style="height: 500px; width: 500px;"></iframe>

Just change "4td3Wn" in the snippet to the code for your shader.  The code is the bit after "/view/" in the URL of the shader you want. You'll also need to set your shader to "public" or "public + api".

Here's an example.  You can see the code at - but you might want to mute your speakers first.  I can't find a way to disable the sound on the video that the shader uses as a data source.  Also note that this shader in chrome doesn't work if you have two copies open (this embedded version and the shadertoy site, for example).