Shadertoy, a new playground of Demo coders
with a side serving of Blender
Shadertoy is a weird beast of a website. It was first released in 2013 by Inigo Quilez and Pol Jeremias aka Beautypi and is a repository of Open Graphics Library shaders. Currently, there are over 65 thousand different shaders on the site and what makes it interesting is you can edit them and play around with them live on the site. Please note that some of the shaders will use and abuse your graphic card to its maximum so consider yourself warned when you hear the graphic fans ramp up.
First, what are shaders, and why are they important? Well, most if not all effects like fire, smoke, lens effects, warps, and other visual effects in games are made with shaders, and that’s just one form of shaders. In general shaders are a set of instructions to the GPU which are executed all at once for every pixel, or mesh vortex on the screen. It sounds simple and yet it’s amazing what can be achieved with just that.
To prove just how powerful shaders are take a look at a project by SonicEther. Applying his shaders to Minecraft makes it look like a completely different game.
Nop, not raytraced Minecraft, just some very complex shaders applied from SonicEther.
Shading in real life is a phenomenon that is the result of the interaction between light and matter. An artist uses this phenomenon in his or her artwork to create the atmosphere.
If you want to shade an object on a computer screen, you need to use shaders. You may want to create photorealistic or unrealistic images or impressive visual effects. Then you have to deal with shaders.
The history of shaders starts at LucasFilm in the early 1980s and ever since they have become an indispensable part of any computer graphics application.
Besides pixel shaders, there are Vertex shaders that are responsible to transform positions of the vertices of objects, Geometry shaders that allow for the creation of new primitives like triangles or lines, Tessellation Shaders which use low-resolution 3D models as input and add definition to them or to put it differently, use vertex data and subdivided them into smaller primitives thus increasing details, and last, but not the least is Compute shaders that make calculations other than for graphics purposes. Since GPUs are designed to perform parallel operations and can make quick work of any such operation that benefits from parallel processing. The parallel processing part makes programming shaders a lot different from programming general-purpose processors like your desktop CPU. While the language shaders are programmed in looks like C they are not. The most used are OpenGL Shader Language (GLSL) and Microsoft High-Level Shader Language (HLSL) languages. Shader Programming languages are domain-specific languages and are optimized with that in mind and come with some predefined variables, data types, and interface blocks that have special syntax and semantics that can be applied to them.
The skill to program shaders is in high demand as the animation industry has been struggling with shaders, as it requires knowledge of programming, 3D creative platform rendering, hardware, o and math, lot of math.
Shadertoy allows developers to live-code procedural shaders that react to music, videos, and webcams using HTML5 and WebGL. These creations are shared with the community, making Shadertoy a great repository for finding inspiration, learning, and teaching about shading, reactivity, and rendering.
To get a sense of how powerful shaders are, what goes into programming them, and just how different they are to traditional programming aside from just how much math goes into them one can just take a look at some examples of people using Shadertoy to do some amazing things. One such amazing person is Inigo Quilez from Spain and since 1997 he made Demos, a field of computer graphics and programming I have high respect for. In my eyes, the coding of shaders is reminiscent of coding good old Assembly Demos. For more on that take a look at one of my prior posts.
Shaders outside games
While researching this I stumbled upon a neat little side use. Instead of making shaders using nodes you can add them directly from Shaderbox to Blender and use them there. There are some restrictions as not all functionality was ported but enough for us to work with. I added some shaders I found on Shaderbox to Blender, added some nodes to make black transparent, and increased the saturation and Voilà . Shaderbox shader in Blender. Pretty neat.
First off you will need an addon from Kristian Sons that you can find on GitHub. It is a little temperamental and does crash or stops refreshing from time to time but it’s a neat little addon to play around with. I woudnt’t trust it to work for production but as a plaything, sure. I think I will explore using Shadertoy with Blender more, in some other later posts. also, you could use Shadertoy with compositing tools but more on that in later posts. So stay tuned.
At the end here’s a selection of some impressive shaders, check Shadertoy for more fun. And, remember, its all math :)
