使用Fetch API加载WebGL纹理图片显示异常问题

针对你遇到的WebGL纹理加载后显示异常的问题，即使资源已成功加载、texImage2D也支持对应的图像源，可从以下几个常见排查方向入手：

1. 匹配图像通道与纹理格式 #

如果你的PNG图片包含Alpha通道（RGBA），但代码中使用gl.RGB作为纹理格式，会导致颜色解析异常。需将纹理格式改为gl.RGBA，保持内部格式与格式参数一致：

修改后的ImageBitmap加载代码： #

const response = await fetch("./assets/texture.png");
const imageBlob = await response.blob();
const imageBitmap = await createImageBitmap(imageBlob);

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
// 改为RGBA格式匹配带Alpha的图片
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageBitmap);

2. 修正纹理坐标Y轴翻转问题 #

图片的坐标系Y轴是从上到下，而WebGL纹理坐标系Y轴是从下到上，若着色器未处理这个差异，会导致纹理显示颠倒或异常。可通过两种方式解决：

• 在createImageBitmap时添加翻转参数：

  const imageBitmap = await createImageBitmap(imageBlob, { imageOrientation: 'flipY' });
  

• 或者在顶点着色器中调整UV的Y值：

  // 原UV传递逻辑修改
  varying vec2 vUv;
  vUv.y = 1.0 - vUv.y;
  

3. 设置纹理Wrap参数 #

默认的纹理重复模式（gl.REPEAT）在非2的幂次尺寸的图片上可能出现兼容性问题，建议显式设置为边缘截断模式：

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);

4. 检查WebGL错误 #

在texImage2D调用后添加错误检查，定位具体问题：

gl.texImage2D(...);
const error = gl.getError();
if (error !== gl.NO_ERROR) {
  console.error('WebGL错误:', error);
}

常见错误如INVALID_VALUE可能是格式不匹配，INVALID_OPERATION可能是图像源未就绪（但你的情况已确认资源加载完成，大概率是格式问题）。

5. 确认着色器纹理采样正确 #

确保片元着色器中正确采样纹理，示例：

precision mediump float;
uniform sampler2D uTexture;
varying vec2 vUv;

void main() {
  gl_FragColor = texture2D(uTexture, vUv);
}

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