纵横比修正的 UV

在正方形画布上，length(p) 画出的是圆。但如果画布宽高不同，同样的代码会画出椭圆。纵横比修正解决这个问题。

为什么会变形

vUv 的 x 和 y 范围都是 0~1，但如果画布宽 600px、高 300px，x = 0.5 代表水平 300px，y = 0.5 代表垂直 150px。两个方向的物理距离不同，圆就会拉伸成椭圆。

修正方法

乘以纵横比（宽 ÷ 高）：

修正之后，length(p) 在任何尺寸的画布上都能画出真正的圆。

练习

练习代码里 aspect = 1.0（默认不修正）。用 u_resolution.x / u_resolution.y 计算正确的纵横比，让圆形不变形。

答案解析

u_resolution 是 uniform，代表画布的实际像素尺寸。宽除以高得到比例系数，再乘到 p.x 上，让水平距离和垂直距离在物理上等比。

练习的画布是 300×300 的正方形，所以 aspect = 1.0 不会看出区别。改一下代码里的 u_resolution 值，或者在非正方形的情境下测试，效果才明显。