纹理配置错误或异常行为：背景矩形纹理映射问题求助

我来帮你解决这个头疼的纹理显示异常问题～你遇到的随机绘制、旋转或缩放效果，90%是因为纹理坐标（texCoord）和矩形顶点的对应关系没匹配对，再加上可能纹理参数设置不到位。咱们一步步拆解解决：

核心问题：纹理坐标必须和顶点一一对应 #

因为你用两个三角形拼矩形，每个顶点的纹理坐标必须精准对应图片的四个角落，不然纹理就会错位、拉伸甚至翻转。

假设你的矩形用裁剪空间坐标（和你顶点着色器里直接用aposition作为gl_Position匹配），四个顶点的正确对应关系应该是这样：

示例顶点&纹理坐标数据 #

你可以参考这个格式来定义你的顶点数据（以JavaScript为例）：

// 打包的顶点数据：[位置x, 位置y, 纹理x, 纹理y]
const vertexData = new Float32Array([
  -1.0, -1.0,  0.0, 0.0, // 左下
   1.0, -1.0,  1.0, 0.0, // 右下
  -1.0,  1.0,  0.0, 1.0, // 左上
   1.0,  1.0,  1.0, 1.0  // 右上
]);

// 两个三角形的索引（如果用索引缓冲）
const indices = new Uint16Array([
  0, 1, 2, // 第一个三角：左下→右下→左上
  2, 1, 3  // 第二个三角：左上→右下→右上
]);

补全片元着色器（你没贴，但这很关键） #

要正确采样纹理，片元着色器得写对：

const fsBSource = `
precision mediump float;
varying vec2 vtextCoord;
uniform sampler2D uTexture;

void main() {
  // 用纹理坐标采样图片
  gl_FragColor = texture2D(uTexture, vtextCoord);
}
`;

纹理参数设置避免异常 #

WebGL默认的纹理参数可能导致拉伸或重复，建议创建纹理时手动设置：

function createTexture(gl, image) {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  
  // 禁止纹理边缘重复，用线性过滤避免锯齿
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  
  // 处理图片Y轴翻转（WebGL纹理原点在底部，图片原点在顶部）
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  
  // 上传图片数据
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  return texture;
}

顶点属性绑定要准确 #

绑定aposition和atexCoord时，要确保步长（stride）和偏移（offset）正确：

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

// 设置aposition属性
const aposLoc = gl.getAttribLocation(program, 'aposition');
gl.enableVertexAttribArray(aposLoc);
// 每个位置占2个float，步长是4个float（2位置+2纹理）×4字节=16，偏移0
gl.vertexAttribPointer(aposLoc, 2, gl.FLOAT, false, 16, 0);

// 设置atexCoord属性
const texCoordLoc = gl.getAttribLocation(program, 'atexCoord');
gl.enableVertexAttribArray(texCoordLoc);
// 纹理坐标从第2个float开始，偏移是2×4=8字节
gl.vertexAttribPointer(texCoordLoc, 2, gl.FLOAT, false, 16, 8);

// 绘制两个三角形
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

常见坑排查 #

1. 图片上下颠倒：如果发现纹理翻转，要么开启gl.UNPACK_FLIP_Y_WEBGL（上面代码里已经加了），要么在片元着色器里用1.0 - vtextCoord.y作为纹理Y坐标。
2. 部分区域不显示：检查是否开启了背面剔除（gl.enable(gl.CULL_FACE)），如果开启了，要确保顶点的绘制顺序是顺时针或逆时针统一。
3. 纹理拉伸变形：确认图片的宽高比和矩形的宽高比一致，或者用纹理矩阵做适配（不过先确保基础映射正确）。

按照上面的步骤调整后，纹理应该就能正确填充你的矩形背景啦～

内容的提问来源于stack exchange，提问作者Volodymyr Samoilenko