When the fractional part of a float fixes your shader

The other night I wanted to implement a small Voronoi-diagram shader to use as a background to a music video, to show up the music project I recently finished. Voronoi Noise is type of algorithm I never implemented before, and I was always mesmerized by the geometric and often organic-ish way it looks. Without much direction in mind, I started implementing it and experimenting. I got it looking pretty cool and I was about to call it a day, but then next morning I found out that, in one of my computers only, there was a weird stutter to the animation. So I decided to dig into it to find out what the problem was. This is the write-up of my whole adventure of a week debugging and disassemblying shaders. There are a few plot twists to the story, and hopefully a lot of interesting information too.

This is the final shader. You can also check it on Shadertoy. I still haven’t worked on the video, but you can check the music on all digital platforms: stuffy knows.

The Shader

This shader is not too complicated. In fact, it’s basically just a few concepts put together:

Voronoi Diagram

A variation of what’s called a Worley Noise, or a Voronoi Noise, that makes the cells distinct between themselves. In this case, I divide the space into equal tiles, then I get a random point within these tiles (the Voronoi centers), and lastly, I calculate the distance of each one of the pixels to the closest 9 Voronoi centers. The closest one defines which Voronoi cell that points belong to. That generates this, in monochrome:

voronoi diagrams in black and white

There’s a really nice introduction to Voronoi noise in The Book Of Shaders. I think that was the first resource on that I’ve seen back when I was learning shaders. There’s also a lot of other really cool resources in there.

... continue reading