02 用数学画形状

SDF：带符号的距离

距离带上正负号，就能合并、相交、相减。

半径0.22

0.080.35

两圆间距0.30

0.050.7

组合方式

习题调参数0%

做一弯月牙

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.300 / 2.0, 0.0)) - 0.220;
  float b = length(p - vec2( 0.300 / 2.0, 0.0)) - 0.220;
  float d = min(a, b);
  float inside = 1.0 - step(0.0, d);
  float contour = 0.5 + 0.5 * cos(d * 100.0);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), inside) * (0.6 + 0.4 * contour);
  color += vec3(1.0 - smoothstep(0.0, 0.006, abs(d)));
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.300 / 2.0, 0.0)) - 0.220;
  float b = length(p - vec2( 0.300 / 2.0, 0.0)) - 0.220;
  float d = min(a, b);
  float inside = 1.0 - step(0.0, d);
  float contour = 0.5 + 0.5 * cos(d * 100.0);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), inside) * (0.6 + 0.4 * contour);
  color += vec3(1.0 - smoothstep(0.0, 0.006, abs(d)));
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧gl.uniform2f(uResolution, …, …)

带符号距离：小于 0 在内，等于 0 在边上。min 合并，max 求交，max(a, −b) 相减。

试一试

依次切换三种组合
打开像素调试，确认圆内 d 是负数