SDF Morph (Signed Distance Field) · shaders.labcat.nz

Calibrating warp

Lab notes · Experiment 5

What is an SDF?

SDF = Signed Distance Field (or Function). For every pixel, the shape answers one question with one number:

negative → inside
zero → on the edge
positive → outside
how big → how far from the edge

That’s the whole idea. Drawing (step, smoothstep, mix into colour) is a separate step — the SDF itself is just the number.

A circle SDF is basically: distance from the centre, minus the radius. That subtract is what makes it signed.

Iteration 1 — signed field as a blend

Fed the signed distance straight into mix() as the blend amount. Still looks like a radial gradient — radius just shifts how strong the blend feels. Learned that having an SDF ≠ automatically having a filled shape.

Iteration 2 — disc + breathing glow

Threshold around zero (with smoothstep) turns the field into a disc. Animating the radius pulses size; animating the smoothstep edge width pulses glow while the disc stays put.

Also: 2 * uTime errors in GLSL — need to use a float instead of an int, e.g. 2.0. Softstep bands far from zero hide a “fake radius” inside the threshold numbers, which made the “does negative radius vanish?” thing confusing until we sorted that out.

Iteration 3 — box SDF + inner layer

A box is not length(abs(uv)) — that is still a circle. Recipe:

abs(uv) folds all quadrants together
subtract half-size vec2(halfWidth, halfHeight) → distance to each pair of edges
max(x, y) combines them into one signed field

Centred UV only spans about ±0.5 on Y (and ± half-aspect on X after uv.x *= width/height). So 1.0 is not “full canvas” — use 0.5 * uResolution.x / uResolution.y to know where the left/right edges actually sit.

Painted a second, smaller box on top with a third colour. Gotcha: smoothstep on an SDF is 0 inside / 1 outside — as a layer mask that paints the background. Flip with 1.0 - smoothstep(...) so the inner fill lands inside the rect.

Stumbled into a nice edge by adding step into the mix amount (pushes past 1.0 → extrapolation), same family as Soft Halo’s hot rings.

Iteration 4 — mix distances to morph

This was the goal: mix(distCircle, distBox, morphAmount) blends two signed distances, so the silhouette melts circle ↔ square. Same mix as colour work — A and B are just shapes now.

Gotchas along the way:

After aspect correction, a square needs equal half-sizes (vec2(0.2, 0.2)). Scaling x by halfScreenWidth makes a rectangle again.
Half-screen width (0.5 * width/height) is for canvas edges, not for sizing squares. Half-screen height is simply 0.5 with this UV setup (y isn’t stretched).

Final look kept the three-colour idea from iter 3: lilac→gold wash from the circle field as the base, then the morphed field as a cyan layer with soft glow + step hot rim (1.0 - smoothstep(...) + step(...)).

1precision highp float;

3uniform float uTime;

4uniform vec2 uResolution;

5uniform float uStep;

