{"id":2225,"date":"2026-10-11T21:47:22","date_gmt":"2026-10-11T19:47:22","guid":{"rendered":"https:\/\/www.pcjv.de\/?p=2225"},"modified":"2026-10-12T08:19:43","modified_gmt":"2026-10-12T06:19:43","slug":"the-other-side-and-imperfection-two-glsl-scenes-with-a-go-runner","status":"publish","type":"post","link":"https:\/\/www.pcjv.de\/?p=2225","title":{"rendered":"Some GLSL-Fun"},"content":{"rendered":"\n

The visualizer video for Moonchild’s “The Other Side”<\/a> caught me the first time I saw it: calm music, and a scene just as calm, a boat on a night sea under an aurora. I was deep into Shadertoy back then, so I tried to rebuild that scene from techniques I picked up in other shaders. It got somewhere, but never to a state I wanted to publish.<\/p>\n\n\n\n

AI-assisted development got me past the point where I had given up, and I could finally finish what I had in mind for that shader. The workflow was fun enough that I went straight on to a second one: an animated version of “imperfection”, an image I once made with generative AI.<\/p>\n\n\n\n\n\n\n\n

Both are GLSL scenes in Shadertoy form. the-other-side<\/a> is a night sea: a starry sky, two aurora ribbons low over the horizon, and an empty rowing boat riding the swells. imperfection<\/a> recreates the abstract painting, a warm yellow and red glow that breaks up into brush blocks and streaks and fades into dark blue, and keeps its paint flowing. Both run in the browser with WebGL2: the night sea<\/a> and the painting<\/a>.<\/p>\n\n\n\n

The other side: a night sea in layers<\/h2>\n\n\n\n
the-other-side, 12 s at 1280×720. A meteor is forced into every 4 s slot here (-D METEOR_FORCE=1<\/code>); normally they are rarer.<\/figcaption><\/figure>\n\n\n\n

The scene is a stack of layers, each in its own include file. The sky gradient is calibrated against a reference image of the visualizer: a saturated blue-teal zenith, a greyer cyan haze near the horizon, and brightest a little right of centre, under the aurora. The stars are cell-hashed points drawn as small Gaussians whose width never drops below a pixel, so they don’t flicker under the slow camera drift. Occasional meteors cross from right to left on paths fixed to the sky.<\/p>\n\n\n\n

The aurora is the one part I didn’t write: it is derived from “Auroras” by nimitz<\/a> and keeps its licence (CC BY-NC-SA 3.0). The rainbow palette became a cyan-green to teal ramp, and the volume density is multiplied by a band mask, so instead of filling the whole sky the aurora reads as two broad arcs that meet the horizon. It is ray-marched with 40 steps in the sky and 12 in the reflections on the water.<\/p>\n\n\n\n

The sea is not ray-marched at all. It is an analytic hit on a plane, with long swells and stretched noise ripples whose slopes are computed analytically. Every component is filtered against the pixel footprint, so the detail fades out toward the horizon instead of aliasing. The slope variance that gets filtered away is kept as roughness: at grazing angles only the facets tilted toward the viewer are visible, so the water is a bit darker than the sky right above it, and the horizon stays a crisp line. The boat is the only real 3D object: a small distance field, sphere-traced inside its bounding box, with rowlocks and two oars resting in them. It samples the swell height under bow, stern and both sides to heave, pitch and roll, and it is cut off at the true swell height, so its waterline moves with the passing swells although the sea is drawn flat.<\/p>\n\n\n\n

The scene renders into a half-float buffer, and a second pass blends in a soft glow built from that buffer’s mip chain, like the veiling glare of a lens, before it tonemaps. On an Intel Iris Xe the whole scene takes about 10 ms per frame at 1280×720 and 22.5 ms at 1920×1080.<\/p>\n\n\n\n

A sea that loops<\/h2>\n\n\n\n

For a square Instagram clip, -D LOOP=30<\/code> makes the scene repeat exactly every 30 seconds. Oscillations such as the swells, the camera bob and the aurora waves are adjusted to turn a whole number of cycles per loop, which changes their speed by a few percent. Drifting noise can’t be adjusted that way, so it is sampled at t and at t minus the loop length and cross-faded over the loop: it moves at its usual speed and is back at the start when the loop closes. Even the meteors wrap: one that crosses the loop point continues after it.<\/p>\n\n\n\n

Letting the model look at its own output<\/h2>\n\n\n\n

Both scenes come with a small Go runner (go-gl and GLFW) instead of living in a browser tab. For me it is a window that reloads whenever an include file changes. For the coding agent it was more important: it can render a deterministic screenshot at any time, one layer in isolation (-D VIEW=2<\/code> shows only the aurora), a side-by-side comparison with a reference, or a frame sequence for a contact sheet. That closes the loop the agent needs: change the code, run Go, grab the screenshot, look at it, and go back to the start if it isn’t right yet. Without it, every iteration would have needed a browser. The same runner bundles the include files into one file per Shadertoy tab, and the GitHub Pages workflow serves that bundle with a small WebGL2 player.<\/p>\n\n\n\n

imperfection: a painting that keeps flowing<\/h2>\n\n\n\n

The second scene started from an image, not from a scene: a warm column rising to the top left, a red band running to the right edge, an ice-blue column of drips beside the yellow core, and everything else cool and dark. The goal was not a pixel copy but something that reads as the same painting, and then to make its paint move without moving the composition.<\/p>\n\n\n\n

imperfection, the full 32 s loop at 720×720. The big shapes stay put; blocks wipe in and out, drips run and the wet paint smears along its grain. The last frame runs straight into the first.<\/figcaption><\/figure>\n\n\n\n

Reading the image first<\/h2>\n\n\n\n

Before any shader code, the image was taken apart in docs\/analysis.md<\/code>: composition, colours, directions and building blocks, with the measured numbers next to them. A few observations shaped everything after:<\/p>\n\n\n\n