This was my first foray into raymarching with fragment shaders. The idea is that you have a mathematical function that given a point in space returns a float value stating how far away the nearest surface is (a signed distance field). Knowing this, you create a ray starting at the camera and advance it by the computed distance value. Then you evaluate the distance at the new ray position and march it forward once more until you run out of steps or you have decided that you have stopped at a surface. The gradient of the distance function at this point gives you the surface normal, which you can use to compute how light is reflected off it.

This can be tricky! Especially since you don’t have much in the way of debugging tools for shaders. I remember struggling quite a bit when trying to implement my first raymarcher.

This shader was pretty much an attempt at implementing the effect from this music video (in particular the moment at 2:45)

The idea is that if your animation is defined as a function of pixel location and time

color = f(x,y,t)

you can then cause a warping by altering the time value as a function of the pixel coordinate too:

color = f(x,y,g(x,y,t))

In this case pixels toward the top of the frame are further ahead in the animation than the ones below them, and you have a linear ramp based on the y-coordinate. In my shader, I vary how steep this ramp is - a stronger ramp means the wires get really bendy:

color = f(x,y,t + y*alpha)

By having the wires (which are actually just really tall rectangular blocks) flash you also get this effect of glowing areas traveling downwards.

About the name

It is a direct reference to the track by the same name by Willam Basinski:

Note that the aesthetics of the shader absolutely does not match that of the track. I originally named it just Frontier of Wires to be less direct, but quick feedback on it stated that it would not compile on Windows (I was on OSX at the time). So I took it down and fixed it at work where I had access to a Windows laptop by unrolling the main for-loop. Unfortunately I could not resubmit it under the same name, so I had to use the full reference.

This got featured shader status on Shadertoy! It was very encouraging that my second ever shader submitted there, and my first ever raymarcher was so well received.

Code is below, quality of it is… eh, but I particularly enjoyed reading my 11 year old comment // this stopped working at some point?