UV 可视化

学习目标

本案例通过直接将 vUv 坐标映射为颜色，帮助你直观理解纹理坐标在屏幕空间中的分布方式。

---

核心概念详解

1. vUv 的定义

vUv 表示每个片元的 UV 坐标：

- vUv.x 表示水平方向位置（左→右为 0→1）

- vUv.y 表示垂直方向位置（下→上为 0→1）

---

2. 映射为颜色值

我们可以将 vUv 作为颜色直接显示出来：

`glsl

vec3 color = vec3(vUv, 0.0);

`

- 红色表示横向位置

- 绿色表示纵向位置

- 蓝色设为 0，不参与可视化

---

3. 输出颜色

`glsl

gl_FragColor = vec4(color, 1.0);

`

这样就能在屏幕上看到从左到右、从下到上的渐变色，用于调试、定位 UV 错误等场景。