Skip to main content

Drawing Blobs Using Signed Distance Functions

·361 words·2 mins

Learning shaders trying to make artwork for the blob. Here’s some debug art for ya.

I do love me some visual debugging so not being able to print values on the console is kinda fun.

That hole is the problem I’m trying to solve. I’ve got centers on five hexes where it’s black and the fade out to blue is achieved by squaring the distance to those centers. I’m using the smooth min GLSL function smin() to interpolate between the falloff from each center.

That hole happens because there’s another center “emerging” from the one on the top left and moving toward the hex to the left of that. But when the two centers are so close the smooth min gives me a high distance, as if it was on the border of the blue/green.

I determined that removing the other centers fixes the issue so that means it’s caused by interpolating with the centers that are far away. So maybe instead of interpolating I’ll just add up the squared distances. The ones that are far away will have no impact on the value… will it still be smooth?

I guess I could also invert it so that the higher the distance the lower the value. Then I could still use smin().

Oh. I could also just ignore centers that are farther away than a certain threshold. I was considering that as an optimization anyway.

That did the trick. Also set the distance value to infinite which in GLSL apparently you just do by dividing by zero. Crazy.

float accumulator = 1. / 0.;

Started adding outlines and shading. Here’s a bad output where I made it too smooth.

Cool, though. Shaders and signed distance functions. So wow.

More test art.

And here I’m setting tiles on the tile map in the editor, reading those tiles and passing the coordinates to the shader.

That’s every arrangement I can think of. It mostly works but I don’t like how uniform everything is. I’ll need to sample a noise texture or something to add some nasty blobbyness. But for now this’ll do. Need to pull in stuff from the prototype build.