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 中有 2 种形式 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 上发布。

WebGLRenderingContext.texImage2D 没有实现接口 ArrayBufferViewOrNull

WebGLRenderingContext.texImage2D does not implement interface ArrayBufferViewOrNull

javascript

webgl