Shader-Part 1 画圆

效果

过程

将每个像素映射到 [-0.5,0.5]

vec2 uv = fragCoord / iResolution.xy;
// 片元坐标 / 视口长宽

uv -= 0.5;
// 0 1 -> -0.5 0.5

乘长宽比保持比例相等

uv.x *= iResolution.x / iResolution.y;
// 让长宽的比例相等

处理圆的逻辑

float d = length(uv);
// 求每个像素到屏幕中点的距离
float r = 0.3;
// 圆的基础半径，用于平滑的参数，大于0.3的为黑，小于0.3-0.02的为白，处于中间的会进行平滑
float c = smoothstep(r, r - 0.02, d);
// 平滑边缘

完整代码-shadertoy