WebGL：INVALID_OPERATION：texImage2D：ArrayBufferView 对于请求来说不够大

Question

使用 twgl.js，当我调用

twgl.createTexture

时，我不断收到此错误。我使用来自noisejs的单纯形噪声制作地图，屏幕上的每个像素都有一个高度值和一个湿度值。只需一个高度值，

gl.LUMINANCE

，并调整大小和数学，它就可以很好地工作，但是当我尝试添加第二个组件时，它全部崩溃了。

最后一件事：我有一个名为“map”的对象，它包装了生成的功能

以下是相关代码区域：

const map = {
    gen_map(seed) {

        // Generate a map/texture of height and moisture noise

        this.raw_data = new Float32Array(innerWidth * innerHeight * 2)

        for (let x = 0; x < innerWidth; ++x) {
            for (let y = 0; y < innerHeight; ++y) {

                // Generate height      ----    ----    ----

                height = ...

                this.raw_data[(y * innerWidth + x) * 2] = height

                // Generate moisture    ----    ----    ----

                let moisture = ...

                this.raw_data[(y * innerWidth + x) * 2 + 1] = moisture
            }
        }

        // didnt work either -> this.gl.pixelStorei(this.gl.UNPACK_ALIGNMENT, 1)

        // Error occurs here
        this.texture = twgl.createTexture(this.gl, {
            src: this.raw_data,
            width: innerWidth,
            height: innerHeight,
            format: this.gl.RG, // Also tried this.gl.RG32F, and tried interalFormat aswell
            type: this.gl.FLOAT,
        })
    },
}

完全迷失，chatgpt 也无济于事。

Answer 1

想通了。

gl.RG

和

gl.RG32F

不是 WebGL 1.0 中的有效格式。相反必须使用

gl.LUMINANCE_ALPHA