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

Posted 2023-03-07

【中文标题】OpenGL ES 2.0 (iOS) 中的 2D 绘图

【英文标题】：2D Drawing In OpenGL ES 2.0 (iOS)

【发布时间】：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 绘图模式？

任何指导将不胜感激。

【参考方案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 浮点数似乎可以解决问题。我不清楚为什么会这样，如果有人能解释一下，我会很感激。