超越表面：深入 WebGL 纹理的 WRAP 与多纹理奥秘

2023-09-17 13:26:15

揭开 WRAP 的神秘面纱

纹理的 WRAP 模式决定了纹理坐标超出行范围后的行为。共有三种 WRAP 模式：

CLAMP_TO_EDGE： 将纹理坐标限制在纹理范围之内，超出范围则以边缘像素颜色填充。
REPEAT： 重复纹理，超出范围后从纹理另一端继续。
MIRRORED_REPEAT： 重复纹理，超出范围后镜像重复。

WRAP 实战

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

上面的代码设置了纹理的水平（S）和垂直（T）WRAP 模式为 REPEAT 和 MIRRORED_REPEAT。

掌握多纹理的强大

多纹理允许在一个着色器中使用多个纹理。这对于创建更复杂的着色效果至关重要，例如凹凸贴图和法线贴图。

多纹理着色器代码

#version 300 es

precision mediump float;

in vec3 position;
in vec2 uv;

uniform sampler2D tex1;
uniform sampler2D tex2;

out vec4 fragColor;

void main() {
  vec4 color1 = texture(tex1, uv);
  vec4 color2 = texture(tex2, uv);

  fragColor = color1 * color2;
}