第 8 课：SDF Interpolation

实现

uniform vec2 iResolution;
uniform float iTime;

const vec3 shapeColor      = vec3(1.0, 0.3, 0.3);
const vec3 backgroundColor = vec3(0.12);

float sdfCircle(vec2 center, float r, vec2 pos) {
  return distance(center, pos) - r;
}

void main() {
  vec2 uv = gl_FragCoord.xy;

  float r  = iResolution.y * 0.25;

  vec2 center1 = iResolution * vec2(0.5, 0.4) + vec2(+r, +r);
  vec2 center2 = iResolution * vec2(0.5, 0.4) + vec2(-r, +r);
  vec2 center3 = iResolution * vec2(0.5, 0.4) + vec2(-r, -r);
  vec2 center4 = iResolution * vec2(0.5, 0.4) + vec2(+r, -r);
  vec2 center5 = iResolution * vec2(0.5, 0.4);

  float c1 = sdfCircle(center1, r, uv);
  float c2 = sdfCircle(center2, r, uv);
  float c3 = sdfCircle(center3, r, uv);
  float c4 = sdfCircle(center4, r, uv);
  float c5 = sdfCircle(center5, r, uv);

  float time = sin(iTime)*0.5+0.5;
  float t0 = min(min(c1, c2), c5);
  float t1 = min(c3, c4);
  float t2 = min(-t0, t1);
  float blendedSDF = mix(-t2, c5, time * 0.65 + 0.35);
  float t  = clamp(blendedSDF, 0.0, 1.0);

  gl_FragColor = vec4(mix(shapeColor, backgroundColor, t), 1.0);
}