javascript - WebGL texImage2D : Conversion requires pixel reformatting

Question

这是我在这个页面上的第一个问题，因为我没有找到有这个错误的人，我希望我能在这个问题上解释一下自己。

嗯，WebGl 纹理有问题，我得到下一个错误:错误:WebGL:texImage2D:转换需要重新格式化像素。

这发生在这里:

function initSueloTextures(gl, sueloParametros) {
  sueloParametros.textureSuelo = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, sueloParametros.textureSuelo);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
          new Uint8Array([0, 0, 255, 255]));
  var sueloImage = new Image();
  sueloImage.onload = function() { handleTextureLoaded(gl, sueloImage, sueloParametros.textureSuelo); }
  sueloImage.src = "resources/marbletexture.png";
}



function handleTextureLoaded(gl, image, texture) {
  console.log("handleTextureLoaded, image = " + image);
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
    gl.UNSIGNED_BYTE, image);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.bindTexture(gl.TEXTURE_2D, null);
}

错误出现在 handleTextureLoaded texImage2D 中。我认为我使用的变量不是问题，因为我将它们更改为我创建的另一个全局变量来测试它，但错误仍然出现。

我使用的是最新版本的 Firefox。

感谢您的宝贵时间。

Answer 1

错误是什么？检查浏览器的 JavaScript 控制台

如果您加载的图像在两个维度上都不是 2 的幂，您将收到错误和警告。调用 gl.generateMipmap 时出现一个错误，因为在 WebGL1 中您无法为非 2 的幂次方纹理生成 mip。当您尝试渲染它时也会发出警告，因为如果您有非 2 的幂次方纹理，则必须将 TEXTURE_MIN_FILTER 设置为 LINEAR 或 NEAREST 否则无法渲染。

2 的幂是 1、2、4、8、16、32、64、128、256 等...

顺便说一句，在 console.log

中使用逗号而不是加号可能更有用

console.log("handleTextureLoaded, image =", image);

代替

console.log("handleTextureLoaded, image = " + image);

比较结果:

原因是用一个加号将图像转换为字符串，与 "handleTextureLoaded, image = " 连接，然后发送到 console.log 所以所有 console.log 看到的是单个字符串。使用逗号，实际图像将发送到 console.log，因此 console.log 可以发挥更多作用