使用 OpenGL ES2.0 绘制纹理（或如何使用 GPU 进行 YUV -> RGB）答案

【问题标题】：Drawing Textures Using OpenGL ES2.0 (or how to use GPU for YUV -> RGB)使用 OpenGL ES2.0 绘制纹理（或如何使用 GPU 进行 YUV -> RGB）
【发布时间】：2013-03-06 11:07:25
【问题描述】：

我第一次尝试在 iOS 下使用 OpenGL，试图通过将 YUV 图像转换为 RGB 来渲染它们。我环顾四周，在这里和那里找到了一些示例，并且我计划使用 Apple 的 GLCameraRipple 示例代码中提供的顶点/片段着色器。我了解执行转换所需的数学。我无法理解 OpenGL API 以及如何在屏幕上简单地绘制 2D 纹理。

谁能说明使用 OpenGL 绘制纹理所需的高级步骤？如果我从概念上理解需要做什么，我希望我能够弄清楚细节。

据我所知，顶点着色器在片段着色器之前触发，顶点着色器对顶点进行操作，片段着色器对介于两者之间的所有内容进行操作。可变关键字用于将在顶点之间插值的数据发送到片段着色器。

这会产生一些问题：

是否需要传递一组代表纹理二维帧的顶点？
在传递顶点之前是否需要将 YUV 数据传递给片段着色器？
片段着色器如何使用插值坐标来访问适当的 YUV 样本？
如何访问最终结果？
将适当的数据传递给着色器后如何触发操作？

感谢您的宝贵时间。

【问题讨论】：

标签： ios opengl-es glsl textures shader

【解决方案1】：

我建议任何基本的 OpenGL 教程http://www.cs.washington.edu/education/courses/cse557/00wi/projects/impressionist/help.html 例如。另请查看 Kronos 小组的 opengl.org 网站。

在 OpenGL 中将图像绘制到屏幕上的标准方法是绘制两个带纹理的三角形（一个矩形），并将图像编码为纹理。顶点着色器趋向于非常标准化，并且变化不大（对于 99% 的情况）。您的图像处理，如波纹或颜色空间转换，都将在像素着色器中。

【讨论】：

【解决方案2】：

我能够绘制纹理。我在 UV 通道正确显示颜色以及方向/镜像问题方面遇到了一些问题，但这些问题超出了此问题的范围。

我是否需要传递一组代表纹理二维帧的顶点？

是的，纹理必须绘制在多边形的顶部，2D 区域可以表示为两个三角形。顶点缓冲区对象 (VBO) 可用于将顶点数组以及包含索引的互补数组传递到顶点数组中。 OpenGL 可以使用这些数据来绘制多边形。函数glGenBuffers、glBindBuffer 和glBufferData 可用于将此信息传递给OpenGL。

这个页面解释得很好：http://www.raywenderlich.com/3664/opengl-es-2-0-for-iphone-tutorial

在传递顶点之前是否需要将 YUV 数据传递给片段着色器？

不，可以在加载纹理之前将顶点传递到 OpenGL。然而，纹理必须在绘制多边形之前绑定并上传到 OpenGL。

片段着色器如何使用插值坐标来访问适当的 YUV 样本？

在我的实现中，每个顶点都会传递一个对应的纹理坐标。这将创建顶点位置到纹理坐标的映射。顶点着色器将此坐标输出为varying 参数。使用varying 关键字允许片段着色器通过插值接收每个像素的坐标值。然后片段着色器使用这个坐标来检索相应的纹理样本。在我的例子中，它使用坐标来检索 YUV 样本。

如何访问最终结果？

一般来说，操作的最终结果会被推送到帧缓冲区中（我不熟悉细节）。在使用 GLKView 的 iOS 5+ 中，我在 EAGLContext 实例上发送 presentRenderbuffer 消息以显示结果。

将适当的数据传递给着色器后如何触发操作？

绘图由 OpenGL 绘图函数之一触发。在将顶点/纹理坐标以及纹理数据上传到 OpenGL 并与着色器中的参数相关联后，我使用 glDrawElements 函数绘制多边形并在顶部渲染纹理。

【讨论】：