六种解决 OpenGL ES GLSL 中图像倒置的方法

IOS

2024-01-09 21:24:28

OpenGL ES GLSL 图像倒置的 6 种翻转解决方案

引言

在处理 OpenGL ES GLSL 中的图像时，遇到图像倒置的情况并不少见。这通常是由纹理坐标和屏幕坐标原点之间的差异造成的。本文将探讨六种翻转图像的有效解决方案，帮助您轻松解决此问题。

原因

OpenGL ES 纹理坐标的原点位于左下角，而屏幕坐标的原点位于左上角。这种差异会导致图像加载时出现倒置。

解决方案

1. 翻转纹理坐标

通过翻转纹理坐标中的 y 轴分量，可以轻松地纠正图像的倒置。在片段着色器中，将纹理坐标 (s, t) 修改为 (s, 1 - t)。

out vec2 v_texCoord;

void main() {
  v_texCoord = vec2(s, 1 - t);
}

2. 使用翻转纹理

OpenGL ES 提供了 GL_TEXTURE_FLIP_Y 选项，它可以自动翻转纹理。通过将此选项应用于纹理，您可以轻松纠正图像的倒置。

glBindTexture(GL_TEXTURE_2D, textureId);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_FLIP_Y, GL_TRUE);

3. 创建倒置纹理

您可以创建纹理数据的倒置副本，然后使用该副本作为纹理。这涉及将纹理数据逐行翻转。

// 假设纹理数据存储在 data 数组中
for (int i = 0; i < height / 2; i++) {
  for (int j = 0; j < width; j++) {
    std::swap(data[i * width + j], data[(height - i - 1) * width + j]);
  }
}

4. 渲染到帧缓冲区并翻转

创建帧缓冲区对象 (FBO)，并将其作为渲染目标。渲染场景，然后使用 glCopyTexImage2D() 函数将帧缓冲区的内容复制到纹理中。在复制过程中，可以指定 GL_FLIP_Y 标志以翻转图像。

// 假设 FBO 的 ID 为 fboId
glBindFramebuffer(GL_FRAMEBUFFER, fboId);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, textureId, 0);
glDrawBuffer(GL_COLOR_ATTACHMENT0);

// 渲染场景

glCopyTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 0, 0, width, height, GL_FLIP_Y);

5. 使用顶点着色器

在顶点着色器中，可以通过以下方式将纹理坐标翻转：

in vec2 v_texCoord;

void main() {
  v_texCoord.y = 1 - v_texCoord.y;
  gl_Position = vec4(position, 1.0);
}

6. 在 CPU 中翻转图像

在将纹理数据上传到 GPU 之前，可以在 CPU 中直接翻转图像数据。这涉及遍历纹理数据并逐行翻转。

for (int i = 0; i < height / 2; i++) {
  for (int j = 0; j < width; j++) {
    std::swap(data[i * width + j], data[(height - i - 1) * width + j]);
  }
}