WebGL2 3D纹理图像颠倒过来，如何翻转输出?

Question

最初我使用的是2D纹理，一切都很好，因为我们允许使用UNPACK_FLIP_Y_WEBGL。然而，在WebGL2中，我们现在能够使用3D纹理。问题是，我的输出仍然是颠倒的，现在UNPACK_FLIP_Y_WEBGL被标记为illegal的3D纹理。

有人知道如何解决这个问题吗?

下面是一些示例代码，类似于我加载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中tile是从左下定位呈现的。这意味着我们需要翻转Y值。在顶点着色器文件中，我们可以添加一些数学运算来修正这个问题。我不知道为什么UNPACK_FLIP_Y_WEBGL是这样做的，然后不支持3D纹理，当修复和UNPACK做的是超级简单。你只需要在顶点贴图位置值中执行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);
}