OpenGL ES 2.0 (iOS) 中的 2D 绘图答案

【问题标题】：2D Drawing In OpenGL ES 2.0 (iOS)OpenGL ES 2.0 (iOS) 中的 2D 绘图
【发布时间】：2010-12-26 17:35:10
【问题描述】：

我正在学习如何在 iOS 上使用 OpenGL ES 2.0。现在我只想做一些基本的 2D 动画（例如，在屏幕上移动一个矩形并改变它的大小）。我从 Apple 在 Xcode 中提供的 OpenGL ES 项目模板开始。我的绘图代码如下所示：

static GLfloat squareVertices[] = {
    -0.5f, -0.33f,
    0.5f, -0.33f,
    -0.5f,  0.33f,
    0.5f,  0.33f
 };

// Update attribute values.
glVertexAttribPointer(VERTEX_ATTR, 2, GL_FLOAT, 0, 0, squareVertices);
glEnableVertexAttribArray(VERTEX_ATTR);

glVertexAttribPointer(COLOR_ATTR, 4, GL_UNSIGNED_BYTE, 1, 0, squareColors);
glEnableVertexAttribArray(COLOR_ATTR);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 5);

现在这将在屏幕中间绘制一个nice rectangle。但是如果我开始通过添加以下代码来更改矩形，它开始为look funky:

squareVertices[5] -= .001;
squareVertices[7] -= .001;

就好像矩形的一部分附加到屏幕的中心。我对 OpenGL ES 完全陌生，所以我确信我的问题很明显。我还假设这与 OpenGL ES 作为 3D 图形库有关，我试图将其视为 2D 空间。所以我的问题是：在 OpenGL ES 2.0 中绘制和动画 2D 对象的最佳方法是什么？我在网上看到了一些关于 OpenGL ES 1.1 的东西，但这对我没有多大帮助。是他们在 OpenGL ES 2.0 中进行 2D 绘图的特殊技术，还是有某种 2D 绘图模式？

任何指导将不胜感激。

【问题讨论】：

标签： ios opengl-es drawing 2d opengl-es-2.0

【解决方案1】：

@macinjosh：这是对那些对答案感兴趣的人的更新问题的回应。我猜你自 10 年 12 月发帖以来已经获得了更多的知识！

OpenGL 顶点是 3D 的，而不是 2D 的。说实话，它们实际上是 4D 的，因为它们也包含一个 'w' 分量，但现在只需将其视为值 1.0，就像一个同质向量。

由于它们的 3D 特性，除非您在着色器中添加“z”组件，否则您必须将其指定为顶点属性。

【讨论】：

【解决方案2】：

因为你有一个“3”作为 glVertexAttribPointer 的第三个参数。我相信您可以将其设置为 2，但我还没有在 GL 中尝试过。我的猜测是缺少的 z 轴将在内部填充为“0”（但再次尝试看看！）。在内部，它可能都是 4 个浮点向量，其中第 4 个 ('w') 参数用于齐次矩阵乘法 gubbins。

如果您是在移动设备上执行此操作，您可能还希望研究定点数学（在某些没有浮点 co-pro 的设备上更快）以及更高效的顶点缓冲区对象在许多机器上。另外，一个固定的顶点格式，如

glInterleavedArrays(format_code, stride, data)

可能会证明效率更高，因为设备可能针对您决定使用的任何“format_code”优化了代码路径。

【讨论】：

【解决方案3】：

我是 OpenGL 新手，但顶点不需要 3 个浮点数，每个轴一个：X、Y、Z？

所以，第一个顶点数组将是：

( -0.50f, -0.33f, 0.50f) 
( -0.33f, -0.50f, 0.33f)
(  0.50f,  0.33f, ?????)

第二个是：

( -0.50f, -0.33f, 0.00f )
(  0.50f, -0.33f, 0.00f )
( -0.50f,  0.33f, 0.00f )
(  0.50f,  0.33f, 0.00f )

【讨论】：

那个博客很棒，但是这个系列在第四章之后就结束了。当我意识到他停下来时，我真的很沮丧:(

【解决方案4】：

玩了一会儿后，我将绘图代码更改为：

static GLfloat squareVertices[12] = {
    -0.5f, -0.33f, 0.0,
    0.5f, -0.33f, 0.0,
    -0.5f, 0.33f, 0.0,
    0.5f, 0.33f, 0.0
};

// Update attribute values.
glVertexAttribPointer(VERTEX_ATTR, 3, GL_FLOAT, 0, 0, squareVertices);
glEnableVertexAttribArray(VERTEX_ATTR);

glVertexAttribPointer(COLOR_ATTR, 4, GL_UNSIGNED_BYTE, 1, 0, squareColors);
glEnableVertexAttribArray(COLOR_ATTR);

squareVertices[7] -= .001;
squareVertices[10] -= .001;

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

向每个顶点添加第三个 0.0 浮点数似乎可以解决问题。我不清楚为什么会这样，如果有人能解释一下，我会很感激。

【讨论】：