Something I've wanted to do with SDFs (2d in particular, if it matters) is to be able to interpolate between SDF-defined geometries in time.

Like, for example, some kind of square that morphs to a circle. Or a triangle that morphs into a 5-point star. Etc. Etc.

I'd be very surprised if there was a generalized method for approaching this. But maybe there are hints for how one could think about this?

· · Web · · ·

@paul I think you can have global variables the shader can read; so can't you just make the first shader (not that I can remember the order) generate the geometry based on a current frame counter?

@penguin42 Well, I'm more interested in the math than the shader bits. Ideally, I'd want to use SDFs to produce vector graphics with a morph value M that can interpolate between two solid geometries.

@paul Isn't that just a matter of picking two corresponding points, dividing the distance between them by your cycle length, and then returning point1+offset*(distance) ?

@penguin42 I mean, yes maybe? I cannot stress how little I understand SDFs. All I basically see is Inigo Quilez's magic shader code incantations and the pretty stuff they produce.

iquilezles.org/www/articles/di

for square<->circle you could animate the corner radius of sdRoundedBox() (I tried it, looks ok)

for triangle<->5-star you could interpolate the vertices between two 30-point polygons (30 = lcm(3, 2*5)) (haven't tried it, might look strange)

triangle-square morph via 12-gon

vec3 color(vec2 q, vec2 dx, vec2 dy)
{
float k = 0.5 - 0.5 * cos(2.0 * float(M_PI) * time / 6.0);
vec2 tri3 = vec2(vec2(-1,-1), vec2(1,-1), vec2(0,1));
vec2 sqr4 = vec2(vec2(0,-1), vec2(1,0), vec2(0,1), vec2(-1,0));
vec2[N] ply;
for (int i = 0; i < 12; ++i)
{
vec2 tri = mix(tri3[i/4], tri3[(i/4+1)%3], float(i%4)/4.0);
vec2 sqr = mix(sqr4[i/3], sqr4[(i/3+1)%4], float(i%3)/3.0);
ply[i] = mix(tri, sqr, k);
}

float d = sdPolygon(ply, q);
d = abs(d) - 0.01;
return vec3(d / length(vec4(dx, dy)));
}

@paul Aren't those examples all fragment shaders - i.e. that return a colour given a position? I think what you need is probably a vertex shader ?

@paul
you can literally linearly interpolate two SDFs and get *some* (degenrate, but somewhat renderable) result! :)

I think there might even be some rules you can follow to make sure it doesn't cause big issues (maybe if both shapes are convex?)

@paul
but I also remember I found a paper about a "serious" approach for this once, but I'm not finding it now... :( 