WebGL2 3D Texture Image coming upside-down, how to flip the output?

Question

Originally I was working with 2D Textures and everything was fine because we are allowed to use UNPACK_FLIP_Y_WEBGL. However, in WebGL2 we are now able to utilize 3D Textures. The problem is that my output is still upside-down and now the UNPACK_FLIP_Y_WEBGL is flagged as illegal for 3D Textures.

Does any one know how to fix this?

Below is some sample code that is similar to the config setup I have for loading the 3D Texture (if I was loading a 2D texture then this would work as long as I have the pixelStorei set to UNPACK_FLIP_Y_WEBGL).

texImage3D: [
            gl.TEXTURE_3D, // target
            0, // mip level
            gl.RGB8, // sized (internal) format
            size, // width
            size, // height
            size, // depth
            0, // border
            gl.RGB, // base format
            gl.UNSIGNED_BYTE, // type
            data, // Uint8Array color look up table
        ]

texParameteri3D: [
            [gl.TEXTURE_3D, gl.TEXTURE_BASE_LEVEL, 0],
            [gl.TEXTURE_3D, gl.TEXTURE_MAX_LEVEL, 0],
            [gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR],
            [gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR],
        ]

pixelStorei3D: [gl.UNPACK_ALIGNMENT, 1]

gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS);
gl.getParameter(gl.MAX_FRAGMENT_UNIFORM_VECTORS);

Answer 1

Found out that in WebGL tiles are rendered from bottom-left positioning. Meaning we need to flip the Y value. So in the vertex shader file we can just add some math to it to fix this. I don't know why the UNPACK_FLIP_Y_WEBGL was made to do this and then not supported for 3D Textures when the fix and what that UNPACK does is super simple. You just need to do 1 - y in the vertex tile position value.

#version 300 es

in vec2 tile_position;
in vec4 vertex_position;

out vec2 vertex_tile_position;

void main() {
    vertex_tile_position = vec2(tile_position.s, 1.0 - tile_position.t);
    gl_Position = vec4(vertex_position);
}