Last week I took a dive into Shadertoy, a website that allows users to write shaders and share them publicly, all within the browser. Many of the effects are truly awe inspiring with incredibly detailed, procedurally generated, 3D scenes ranging from lifelike forests as in the example below by Inigo Quilez (iq), the creator of shadertoy, to abstract and fractal, scenes like the following by Kali.
Rainforest | Generators |
---|---|
![]() |
![]() |
I created a more simple 2D shader rendering circles by following guides on youtube, mainly this one by iq https://www.youtube.com/watch?v=0ifChJ0nJfM
From there i started to draw more circles, adding some offsets using sine and cosine functions and i eventually came up with this cool perspective effect which makes a grayscale mask which i then mix between white and the default shader’s colour effect. (Click to see the shader on Shadertoy.com)
I continued to experiment further, using some of the other inputs that shadertoy gives you and also by taking in feedback from the comments (which came in very quickly) to create these next shaders.
Finally I took this one step further and implemented the first effect in a Unity shader so that it can be used as both a material on an object but also as a post process image effect. This wasn’t too difficult, even though Shadertoy uses GLSL and Unity used HLSL, they’re both very similar and most of the code worked fine bar a few vec2
s needing to be float2
s.
I hope you have enjoyed this week’s post, i certainly had a lot of fun researching the effects and demos that people have created using shadertoy, especially the 3D ones. If you would like to have a go at writing some shadertoy shaders i would recommend looking at iq‘s website here and The Art of Coding on YouTube.