javascript - 为什么从图像加载数据时，我从texSubImage3D收到错误消息

我有一个尺寸为128x32128（相当于251 128x128层）的PNG文件，当我尝试以下操作时：

gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.SRGB8_ALPHA8, 128, 128, 251)
gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, 128, 128, 251, gl.RGBA, gl.UNSIGNED_BYTE, imageElement)
// imageElement.src = 128x32128.png

我在阅读WebGL: INVALID_VALUE: texSubImage3D: width, height or depth out of range时出现浏览器错误

但是，如果我尝试使用另一幅尺寸为128x8192的图像（相当于64层的128x128）非常相似，则不会出现错误：

gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.SRGB8_ALPHA8, 128, 128, 32)
gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, 128, 128, 32, gl.RGBA, gl.UNSIGNED_BYTE, imageElement)
// imageElement.src = 128x8192.png

但是，如果我尝试对原始图像使用相同的代码，则会得到相同的错误：

gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.SRGB8_ALPHA8, 128, 128, 32)
gl.texSubImage3D(gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, 128, 128, 32, gl.RGBA, gl.UNSIGNED_BYTE, imageElement)
// imageElement.src = 128x32128.png

这没有任何意义。当然这是一个实现错误，因为从示例2更改为示例3的唯一内容是图像，而不是texSubImage3D的参数。

浏览器：Windows 7 x64上的Chrome v67

最佳答案

这似乎是Chrome中的错误，因为它可以在Firefox中运行

const ctx = document.createElement('canvas').getContext("2d");
const gl = document.createElement('canvas').getContext("webgl2");

test(1);
test(128);
test(129);

function test(slices) {
  log('slices:', slices);

  const height = 128 * slices;

  ctx.canvas.width = 128;
  ctx.canvas.height = height;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(128, height);
  ctx.moveTo(128, height);
  ctx.lineTo(0, 128);
  ctx.stroke();
  //document.body.appendChild(ctx.canvas);

  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D_ARRAY, tex);
  log("gl error:", gl.getError());
  gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, 128, 128, slices);
  log("gl error:", gl.getError());

  gl.texSubImage3D(
     gl.TEXTURE_2D_ARRAY, // GLenum target,
     0, // GLint level,
     0, // GLint xoffset,
     0, // GLint yoffset,
     0, // GLint zoffset,
     128, // GLsizei width,
     128, // GLsizei height,
     slices, // GLsizei depth,
     gl.RGBA, // GLenum format,
     gl.UNSIGNED_BYTE, // GLenum type,
     ctx.canvas); // TexImageSource source

  log("gl error:", gl.getError());
  log('.');
}

function log(...args) {
  const div = document.createElement('div');
  div.textContent = [...args].join(' ');
  document.body.appendChild(div);
}

Filed a bug

关于javascript - 为什么从图像加载数据时，我从texSubImage3D收到错误消息，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51120879/