javascript - WebGLRenderingContext.texImage2D 未实现接口(interface) ArrayBufferViewOrNull

Question

我正在开发一个 WebGL 项目，我的所有纹理都渲染得很好。 当我想实现立方体贴图时，我开始遇到这种类型的错误。 WebGLRenderingContext.texImage2D 的参数 9 并未在所有浏览器中实现接口(interface) ArrayBufferViewOrNull。。 我用来加载纹理的代码片段是，

    var cubeMap = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_CUBE_MAP, cubeMap);

    for(var i = 0; i < 6; i++)
    {   
        var img = cubeMapArr[i];
        console.log(img);
        gl.texImage2D(
            gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 
            0, gl.RGB, 1024, 1024, 0, gl.RGB, gl.UNSIGNED_BYTE,img);
    }

cubeMapArr 保存 HTMLImageElements。 关于这个问题有什么想法或经验吗？ 使用 gl.texImage2D() 例如，

gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,normalMapTexture);

工作没有任何问题。 normalMapTexture 再次保存一个 HTMLImageElement。

谢谢。

Answer 1

在WebGL中有两种形式的texImage2D

gl.texImage2D(bindPoint, mipLevel, internalFormat, format, type, HTMLElement);

其中 HTMLElement 是 HTMLImageElement、HTMLVideoElement 或 HTMLCanvasElement

然后就是

gl.texImage2D(bindPoint, mipLevel, internalFormat, width, height, border, 
              format, type, ArrayBufferViewOrNull);

您的代码正在将 HTMLImageElement 传递给函数的第二种形式，这就是为什么它提示它不是 ArrayBufferViewOrNull

换句话说，从对 gl.texImage2D 的调用中删除 1024, 1024, 0,

在 WebGL2 中，您使用的表单存在，但请注意，WebGL2 刚刚于 2021 年 9 月在 Safari 15 上发布。