7void main() {

8 // colourA — dark wine / burgundy

9 vec3 colorA = vec3(0.45, 0.04, 0.16);

10 // colourB — warm coral

11 vec3 colorB = vec3(1.00, 0.45, 0.35);

13 // Iteration 1 — signed circle field mixed as a radial blend

14 // length(uv) is unsigned distance from the origin.

15 // Subtracting a radius makes it signed: <0 inside, 0 on edge, >0 outside.

16 // Feeding that straight into mix() still looks like a gradient (radius shifts the blend).

17 if (uStep < 1.5) {

18 // Normalise pixel position to 0–1, then shift origin (off-centre on purpose)

19 vec2 uv = gl_FragCoord.xy / uResolution.xy - 0.75;

20 uv.x *= uResolution.x / uResolution.y;

22 float dist = length(uv) - 0.45;

23 vec3 col = mix(colorA, colorB, dist);

24 gl_FragColor = vec4(col, 1.0);

25 return;

26 }

28 // Iteration 2 — disc with breathing glow (animate softstep width, not radius)

29 if (uStep < 2.5) {

30 // Normalise pixel position to 0–1, then shift origin (off-centre on purpose)

31 vec2 uv = gl_FragCoord.xy / uResolution.xy - 0.25;

32 uv.x *= uResolution.x / uResolution.y;

34 float speed = uTime * 2.0;

35 float dist = length(uv) - 0.65;

36 // glow = soft band around the SDF surface (0); larger = fatter halo

37 float glow = 0.05 + 0.35 * (0.5 + 0.5 * sin(speed));

38 vec3 col = mix(colorA, colorB, smoothstep(-glow, glow, dist));

40 gl_FragColor = vec4(col, 1.0);

41 return;

42 }

44 // Iteration 3 — box SDF + layered inner rect (third colour)

45 if (uStep < 3.5) {

46 vec3 colorA = vec3(0.06, 0.12, 0.18); // deep teal ink

47 vec3 colorB = vec3(0.72, 1.00, 0.35); // acid lime

48 vec3 colorC = vec3(1.00, 0.72, 0.55); // warm peach (inner fill)

50 // Centre the origin; aspect-correct so boxes aren't stretched

51 vec2 uv = gl_FragCoord.xy / uResolution.xy - 0.5;

52 uv.x *= uResolution.x / uResolution.y;

54 // Left/right canvas edges sit at ± this value after aspect fix

55 float halfScreemWidth = 0.5 * uResolution.x / uResolution.y;

57 // Outer box SDF: abs folds quadrants; subtract half-size; max() = one signed field

58 // (not length() — that would still be a circle)

59 vec2 distanceToEdges = abs(uv) - vec2(halfScreemWidth * 0.9, 0.35);

60 float dist = max(distanceToEdges.x, distanceToEdges.y);

61 float glow = 0.05 + 0.15 * (0.5 + 0.5 * sin(uTime));

62 // + step pushes blend past 1.0 near the edge (extrapolated lime)

63 vec3 col = mix(colorA, colorB, smoothstep(-glow, glow, dist) + step(dist, 0.015));

65 // Inner box — same recipe, smaller half-size

66 vec2 distanceToEdges2 = abs(uv) - vec2(halfScreemWidth * 0.6, 0.15);

67 float dist2 = max(distanceToEdges2.x, distanceToEdges2.y);

68 float glow2 = 0.05 + 0.15 * (0.5 + 0.5 * sin(uTime));

69 // Layer mask must be 1 inside / 0 outside — flip smoothstep (raw smoothstep is the opposite)

70 float innerMask = 1.0 - smoothstep(-glow2, glow2, dist2) + step(dist2, 0.1);

71 col = mix(col, colorC, innerMask);

73 gl_FragColor = vec4(col, 1.0);

74 return;

75 }

77 // Iteration 4 — morph distances (circle ↔ box), then three-colour draw

78 if (uStep < 4.5) {

79 vec3 colorA = vec3(0.72, 0.55, 1.00); // bright lilac

80 vec3 colorB = vec3(0.95, 0.85, 0.35); // warm gold

81 vec3 colorC = vec3(0.35, 0.75, 0.95); // sky cyan (inner / morph fill)

83 // Centre the origin; aspect-correct so boxes aren't stretched

84 vec2 uv = gl_FragCoord.xy / uResolution.xy - 0.5;

85 uv.x *= uResolution.x / uResolution.y;

87 // Two SDFs — same centre; equal half-size on the box = square after aspect fix

88 float distCircle = length(uv) - 0.45;

89 vec2 distanceToEdges = abs(uv) - vec2(0.2, 0.2);

90 float distBox = max(distanceToEdges.x, distanceToEdges.y);

92 // THE lesson: mix() on signed distances → shape morph (not a colour blend)

93 float morphAmount = 0.5 + 0.5 * sin(uTime);

94 float dist = mix(distCircle, distBox, morphAmount);

96 // Base wash from the circle field (lilac → gold radial)

97 vec3 col = mix(colorA, colorB, distCircle);

99 // Morph silhouette as a layer: soft glow + step (hot rim, same idea as iter 3)

100 // Flip so mask is 1 inside / 0 outside, then paint cyan on top

101 float glow = 0.05 + 0.15 * (0.5 + 0.5 * sin(uTime));

102 float morphMask = 1.0 - smoothstep(-glow, glow, dist) + step(dist, 0.1);

103 col = mix(col, colorC, morphMask);

104

105 gl_FragColor = vec4(col, 1.0);

106 return;

107 }

108}

109