创建期间从颜色缓冲区更新 WebGL 纹理失败

Question

我有一个 WebGL 纹理，最初填充了图像中的像素。现在我试图用数组中的纯色清除它。这是我创建 2D 纹理的函数：

function createGLTexture(gl, format,intFormat, w, h,wrapType, flip, genMipmaps, data)
{
  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, flip);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S,wrapType);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T,wrapType);
  if (genMipmaps === true)
  {
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
    gl.texStorage2D(gl.TEXTURE_2D, 1, intFormat, w, h);
  } else
  {
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texStorage2D(gl.TEXTURE_2D, 1, intFormat, w, h);
  }

  if (data != null) {
    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, format, gl.UNSIGNED_BYTE, data);
  }

  if (genMipmaps === true) {
    gl.generateMipmap(gl.TEXTURE_2D);
  }

   return texture;
}

这是用颜色初始化纹理的代码：

  //img - image previously loaded
  var colorData = new Uint8Array(img.width * img.height * 3);
  for(var i = 0; i < colorData.length;i+=3)
  {
  colorData[i] = 0;
  colorData[i + 1] = 0;
  colorData[i + 2] = 255;
  } 
  var tex = createGLTexture(gl,gl.RGB,gl.RGB8,img.width,img.height,gl.CLAMP_TO_EDGE,false,false,colorData);

调用

createGLTexture

函数会导致以下错误：

未捕获类型错误：无法执行“texSubImage2D” “WebGL2RenderingContext”：重载解析失败。at 创建GL纹理

我可以看到我在数据/纹理大小方面做错的任何事情。但我尝试的是在从图像源初始化纹理后立即用颜色更新纹理：

 function updateGLTexture(gl,texture, format,w,h, genMipmaps, data)
 {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0,w,h, format, gl.UNSIGNED_BYTE, data);
    if (genMipmaps === true)
    {
      gl.generateMipmap(gl.TEXTURE_2D);
    }
    gl.bindTexture(gl.TEXTURE_2D, null);
 }

当我使用

updateGLTexture()

用颜色更新纹理时，它可以工作。我正在将表面清除为蓝色。为什么？为什么

texSubImage2D

不允许在纹理创建时从颜色缓冲区进行更新？调用

updateGLTexture()

与使用

texSubImage2D

分配存储空间后调用

texStorage2D

不一样吗？

Answer 1

您遇到的错误暗示您没有向

texSubImage2D

函数提供正确的参数。 WebGL/WebGL2 中的某些函数是“重载”，这实际上意味着根据传递到函数中的参数类型的数量和组合，参数可能会得到不同的解释。

从您的错误消息来看，您似乎正在使用WebGL2。 WebGL2 标准为 texSubImage2D 定义了

三个重载

：

undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, [AllowShared] ArrayBufferView srcData, unsigned long long srcOffset)
undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, TexImageSource source)
undefined texSubImage2D(GLenum target, GLint level, GLint xoffset, GLint yoffset, GLsizei width, GLsizei height, GLenum format, GLenum type, GLintptr offset)

但是，给出错误的代码是尝试使用仅存在于 WebGL1 中的重载，该重载随后在 WebGL2 中被删除。您提供的有效代码使用了 WebGL2 支持的重载（我的列表中的第一个）。如果您更改了原始代码以包含

updateGLTexture

函数中的正确函数重载，它应该会再次工作。

不幸的是，似乎较旧的 WebGL1 版本的 API 在 MDN 上显示得非常显着，而没有太多说明，因此这可能会导致一些混乱。需要注意的是，MDN 上列出的对 WebGL1 或 WebGL2 重载的支持是排他性的，而不是包容性的——也就是说，WebGL1 仅支持 WebGL1 重载，而 WebGL2 仅支持 WebGL2 重载。

对于使用 WebGL1 的其他人，如果您确实使用此问题中的重载，则应注意该特定重载的最后一个参数必须是图像（例如

ImageData

），而不是

TypedArray

或

ArrayBuffer

。