UV坐标基础

上一节每个像素都输出同一个颜色。想让左边暗、右边亮，着色器就需要知道当前像素在哪里。

这就是 UV 坐标 的用途。

什么是 UV 坐标

gl_FragCoord.xy 给出像素的屏幕位置，比如 (142.0, 87.0)——但这个数字和画布大小绑定，不通用。

把它除以画布尺寸，就得到 0.0 到 1.0 范围内的位置：

除完之后：

• 左边缘：uv.x = 0.0
• 右边缘：uv.x = 1.0
• 下边缘：uv.y = 0.0
• 上边缘：uv.y = 1.0

用 uv.x 控制颜色

uv.x 从左到右是 0.0 → 1.0，正好可以当亮度用。

把它同时设给三个颜色通道，就得到从黑到白的灰度渐变：

左边 uv.x = 0.0 → 黑色；右边 uv.x = 1.0 → 白色。

练习

练习区画面是黑色的，计算出 UV 坐标，用 uv.x 让它从左边黑色渐变到右边白色。

答案解析

两步：先算 UV，再用 uv.x 当亮度。

vec3(uv.x) 是 vec3(uv.x, uv.x, uv.x) 的简写——三个通道相同就是灰色。uv.x 从 0 到 1，灰色就从黑到白。

u_resolution 是 uniform，代表画布宽高（如 300×300）。除以它，就把像素坐标缩放到 0~1 之间。

试试把 vec3(uv.x) 改成 vec3(uv.y)，渐变方向会变成从下到上。