An early goal in the development of Untitled Algebra Game was to visualize exponents as cells since mitosis translated well to exponent math.
Cells have a sort of goopy-ness that I figured I'd only be able to achieve with a custom shader. Since I historically I've only been able to hack together minimal shaders, I thought I was headed down a rabbit hole of frustration, but it ended up being very straightforward! Most of my time was spent tweaking it to achieve the our specific goals.
The first thing I stumbled across was this tutorial on implementing these curious things called metaballs. Ironically these apparently were modeled after mitosis.
However I ended up poking around a bit more, as I wanted to create a shader with Shader Graph because:
- I figured the non-engineers on my team might want to tweak what I came up with.
- I wanted to take advantage of Shader Graph handling the quirks of different GPUs since we needed to support a range of different platforms.
- I couldn't get the shader from the tutorial working out of the box 😅
I didn't find a metaball Shader Graph, but I did find this gold nugget, which helpfully included a screenshot of their node configuration. I took their advice and googled Signed Distance Fields, and fun fact, this is what TextMeshPro uses to render sharp fonts.
After a day or two of fiddling with nodes, I had a working metaball shader 🎉
Unfortunately my programmer art was never replaced and the cells still have the ugly purple base texture 🙈