WebGLRenderingContext.texImage2D 没有实现接口 ArrayBufferViewOrNull

Question

我正在处理一个 WebGL 项目，我所有的纹理都渲染得很好。 当我想实现一个立方体贴图时，我开始收到这种类型的错误。 Argument 9 of WebGLRenderingContext.texImage2D does not implement 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

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

在 WebGL2 中，您使用的表单存在，但请注意 WebGL2 于 2017 年 1 月仅在 Chrome 和 Firefox 上发布。 它在包括 Safari iOS 在内的 Safari 中尚不可用。