WebGL2 3D Texture Image 上下顛倒，如何翻轉output？

Question

最初我正在使用 2D 紋理，一切都很好，因為我們被允許使用UNPACK_FLIP_Y_WEBGL 。 但是，在 WebGL2 中，我們現在可以使用 3D 紋理。 問題是我的 output 仍然是顛倒的，現在UNPACK_FLIP_Y_WEBGL對於 3D 紋理被標記為illegal 。

有誰知道如何解決這一問題？

下面是一些示例代碼，它類似於我用於加載 3D 紋理的配置設置（如果我正在加載 2D 紋理，那么只要我將 pixelStorei 設置為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

發現在 WebGL 中，圖塊是從左下角定位呈現的。 這意味着我們需要翻轉 Y 值。 所以在頂點着色器文件中我們可以添加一些數學來解決這個問題。 我不知道為什么UNPACK_FLIP_Y_WEBGL被用來做這個然后不支持 3D 紋理當修復和 UNPACK 所做的事情非常簡單時。 您只需要在頂點平鋪 position 值中執行1 - y 。

#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);
}