01 片元与数据

一份规则，画出整个画面

拖动半径。每个位置执行同一份程序，算出不同的颜色。

圆的半径0.30

0.050.48

边缘柔和度0.040

0.0010.2

习题改代码0%

把圆改成正方形：改代码，不是拖滑块

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

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p);
  float circle = 1.0 - smoothstep(0.300, 0.300 + 0.040, d);
  vec3 gradient = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), vUv.y);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), gradient, circle);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float d = length(p);
  float circle = 1.0 - smoothstep(0.300, 0.300 + 0.040, d);
  vec3 gradient = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), vUv.y);
  vec3 color = mix(vec3(0.06, 0.10, 0.14), gradient, circle);
  gl_FragColor = vec4(color, 1.0);
}

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

顶点决定形状与位置 → 片元计算颜色 → 显示画面。同一份代码，位置不同，结果不同。

试一试

让圆的边缘变得非常模糊
打开「像素调试」，把指针放到圆边上，读出 d 和 circle