🌱 Seedling
Last tended

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:

  1. I figured the non-engineers on my team might want to tweak what I came up with.
  2. I wanted to take advantage of Shader Graph handling the quirks of different GPUs since we needed to support a range of different platforms.
  3. 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 🙈

This is a digital garden, not a blog 🌻 Learn more