Introducing shadier

andrew@paon.wtf

Fragment shaders

I’ve been interested in generative art using fragment shaders for a long time. My “hacks” page is filled with small demos that make heavy use of fragment shaders via WebGL.

A popular site for developing these kinds of programs is shadertoy. It gives you a canvas and a code editor where you can type GLSL, and it uploads your program to the GPU when you press alt+enter.

It’s nice to develop fragment shaders in this environment because it eliminates the friction that comes with developing a WebGL program from scratch. Take a look at WebGL Fundamentals to see the kind of boilerplate you need before you start writing any shader code. With shadertoy, you just write GLSL.

I like shadertoy, but I have two main problems with it:

1. I need an internet connection
2. I can’t use my normal editor ¹

shadier

So, I hacked together a prototype that fixes my main issues with shadertoy. I call it shadier. It is a small C program that drives OpenGL and replaces the fragment shader on demand.

I published the code to sourcehut: https://git.sr.ht/~ajpaon/shadier.git

It’s still very limited, and it’s not very stable, but I’m already having fun using it.

My usage right now looks like this:

1. Open a new .glsl file in Neovim

2. Copy in some starting boilerplate:

   vec4 shadierMain(vec2 fragCoord) {
       vec2 uv = 2 * (fragCoord - .5 * resolution.xy) / resolution.y;
       vec3 col = vec3(0);
       return vec4(col, 1);
   }
   

3. Run :ShadierStart and start hacking away. Every time I save, the display is automatically updated.

When I’m done working, I just exit neovim and the display window disappears.

Editor support

My main design principle for shadier is “bring your own environment”. I use Neovim for most of my programming, so I (with some help from GPT-4) wrote a small Neovim plugin to interact with shadier.

The requirements for a driver plugin are minimal:

• run shadier as a child process
• write to stdin of the child process
• read from stdout of the child process

shadier is controlled by stdin. It listens for new program source to be written to stdin. When it sees the string EOF alone on a line, it compiles the source and updates the shader program on the GPU. It echoes any compiler errors back to stdout.

Future plans

I have lots of ideas to improve shadier further. If you’re excited about any of these or any other possibilities, please let me know. I’m much more likely to continue working on it if other people want to use it.

• controllable parameters: should be able to set resolution, framerate
• texture support: should be able to specify textures for use in the shader
• improved error handling: compiler errors should be surfaced in the editor
• output finished piece: I’m really excited about the possibilities here.
  • generate videos, images, gifs from shadier
  • generate a standalone C program to replicate the shadier display
  • generate a standalone HTML+JS app to replicate the shadier display