WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

Question

using twgl.js, I keep getting this error when I call twgl.createTexture. Im making a map using simplex noise from noisejs, and each pixel on the screen has a height value and a moisture value. It worked fine with just a height value, gl.LUMINANCE, and adjusted size and math, but when I try to add that second component it all falls apart.

last thing: I have an object named 'map' which wraps the functionality of generation

heres the relevant areas of code:

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,
        })
    },
}

completely lost and chatgpt wont help either.

Answer 1

figured it out. gl.RG and gl.RG32F are not valid formats in WebGL 1.0. Instead had to use gl.LUMINANCE_ALPHA