iphone-OpenGL ES 教程-07--西蒙

最新推荐文章于 2024-09-19 11:05:44 发布

keivin2006

最新推荐文章于 2024-09-19 11:05:44 发布

阅读量3.7k

点赞数 4

分类专栏： IOS 文章标签： float translation object 工作 xcode buffer

IOS 专栏收录该内容

139 篇文章 0 订阅

订阅专栏

OpenGL ES 07 – 对物体进行独立的转换

起初，我想下一章介绍光照的，但是我又想到别的。我们依然有很多基本对象及转换没有完成，特别是我们在不同的坐标系中对不同的物体进行转换。

记得我们如何在整个屏幕内使用 glTranslatef() 和 glRotatef ()？如果我想作一些不同的事情，我就会使用一个很方便的函数： glLoadIdentity().但是 glLoadIdentity()是“代价昂贵”在屏幕渲染技术中，所以现在，我会采用更有效的方法。

要作到这点，我将介绍一个新的对象。我们将增加一个金字塔，并且使用 glTranslatef()来移动它，使用 glRotatef()来旋转它。和立方体独立开，并且不使用 glLoadIdentity() 来重置矩阵。

在我们的世界里增加一个金字塔
这不是仅仅增加一个三角形，让我们坚持使用3d物体，我们会增加一个金字塔（想像一下Giza平原上的大石头）

有件事，我在以前的教程中避免去说明的，就是我们创建的立方体事一个复杂对象，即物体是由一个以上的原点组成的。从技术上来说，我们的矩形也是一个复杂物体，但我们只使用了单一的OpenGL的函数去绘制它，我们可以将其看为一个简单物体，我避免说明复杂物体是因为我不想让我们的工作看起来是一个“艰苦的工作”

现在你已经完成了一个复杂物体了。恭喜你！并且，现在是时候建立第二个了。

金字塔不是难事。它是由一个矩形以及会聚到这个矩形上面的中心点的4个三角形组成的。一旦你将物体可以分解为你所认知的简单图元，任何复杂的物体都不是问题。唯一的变化是你物体中图元的数目而已。

好，开启Xcode并且开启上个教程的工程。这次不要删除任何东西，我们增加代码来构成一个平行线。

