UV坐标基础教程

在 Shader 中，UV 坐标是用于对纹理（Texture）进行采样的二维坐标系统，核心作用是建立三维模型顶点与二维纹理像素之间的映射关系。

一、核心概念

1. 坐标定义

UV 坐标的取值范围通常是 0.0 ~ 1.0，是一个标准化的二维坐标系：

• U 轴：对应纹理的水平方向，从左到右取值 0 → 1
• V 轴：对应纹理的垂直方向，从下到上取值 0 → 1
• 坐标原点 (0,0) 位于纹理的左下角，(1,1) 位于纹理的右上角

这个设计和图片的像素坐标（原点在左上角）不同，是图形学中的通用标准。

2. 与模型顶点的关联

三维模型的每个顶点都会携带一组 UV 坐标，GPU 会根据顶点 UV 进行插值计算，最终为模型表面的每个像素分配对应的 UV 坐标，从而确定该像素应该采样纹理的哪个位置。

二、直观理解

可以把 UV 坐标想象成纹理的"贴图纸坐标"：

• 假设你有一张贴纸（纹理）和一个盒子（3D 模型），UV 坐标就是贴纸的"定位坐标"，告诉你盒子的每个面应该对应贴纸的哪个区域。
• 如果 UV 坐标是 (0.5, 0.5)，就表示采样纹理的正中心像素；如果是 (1.5, 0.5)，则表示纹理水平重复一次后的中心位置（纹理重复采样）。

三、Shader 中的应用

在 GLSL 着色器中，UV 坐标通常由顶点着色器（Vertex Shader）传递给片段着色器（Fragment Shader），核心流程如下：

1. 顶点着色器接收模型顶点的 UV 数据，直接传递给片段着色器（无需复杂计算）：

// 顶点着色器
varying vec2 vUv; // 传递给片段着色器的 UV 变量

void main() {
    vUv = uv; // 直接传递
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

2. 片段着色器通过 UV 坐标采样纹理，得到像素颜色：

// 片段着色器
varying vec2 vUv; // 从顶点着色器传入的 UV 坐标

void main() {
    gl_FragColor = vec4(vUv, 1.0, 1.0);
}

四、常见拓展用法

1. 纹理重复/平铺：将 UV 坐标乘以一个大于 1 的值，实现纹理重复，例如 vUv * 5.0 会让纹理在横竖方向各重复 5 次。
2. 纹理偏移：对 UV 坐标进行加减运算，例如 vUv + vec2(0.2, 0.1) 会让纹理整体偏移。
3. UV 动画：在片段着色器中给 UV 坐标叠加时间变量，实现纹理滚动、流动效果，例如vUv.x += uTime * 0.1。
4. 非纹理用途：UV 坐标也可以脱离纹理使用，比如直接用 U、V 值作为颜色的 RGB 分量，实现渐变效果：

   gl_FragColor = vec4(vUv.x, vUv.y, 0.5, 1.0); // U→红，V→绿

五、常见问题

• UV 拉伸：模型顶点 UV 分配不合理时，纹理会出现拉伸变形，需要在建模软件（如 Blender）中对 UV 进行展平优化。
• UV 翻转：如果纹理显示上下颠倒，通常是 V 轴方向不一致导致，在 Shader 中用 1.0 - vUv.y 即可修正。