为什么圆在宽屏上变成椭圆？修正 GLSL 坐标的长宽比
按分辨率分别除两个坐标轴，虽能把它们都映射到 0 到 1，同样的坐标长度却可能占据不同像素数。画圆时可让两轴都除以画布高度，统一像素尺度；采样图片仍使用两轴分别归一化的 UV。
先固定问题
把 fragCoord 除以分辨率会将两轴都归一化到零到一，但一个横向单位和纵向单位覆盖的像素数可能不同。画圆应选择相同的像素标尺，例如两轴都除以画布高度；采样图片时则仍然使用各轴各自的归一化 UV。
关键代码
vec2 uv=gl_FragCoord.xy/u_resolution;
vec2 p=(2.0*gl_FragCoord.xy-u_resolution)/u_resolution.y;
float circle=1.0-smoothstep(0.3,0.31,length(p));
float cellPixels=12.0;
vec2 blockUV=(floor(gl_FragCoord.xy/cellPixels)+0.5)*cellPixels/u_resolution;
按顺序验证
把预览从正方形换成宽屏和竖屏。圆的几何长宽应相等，像素化方格的横竖边也应有相同像素长度。
适用范围和常见错误
CSS 显示尺寸和 drawing buffer 尺寸要对应。只改元素样式而不改实际缓冲分辨率，会让 shader 中的像素单位和显示像素不一致。