每个像素运行一次拖动数字,或直接改代码
void main() {
vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
p *= 6.000;
float d = length(fract(p) - 0.5) - 0.3;
float fixedMask = 1.0 - smoothstep(0.0, 0.010, d);
float w = fwidth(d);
float smartMask = 1.0 - smoothstep(-w, w, d);
float mask = vUv.x < 0.5 ? fixedMask : smartMask;
vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), mask);
if (abs(vUv.x - 0.5) < 0.002) color = vec3(1.0);
gl_FragColor = vec4(color, 1.0);
}JS 这一侧gl.uniform2f(uResolution, …, …)
fwidth(d) 是相邻像素之间 d 的变化量;用它当 smoothstep 的宽度,任何缩放下边缘都是 1 像素柔和。
试一试
- 把缩放拉到 40,比较左右两半
- 把左边的固定宽度调大,远处变糊;调小,近处出锯齿