Learning Shadertoy

Eren Dere -- 20 February, 2023
 2 min read
headImage

Shaders and Shadertoy

I have been writing shaders for my OP Engine for a while. I have also tried to make a Raytracer with shaders but failed because I had no free time to work on a shader-based ray tracer. So I finished the project by implementing a path tracer that works on the CPU. But I know that I have to get serious with shaders and learn everything I can also considering the maths behind the concepts.


Shadertoy is a website that runs on WebGL. It is created by Inigo Quilez and Pol Jeremias Vila. People write shaders and share their work with others. As I understood, the purpose is to create stuff, share and let people learn 3D computer graphics. Since 2021, I have been looking at shaders written by shadertoy creators. They implement mesmerizing fractals, procedural scenes, pathtracers and other cool stuff. For example, the image of clouds on the top of the page is a frame of a shader created by nimitz.


As another example, Inigo Quilez created the scene shown below with distance fields that work in real-time and the scene is available in shadertoy. But we should not open this shader on smartphones because their power is not enough to run the shader which causes a crash:


snail

Snail by Inigo Quilez


Another example that I found nice is this galaxy shader by CBS. It makes use of fractals. Colors also change according to the input which is the music played on another channel.


galaxy

Galaxy by CBS


There are tons of mesmerizing pieces of art created with shadertoy which inspires and encourages beginners to take action and learn. So in this series, I will try to learn and record my progress with blog posts.

Copyright © 2023 --- Eren Dere