Posted On: 2021-10-18
Over the past few weeks, I've been familiarizing myself more with how shaders work, as a part of expanding my problem-solving toolkit. Along the way, I happened upon the website Shadertoy, which allows for online, interactive, pixel-shader programming. I've found it immensely helpful in my learning, so I thought I'd write a bit about it today, in case it's useful for others as well.
To put it overly simplistically: a shader is how your computer knows what to display on the screen. Everything that you see on your screen right now is the result of (many) shaders working together. There are a bunch of different kinds of shaders, each with their own role in displaying graphics on the screen*, but the "pixel shader" is probably the easiest to understand, and, conveniently, the one that is the focus of this post. Pixel shaders take input data (ie. position on the screen) and outputs a single color for a single pixel. To display something on the screen, pixel shaders are run for everything that's visible**, and the screen is then updated with the new pixel colors.
Shadertoy is part shader authoring environment, part online community. As an authoring environment, it is streamlined for immediacy of feedback and ease of use. Pixel shader code and its resulting output are side-by-side, so that the user can compile any changes and instantly see the results. As an online community, it serves as a platform for shader authors to not only impress each other, but also remix and learn from each other's work. To that end, any publicly visible shaders show both the output and the shader source - making open source* a core part of the platform.
In keeping with the goal of being easy to use, you can use the site and its editor without registering: just fire up a new shader and immediately start. Similarly, when viewing someone else's work, you can modify the shader's code and recompile to immediately see how those chages affect the behavior. Together, this is an incredibly powerful learning tool: you can freely view others' code, and interactively explore it - even if you've never even been to the site before.
One of the most visually impressive parts of Shadertoy is animation. By default, the output of a shader is displayed like a movie - complete with pause and rewind features. To actually leverage this movie feature, Shadertoy provides the shader with an input representing the current time value*. How that value is used - or if it is used at all - is then up to the user. In theory, one can use this for realtime animation in Shadertoy**, but, for my own purposes, I've found it to be an incredibly powerful debugging tool, allowing me to quickly understand how a piece of code behaves across a wide variety of different values.
Hopefully this has been an interesting introduction to Shadertoy. I've found it quite helpful, and I hope that you will too. As always, if you have any thoughts or feedback, please let me know.