sampler2D 与 UV

到目前为止，我们的颜色都由数学公式直接生成。本节我们引入纹理采样：把一张纹理作为输入，在片元着色器中通过 sampler2D 与 uv 读取颜色。

为了让示例完全自包含，我们用 DataTexture 在代码里生成一张棋盘格纹理，你不需要额外准备图片文件。

目标

• 了解 sampler2D 的 uniform 写法
• 学会使用 texture2D(uTexture, vUv) 采样纹理（WebGL1 写法）
• 理解为什么 uv 必须通过 varying 传到片元阶段

思路

1. 在 JavaScript 中创建纹理对象并赋给 uniform：

uniforms: { uTexture: { value: texture } }

2. 在片元着色器中声明：

uniform sampler2D uTexture;

3. 使用 texture2D 采样：

vec3 tex = texture2D(uTexture, vUv).rgb;

观察与实验

示例中我们使用 uv = vUv * 4.0 来放大坐标范围，从而看到纹理重复的效果。纹理是否能重复，取决于 wrapS / wrapT 的设置。

动手练习

• 把 vUv * 4.0 改成 vUv * 1.0、vUv * 8.0，观察纹理密度变化
• 把 NearestFilter 改成 LinearFilter，观察棋盘格边缘的差异
• 修改纹理生成逻辑，把棋盘格改成水平/垂直渐变

小结

你已经掌握了“把一张纹理送进着色器并采样”的基本流程。下一节我们将进入光照：利用法线与光照方向计算漫反射，让物体更有立体感。