为何WebGL显示纹理呈条纹状？教程代码复现遇异常求助

嘿，我之前帮不少开发者排查过类似的WebGL纹理条纹问题，你的着色器代码看起来没什么毛病，问题大概率出在纹理加载、参数配置或者顶点纹理坐标的设置上，咱们一步步来解决：

1. 检查纹理参数设置 #

WebGL默认的纹理Wrap模式是REPEAT，如果你的纹理不是2的幂次方（比如图片尺寸不是128x128、256x256这类），或者纹理坐标不小心超出了[0,1]范围，就会出现重复拉伸的条纹。建议在创建纹理时强制设置以下参数：

// 绑定纹理后设置参数
gl.bindTexture(gl.TEXTURE_2D, yourTexture);
// 纹理超出坐标范围时，clamp到边缘像素
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);

CLAMP_TO_EDGE会让超出[0,1]的坐标直接取边缘像素，能有效避免不必要的重复条纹。

2. 确保纹理加载完成后再绘制 #

如果在图片还没加载完成就调用texImage2D上传纹理数据，WebGL会使用默认的黑色透明纹理，这也可能导致条纹出现。一定要在图片的onload回调里初始化纹理：

const textureImage = new Image();
textureImage.crossOrigin = ''; // 如果是跨域图片需要加这个
textureImage.onload = function() {
  // 这里执行纹理创建、绑定、参数设置和数据上传
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImage);
  // 上面的纹理参数设置也放在这里
  // 最后调用绘制函数
  renderScene();
};
textureImage.src = '你的纹理图片路径';

3. 核对顶点纹理坐标的正确性 #

检查你的顶点数据中a_TexCoord的取值是否正确覆盖了[0,1]范围，四边形的四个顶点纹理坐标应该对应图片的四个角，比如：

// 示例：左下(0,0)、右下(1,0)、右上(1,1)、左上(0,1)
const texCoordData = new Float32Array([
  0.0, 0.0,
  1.0, 0.0,
  1.0, 1.0,
  0.0, 1.0
]);

如果坐标顺序错了或者范围超出[0,1]，采样时就会出现拉伸或重复的条纹。

4. 确认纹理格式匹配 #

检查texImage2D的参数是否和图片实际格式一致，比如你的图片是RGBA格式，就要确保上传时用gl.RGBA作为内部格式和格式参数，不要和图片的实际通道数不匹配（比如用了gl.RGB上传RGBA图片）。

你的着色器代码是没问题的：顶点着色器正确传递了纹理坐标，片元着色器的采样逻辑也符合常规用法，所以重点排查上面几个JavaScript端的步骤，应该就能解决条纹问题啦！

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