为了帮助你组成金字塔，我们需要分解它的各个组成部分，让我们开始：

    const GLfloat pyramidVertices[] = {
        // Our pyramid consists of 4 triangles and a square base.
        // We'll start with the square base
        -1.0, -1.0, 1.0,            // front left of base
        1.0, -1.0, 1.0,             // front right of base
        1.0, -1.0, -1.0,            // rear left of base
        -1.0, -1.0, -1.0,           // rear right of base

因此，我们创建了一个新的物体，和我们作的一样。这个矩形是底座，所有的y坐标都是-1.0。

现在，我们可以创建金字塔的正面，这次我们创建的三角形而不是矩形。

        // Front face
        -1.0, -1.0, 1.0,            // bottom left of triangle
        1.0, -1.0, 1.0,             // bottom right
        0.0, 1.0, 0.0,              // top centre -- all triangle vertices
                                    //     will meet here

这是我们创建的唯一的真实三角形，这个三角形的角在矩形的前边，然后向后倾斜，上面的点在矩形的中心上面（在x轴线上）

我们继续创建其他的三个三角形，使用相同的方法，下面是完整的顶点数组。

 
// Our new object definition code goes here
    const GLfloat pyramidVertices[] = {
        // Our pyramid consists of 4 triangles and a square base.
        // We'll start with the square base
        -1.0, -1.0, 1.0,            // front left of base
        1.0, -1.0, 1.0,             // front right of base
        1.0, -1.0, -1.0,            // rear left of base
        -1.0, -1.0, -1.0,           // rear right of base
 
        // Front face
        -1.0, -1.0, 1.0,            // bottom left of triangle
        1.0, -1.0, 1.0,             // bottom right
        0.0, 1.0, 0.0,              // top centre -- all triangle vertices
                                    //     will meet here
 
        // Rear face
        1.0, -1.0, -1.0,   // bottom right (when viewed through front face)
        -1.0, -1.0, -1.0,           // bottom left
        0.0, 1.0, 0.0,              // top centre
 
        // left face
        -1.0, -1.0, -1.0,           // bottom rear
        -1.0, -1.0, 1.0,            // bottom front
        0.0, 1.0, 0.0,              // top centre
 
        // right face
        1.0, -1.0, 1.0,             // bottom front
        1.0, -1.0, -1.0,            // bottom rear
        0.0, 1.0, 0.0               // top centre
    };

增加金字塔的定义到 drawView 方法里和 cubeVerticies[] 的定义在一起。

在我们继续前，我想先说明下金字塔的定义。

首先，这是第一个我们同时提供了三角形及矩形的对象。这个金字塔是由一个矩形和4个三角形组成的。因为我们调用glDrawArrays()为每个单独的图元，但这不防碍我们每次使用单独的定义来绘制不同的图元。那么，当我们绘制金字塔，一切都变的清楚了。

第2，再一次的提醒。我已指定所有的顶点是逆时针的。即使后面看起来似乎是顺时针的，但是从OpenGL的角度看，它还是逆时针的。

其实，我想在我3d图形教学结束前，我们会一直讨论这个问题。

绘制金字塔
现在低头去找立方体的代码。首先，删除glLoadIdentity() 这行,它已经不需要了。

在 rota+=0.5以后，我们增加绘制金字塔的代码。现在，我们要在不影响立方体的情况下，使用glTranslatef() 去移动金字塔，并且使用 glRotatef() 去旋转金字塔。为了做到这点，我们需要在不影响其他图元的情况下使用 glTranslatef() 和 glRotatef().

OpenGL 为我们使用这两个函数提供了快捷的方法。

    glPushMatrix();

    // Translation and drawing code goes here....

    glPopMatrix();

OpenGL 告诉我们如果要将我们的矩阵变换放如到堆栈中就要使用 glPushMatrix().我将我们的pyramidVertices[] 和 cubeVertices[] 目标 “推” 到 OpenGL’s 的堆栈中.

Note: 如果你不明白我说的堆栈是什么意思，那么你可能需要一本c或者object c 的工具书。

所以，我们的数据复制是安全的，我们可以象其他OpenGL大师一样进行转换了。让我们开始绘制这个金字塔吧！

    glPushMatrix();
    {
        glTranslatef(-2.0, 0.0, -8.0);
        glRotatef(rota, 1.0, 0.0, 0.0);
        glVertexPointer(3, GL_FLOAT, 0, pyramidVertices);
        glEnableClientState(GL_VERTEX_ARRAY);

首先要指出的是， glPushMatrix()后面的那个{.这个不是必要的，但是你在学习的时候最好加上它，{}内表示了被推入堆栈和弹出堆栈之间做的工作。

在 glPushMatrix() 后面的四行，我马上解释给你听. 所有我们所做的就是要求glTranslatef （）把金字塔远离（ 0 ， 0 ， 0 ）的左侧和回8点到屏幕（进一步远离观众）。那么我们的金字塔周围旋转的X轴，而不是所有三个轴计算的立方体的例子在过去的教程。最后，我们只要告诉OpenGL的有关数据，并使它能够被使用。

好了，在我们做好坐标转换以后，我们开始绘制金字塔。

        // Draw the pyramid
        // Draw the base -- it's a square remember
        glColor4f(1.0, 0.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

前四个坐标表示了我们金字塔的底部。我们将它的颜色设置为红色（也可以进行纹理映射），并且使用 GL_TRIANGLE_FAN 来绘制矩形。我们是从(pyramidVerticies[0~3]),使用4个的顶点。

Ok,我们完成矩形了，现在开始绘制第一个正面的三角形。

        // Front Face
        glColor4f(0.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 4, 3);

除里改变颜色，我们改变绘制模式为 GL_TRIANGLES的原因是显然的，我们已经从数组的第4个(pyramidVerticies[4~6])开始,延伸3个顶点来绘制。所以，你可以看到，一个矩形和一个三角形可以很容易的共存于一个数据结构里。

下一步，我们继续绘制我们其他三个三角形：

        // Rear Face
        glColor4f(0.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 7, 3);

        // Right Face
        glColor4f(1.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 10, 3);

        // Left Face
        glColor4f(1.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 13, 3);
    }
    glPopMatrix();

每次，我们只是改变颜色，并改变开始的偏移值。 OpenGL知道每个顶点是由三个坐标组成的，通过我们的 glVertexPointer() 函数。

最后，我们关闭}，并且调用 glPopMatrix().

现在，在这点上我们可以绘制立方体。但是，请注意，你可以一遍又一遍的重复绘制，只需要将绘制函数放在 glPushMatrix() 和 glPopMatrix()中间.

绘制立方体－修订
这里是绘制立方体的完整代码。最大的改变就是代码头尾的函数 glPushMatrix() 和 glPopMatrix()

 
    glPushMatrix();
    {
        glTranslatef(2.0, 0.0, -8.0);
        glRotatef(rota, 1.0, 1.0, 1.0);
        glVertexPointer(3, GL_FLOAT, 0, cubeVertices);
        glEnableClientState(GL_VERTEX_ARRAY);
 
        // Draw the front face in Red
        glColor4f(1.0, 0.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
 
        // Draw the top face in green
        glColor4f(0.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 4, 4);
 
        // Draw the rear face in Blue
        glColor4f(0.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 8, 4);
 
        // Draw the bottom face
        glColor4f(1.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 12, 4);
 
        // Draw the left face
        glColor4f(0.0, 1.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 16, 4);
 
        // Draw the right face
        glColor4f(1.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 20, 4);
    }
    glPopMatrix();

其他的变化只有 glTranslatef 的参数。
这里是完整的drawView函数。

 
- (void)drawView {
 
    // Our new object definition code goes here
    const GLfloat pyramidVertices[] = {
        // Our pyramid consists of 4 triangles and a square base.
        // We'll start with the square base
        -1.0, -1.0, 1.0,            // front left of base
        1.0, -1.0, 1.0,             // front right of base
        1.0, -1.0, -1.0,            // rear left of base
        -1.0, -1.0, -1.0,           // rear right of base
 
        // Front face
        -1.0, -1.0, 1.0,            // bottom left of triangle
        1.0, -1.0, 1.0,             // bottom right
        0.0, 1.0, 0.0,              // top centre -- all triangle vertices
                                    //     will meet here
 
        // Rear face
        1.0, -1.0, -1.0,     // bottom right (when viewed through front face)
        -1.0, -1.0, -1.0,           // bottom left
        0.0, 1.0, 0.0,              // top centre
 
        // left face
        -1.0, -1.0, -1.0,           // bottom rear
        -1.0, -1.0, 1.0,            // bottom front
        0.0, 1.0, 0.0,              // top centre
 
        // right face
        1.0, -1.0, 1.0,             // bottom front
        1.0, -1.0, -1.0,            // bottom rear
        0.0, 1.0, 0.0               // top centre
    };
 
    const GLfloat cubeVertices[] = {
 
        // Define the front face
        -1.0, 1.0, 1.0,             // top left
        -1.0, -1.0, 1.0,            // bottom left
        1.0, -1.0, 1.0,             // bottom right
        1.0, 1.0, 1.0,              // top right
 
        // Top face
        -1.0, 1.0, -1.0,            // top left (at rear)
        -1.0, 1.0, 1.0,             // bottom left (at front)
        1.0, 1.0, 1.0,              // bottom right (at front)
        1.0, 1.0, -1.0,             // top right (at rear)
 
        // Rear face
        1.0, 1.0, -1.0,             // top right (when viewed from front)
        1.0, -1.0, -1.0,            // bottom right
        -1.0, -1.0, -1.0,           // bottom left
        -1.0, 1.0, -1.0,            // top left
 
        // bottom face
        -1.0, -1.0, 1.0,
        -1.0, -1.0, -1.0,
        1.0, -1.0, -1.0,
        1.0, -1.0, 1.0,
 
        // left face
        -1.0, 1.0, -1.0,
        -1.0, 1.0, 1.0,
        -1.0, -1.0, 1.0,
        -1.0, -1.0, -1.0,
 
        // right face
        1.0, 1.0, 1.0,
        1.0, 1.0, -1.0,
        1.0, -1.0, -1.0,
        1.0, -1.0, 1.0
    };
 
    const GLshort squareTextureCoords[] = {
        // Front face
        0, 1,       // top left
        0, 0,       // bottom left
        1, 0,       // bottom right
        1, 1,       // top right
 
        // Top face
        0, 1,       // top left
        0, 0,       // bottom left
        1, 0,       // bottom right
        1, 1,       // top right
 
        // Rear face
        0, 1,       // top left
        0, 0,       // bottom left
        1, 0,       // bottom right
        1, 1,       // top right
 
        // Bottom face
        0, 1,       // top left
        0, 0,       // bottom left
        1, 0,       // bottom right
        1, 1,       // top right
 
        // Left face
        0, 1,       // top left
        0, 0,       // bottom left
        1, 0,       // bottom right
        1, 1,       // top right
 
        // Right face
        0, 1,       // top left
        0, 0,       // bottom left
        1, 0,       // bottom right
        1, 1,       // top right
    };
 
    [EAGLContext setCurrentContext:context];    
    glBindFramebufferOES(GL_FRAMEBUFFER_OES, viewFramebuffer);
    glViewport(0, 0, backingWidth, backingHeight);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); 
    glMatrixMode(GL_MODELVIEW);
 
    glTexCoordPointer(2, GL_SHORT, 0, squareTextureCoords);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
 
    // Our new drawing code goes here
    rota += 0.5;
 
    glPushMatrix();
    {
        glTranslatef(-2.0, 0.0, -8.0);
        glRotatef(rota, 1.0, 0.0, 0.0);
        glVertexPointer(3, GL_FLOAT, 0, pyramidVertices);
        glEnableClientState(GL_VERTEX_ARRAY);
 
        // Draw the pyramid
        // Draw the base -- it's a square remember
        glColor4f(1.0, 0.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
 
        // Front Face
        glColor4f(0.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 4, 3);
 
        // Rear Face
        glColor4f(0.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 7, 3);
 
        // Right Face
        glColor4f(1.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 10, 3);
 
        // Left Face
        glColor4f(1.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLES, 13, 3);
    }
    glPopMatrix();
 
    glPushMatrix();
    {
        glTranslatef(2.0, 0.0, -8.0);
        glRotatef(rota, 1.0, 1.0, 1.0);
        glVertexPointer(3, GL_FLOAT, 0, cubeVertices);
        glEnableClientState(GL_VERTEX_ARRAY);
 
        // Draw the front face in Red
        glColor4f(1.0, 0.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
 
        // Draw the top face in green
        glColor4f(0.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 4, 4);
 
        // Draw the rear face in Blue
        glColor4f(0.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 8, 4);
 
        // Draw the bottom face
        glColor4f(1.0, 1.0, 0.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 12, 4);
 
        // Draw the left face
        glColor4f(0.0, 1.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 16, 4);
 
        // Draw the right face
        glColor4f(1.0, 0.0, 1.0, 1.0);
        glDrawArrays(GL_TRIANGLE_FAN, 20, 4);
    }
    glPopMatrix();
 
 
    glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
    [context presentRenderbuffer:GL_RENDERBUFFER_OES];
 
    [self checkGLError:NO];
}

请注意，我们并没有为金字塔添加一个新的纹理坐标数组。我们可以使用相同的坐标数组，因为它依然为这个范例工作。

改变好了以后，点击”Build an Go”

你所有需要主要的是，这两个物体正在独立的改变自己。金字塔只沿x轴旋转，而立方体沿3轴旋转。再次说明，颜色只是让你更容易的分辨每个面。

采用3d概念：法线
记不记得我早些时候说过，要保证每个三角形都是逆时针的，即使有些背面的三角形从正面看起来象是顺时针的？

恩，这是因为你要保证你每个面的数据都是“标准”的。简单的说，一个面的法线是一个假想的线从物体的面抽出。为了说明这点，请看下面的图：

在上面的图片里，这个三角形的法线就是一条从面出来的线。当前的三角形的法线表示，这个三角形的3个顶点是逆时针的。我会在介绍光照的那章里说明什么是法线。

（在这里我真的要说说，我真的很佩服这教程的原作者，他居然可以将如此简单的代码说的如此的复杂，请注意，我没有一点的贬义，而是对他非常的敬佩。明明每个教程只有几行代码，他确不怕麻烦的一次又一次的说明其中的概念，解释每一行代码的表面意思和内部的概念。这样细致的工作打个比方来说，就是一个博士生在细心的教幼儿园小朋友唱歌。不是一般人可以做到的。比我们所阅读到的其他OpenGL书籍更加的认真，也更加的细致。这也是我继续翻译下去的主要动力。）