12 从画面到配方

边缘：同一个距离，五种画法

形状不变，只换“距离 → 明暗”这一行：硬边、抗锯齿、描边、发光、等高线。

边缘画法

宽度 w（描边、发光、等高线）0.010

0.0020.04

习题调参数0%

做出这个霓虹发光的轮廓

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

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float a = length(p - vec2(-0.1, 0.0)) - 0.2;
  float b = length(p - vec2(0.17, 0.08)) - 0.12;
  float d = min(a, b);   // 两个圆合并后的距离
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // 距离 → 明暗：只改这一行
  vec3 color = vec3(0.06, 0.10, 0.14) + vec3(0.48, 0.83, 0.69) * ink;
  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.1, 0.0)) - 0.2;
  float b = length(p - vec2(0.17, 0.08)) - 0.12;
  float d = min(a, b);   // 两个圆合并后的距离
  float ink = 1.0 - smoothstep(0.0, fwidth(d), d);   // 距离 → 明暗：只改这一行
  vec3 color = vec3(0.06, 0.10, 0.14) + vec3(0.48, 0.83, 0.69) * ink;
  gl_FragColor = vec4(color, 1.0);
}

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

d 是到边缘的距离。step 和 smoothstep 画实心；abs(d) 让边缘两侧都变成正数，减去 w 就是描边；w / abs(d) 越靠近边越亮，就是发光；cos(d / w) 画出一圈圈等高线。

试一试

在 step 和抗锯齿之间切换，比较边缘
切到发光，把宽度 w 调大
切到等高线：线沿着两个圆合并后的形状弯曲