GLSL 内置函数
texture2D()
在给定的 0 到 1 坐标处读取图片（纹理）的颜色。先改变坐标再读取，就能实现扭曲、滚动和平铺等效果。
函数签名
vec4 texture2D(sampler2D sampler, vec2 coord)
vec4 texture2D(sampler2D sampler, vec2 coord, float bias)参数
- sampler
- 纹理，用 uniform sampler2D 声明。
- coord
- 读取的位置：(0, 0) 是左下角，(1, 1) 是右上角。
- bias
- 可选的 mipmap 层级偏移，很少用到。
返回值
一个 vec4 颜色（红、绿、蓝、透明度），每个分量在 0.0 到 1.0 之间。
在线示例
修改右侧代码，左侧预览会实时更新。
工作原理
纹理是 GPU 可以读取的一张图片。texture2D(sampler, coord) 返回位置 coord 处的颜色，(0.0, 0.0) 是图片左下角，(1.0, 1.0) 是右上角。
关键在于读取之前先改变 coord：
| 坐标 | 效果 |
|---|---|
uv | 原样显示 |
uv + offset | 平移 |
fract(uv * 2.0) | 重复 2 x 2 |
uv + sin(...) * 0.01 | 波浪扭曲 |
示例上半部分做了波浪扭曲，下半部分做了平铺。
本页的在线示例会提供一张测试图作为 u_texture。在 Playground 中，需要在纹理面板上传图片，并把它的 uniform 名改成 u_texture（默认叫 u_texture0）。
常见用法
- 后期处理：读取渲染好的画面，再做模糊、调色或扭曲。
- 图片特效：水波纹、像素化（
floor(uv * n) / n）、色差（在略微不同的坐标分别读取 r、g、b）。 - 查找表：把渐变或噪声存进纹理，直接读取而不是实时计算。
常见错误
- 写成
texture而不是texture2D。WebGL 1（GLSL ES 1.00）中函数名是texture2D，texture只在 WebGL 2 中存在。 - 坐标超出 0 到 1。得到什么取决于环绕模式：重复、夹紧到边缘或镜像。
- 图片上下颠倒。图片文件从左上角开始，GL 纹理从左下角开始；如果图片倒了，用
1.0 - uv.y翻转。