OpenGL ES教程II之创建多边形(原文对照)

OpenGL ES Tutorial for Android – Part II – Building a polygon

December 4th, 2009 by Per-Erik Bergman — Android, Embedded

 

Previous tutorial was all about setting up the GLSurfaceView. Be sure to read it beacuse it's a really importent one to be able to continue.

Building a polygon

In this tutorial we will render our first polygon.

本教程中，将展现我们的第一个多边形

3D models are built up with smaller elements (vertices, edges, faces, and polygons) which can be manipulated individually.

3D模型是由一组可独立操纵的更小元素（点，线，面及多边形）组成。

Vertex

A vertex (vertices in plural) is the smallest building block of 3D model. A vertex is a point where two or more edges meet. In a 3D model a vertex can be shared between all connected edges, paces and polygons. A vertex can also be a represent for the position of a camera or a light source. You can see a vertex in the image below marked in yellow.

两条或多条边相交的点即称之为顶点，它是组成3D模型的最小元素。在3D模型中顶点可以被连接的边，面或多边形所共用，当然了，顶点也可以代表光源或是照相机。下图标注的黄色点即为顶点。

To define the vertices on android we define them as a float array that we put into a byte buffer to gain better performance. Look at the image to the right and the code below to match the vertices marked on the image to the code.

在android上，使用一个浮点数组来定义顶点，为提高性能，将它放入一个字节缓冲中（java5新特性，NIO）。右图中标记了四个顶点，下面的代码是对它们的定义。

 

private float vertices[] = {

      -1.0f,  1.0f, 0.0f,  // 0, Top Left

      -1.0f, -1.0f, 0.0f,  // 1, Bottom Left

       1.0f, -1.0f, 0.0f,  // 2, Bottom Right

       1.0f,  1.0f, 0.0f,  // 3, Top Right

};

 

// a float is 4 bytes, therefore we multiply the number if vertices with 4.一个浮点占用4个字节，所以字节缓冲的大小为x4（字节）

ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);

vbb.order(ByteOrder.nativeOrder());

FloatBuffer vertexBuffer = vbb.asFloatBuffer();

vertexBuffer.put(vertices);

vertexBuffer.position(0);

Don't forget that a float is 4 bytes and to multiply it with the number of vertices to get the right size on the allocated buffer.

OpenGL ES have a pipeline with functions to apply when you tell it to render. Most of these functions are not enabled by default so you have to remember to turn the ones you like to use on. You might also need to tell these functions what to work with. So in the case of our vertices we need to tell OpenGL ES that it’s okay to work with the vertex buffer we created we also need to tell where it is.

OpenGL Es管道可以理解为拥有一组开关控制功能的函数，而且许多控制函数默认是不开启的，如果你需要某项功能，请记得先告诉先打开这些功能。在某些情况下，你可能还需要指出这些函数的用途。以上面定义的顶点为例，我们需要告诉OpenGL ES启用顶点缓冲，并且设置顶点缓冲。

// Enabled the vertex buffer for writing and to be used during rendering.启用顶点缓冲

gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);// OpenGL docs.

// Specifies the location and data format of an array of vertex

// coordinates to use when rendering.指定顶点位置

gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer); // OpenGL docs.

When you are done with the buffer don't forget to disable it.

最后，别忘了关闭顶点缓冲（在画完以后）

// Disable the vertices buffer.

gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);// OpenGL docs.

Edge

Edge is a line between two vertices. They are border lines of faces and polygons. In a 3D model an edge can be shared between two adjacent faces or polygons. Transforming an edge affects all connected vertices, faces and polygons. In OpenGL ES you don't define the edges, you rather define the face by giving them the vertices that would build up the three edges. If you would like modify an edge you change the two vertices that makes the edge. You can see an edge in the image below marked in yellow.

边（也称线）是两个顶点之间的连线，多边形的边框也是边（边框边框，框住面的边）。在3D模型中，边可以被连接的面所共用。移动一条边，将影响到其所连接的所有点和面，在OpenGL ES中，你不必定义边，需要定义的是由给定顶点组成三条边的面（三角形），如果需要改一条边的话，只需要改变组成此边的两个顶点就好了。下图中黄色标记的即为一条边。

Face

Face is a triangle. Face is a surface between three corner vertices and three surrounding edges. Transforming a face affects all connected vertices, edges and polygons.

面即三角形，面是由三个顶点组成的一个平面，它被三条边所环绕着。移动一个面，将影响到所以连接的顶点，边和多边形（为什么有多边形呢？）

The order does matter.

顺序很重要！

When winding up the faces it's important to do it in the right direction because the direction defines what side will be the front face and what side will be the back face. Why this is important is because to gain performance we don't want to draw both sides so we turn off the back face. So it's a good idea to use the same winding all over your project. It is possible to change what direction that defines the front face with glFrontFace.

当你转动一个面的时候，重要的是定义正确的方向，因为方向决定了（在转动时）哪个面在前面，哪个面在背面。为什么重要呢？因为画的时候，不需要同时画背面与前面（就像你看着电脑屏幕时，你看不到背面，但当你转动一定角度时，你可以看到背面了）。因此在工程中使用相同的转动方向是一个不确的选择，可以使用glFrontFace函数来定义方向。

 gl.glFrontFace(GL10.GL_CCW); // OpenGL docs

To make OpenGL skip the faces that are turned into the screen you can use something called back-face culling. What is does is determines whether a polygon of a graphical object is visible by checking if the face is wind up in the right order.

如果需要OpenGL 跳过（不画）背面，可以启用一个叫做背面遮挡功能，在面转动方向正确的前提下，它决定了图形对象的多边形是否可见。

下面的代码为启用遮挡功能

 gl.glEnable(GL10.GL_CULL_FACE); // OpenGL docs

It's ofcource possible to change what face side should be drawn or not.

下面的代码决定遮挡掉背面（如你画一个正方体，将在屏幕上看不到底面）

 gl.glCullFace(GL10.GL_BACK); // OpenGL docs

Polygon

Time to wind the faces, remember we have decided to go with the default winding meaning counter-clockwise. Look at the image to the right and the code below to see how to wind up this square.

请看右边的图，我们使用下面的代码来定义顶点顺序数组以构造图中的面（默认方面是逆时针）

wind该如何翻译？

 

private short[] indices = { 0, 1, 2, 0, 2, 3 };

To gain some performance we also put this ones in a byte buffer.

同样，我们使用字节缓冲以提高性能。

// short is 2 bytes, therefore we multiply the number if vertices with 2.字节缓冲长度为数组大小x2.（一个short占用2字节）

ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);

ibb.order(ByteOrder.nativeOrder());

ShortBuffer indexBuffer = ibb.asShortBuffer();

indexBuffer.put(indices);

indexBuffer.position(0);

Don't forget that a short is 2 bytes and to multiply it with the number of indices to get the right size on the allocated buffer.

Render

Time to get something on the screen, there is two functions used to draw and we have to decide which one to use.

下面该在屏幕上展现一些东西了，绘画有以下两个函数

The two functions are:

public abstract void glDrawArrays(int mode, int first, int count) // OpenGL docs

glDrawArrays draws the vertices in that order they are specified in the construction of our verticesBuffer.

glDrawArrays按照构造verticesBuffer指定的顺序来画

public abstract void glDrawElements(int mode, int count, int type, // OpenGL docs

                                    Buffer indices)

glDrawElements need a little bit more to be able to draw. It needs to know the order which to draw the vertices, it needs the indicesBuffer.

glDrawElements可能用得更多，它需要知道绘画顶点的顺序，所以需要顶点顺序数组。

Since we already created the indicesBuffer I'm guessing that you figured out that's the way we are going.

在上面的代码中，我们指定了顶点顺序数组，所以，我想你应该知道下面该做什么了吧

What is common for this functions is that they both need to know what it is they should draw, what primitives to render. Since there is some various ways to render this indices and some of them are good to know about for debugging reasons. I'll go through them all.

这两个函数都有一个名为int类型的形参，它告诉OpenGL ES需要画什么（点，线，面），在这里姑且称之为（原始的）展现方式吧，它有许多种，请见下：

What primitives to render

GL_POINTS

Draws individual points on the screen.

画单独的点

GL_LINE_STRIP

Series of connected line segments.画线

GL_LINE_LOOP

Same as above, with a segment added between last and first vertices.画线，与上面不同的时，多画了一条由首尾顶点的连线。

GL_LINES

Pairs of vertices interpreted as individual line segments.画由两个顶点对组成的线

GL_TRIANGLES

Triples of vertices interpreted as triangles.画三角形

GL_TRIANGLE_STRIP

Draws a series of triangles (three-sided polygons) using vertices v0, v1, v2, then v2, v1, v3 (note the order), then v2, v3, v4, and so on. The ordering is to ensure that the triangles are all drawn with the same orientation so that the strip can correctly form part of a surface.画一系列三角形，先v0,v1,v2,再v2,v1,v3（注意顺序），再v2,v3,v4依此类推下去。顺序是为了确保三角形在同一个方向上绘画，使得可以正确的形成一个平面的一部分。

GL_TRIANGLE_FAN

Same as GL_TRIANGLE_STRIP, except that the vertices are drawn v0, v1, v2, then v0, v2, v3, then v0, v3, v4, and so on.

类似 GL_TRIANGLE_STRIP模式，只是顶点顺序为v0,v1,v2,然后v0,v2,v3,再v0,v3,v4.

I think the GL_TRIANGLES is the easiest to use so we go with that one for now.

我想 GL_TRIANGLES是最容易使用的了，因此我们用它来画（正方形）

Putting it all togetter

So let's putting our square together in a class.

package se.jayway.opengl.tutorial;

 

import java.nio.ByteBuffer;

import java.nio.ByteOrder;

import java.nio.FloatBuffer;

import java.nio.ShortBuffer;

 

import javax.microedition.khronos.opengles.GL10;

 

public class Square {

        // Our vertices.

        private float vertices[] = {

                     -1.0f,  1.0f, 0.0f,  // 0, Top Left

                     -1.0f, -1.0f, 0.0f,  // 1, Bottom Left

                      1.0f, -1.0f, 0.0f,  // 2, Bottom Right

                      1.0f,  1.0f, 0.0f,  // 3, Top Right

               };

 

        // The order we like to connect them.

        private short[] indices = { 0, 1, 2, 0, 2, 3 };

 

        // Our vertex buffer.

        private FloatBuffer vertexBuffer;

 

        // Our index buffer.

        private ShortBuffer indexBuffer;

 

        public Square() {

               // a float is 4 bytes, therefore we multiply the number if

               // vertices with 4.

               ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);

               vbb.order(ByteOrder.nativeOrder());

               vertexBuffer = vbb.asFloatBuffer();

               vertexBuffer.put(vertices);

               vertexBuffer.position(0);

 

               // short is 2 bytes, therefore we multiply the number if

               // vertices with 2.

               ByteBuffer ibb = ByteBuffer.allocateDirect(indices.length * 2);

               ibb.order(ByteOrder.nativeOrder());

               indexBuffer = ibb.asShortBuffer();

               indexBuffer.put(indices);

               indexBuffer.position(0);

        }

 

        /**

         * This function draws our square on screen.

         * @param gl

         */

        public void draw(GL10 gl) {

               // Counter-clockwise winding.

               gl.glFrontFace(GL10.GL_CCW); // OpenGL docs

               // Enable face culling.

               gl.glEnable(GL10.GL_CULL_FACE); // OpenGL docs

               // What faces to remove with the face culling.

               gl.glCullFace(GL10.GL_BACK); // OpenGL docs

 

               // Enabled the vertices buffer for writing and to be used during

               // rendering.

               gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);// OpenGL docs.

               // Specifies the location and data format of an array of vertex

               // coordinates to use when rendering.

               gl.glVertexPointer(3, GL10.GL_FLOAT, 0, // OpenGL docs

                                 vertexBuffer);

 

               gl.glDrawElements(GL10.GL_TRIANGLES, indices.length,// OpenGL docs

                                 GL10.GL_UNSIGNED_SHORT, indexBuffer);

 

               // Disable the vertices buffer.

               gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); // OpenGL docs

               // Disable face culling.

               gl.glDisable(GL10.GL_CULL_FACE); // OpenGL docs

        }

 

}

We have to initialize our square in the OpenGLRenderer class.

// Initialize our square.

Square square = new Square();

And in the draw function call on the square to draw.

public void onDrawFrame(GL10 gl) {

               // Clears the screen and depth buffer.

               gl.glClear(GL10.GL_COLOR_BUFFER_BIT | // OpenGL docs.

                           GL10.GL_DEPTH_BUFFER_BIT);

 

               // Draw our square.

               square.draw(gl); // ( NEW )

}

If you run the application now the screen is still black. Why? Because OpenGL ES render from where the current position is, that by default is at point: 0, 0, 0 the same position that the view port is located. And OpenGL ES don’t render the things that are too close to the view port. The solution to this is to move the draw position a few steps into the screen before rendering the square:

如何你运行此程序，你可以看到屏幕还是黑的，为什么呢？因为OpenGL Es从当前点（默认为0,0,0）开始渲染，此点被视窗占据了，OpenGL ES不会在太靠近此点的地方进行渲染。解决办法是在渲染之前将绘画点向Z轴负方向移动

// Translates 4 units into the screen.

gl.glTranslatef(0, 0, -4); // OpenGL docs

I will talk about the different transformations in the next tutorial.

有关移动的详细说明，将在下个教程中讨论

Run the application again and you will see that the square is drawn but quickly moves further and further into the screen. OpenGL ES doesn’t reset the drawing point between the frames that you will have to do yourself:

再次运行程序，你将看到方块展现出来了，但是很快地，它飞得越来越远（越来越小）以至消失在屏幕中。这是因为OpenGL ES在画帧时没有重置绘画点，这是需要手动去设置的。

// Replace the current matrix with the identity matrix

gl.glLoadIdentity(); // OpenGL docs

Now if you run the application you will see the square on a fixed position.

References

The info used in this tutorial is collected from:
Android Developers
OpenGL ES 1.1 Reference Pages

You can download the source for this tutorial here: Tutorial_Part_II
You can also checkout the code from: code.google.com

Previous tutorial: OpenGL ES Tutorial for Android – Part I – Setting up the view
Next tutorial: OpenGL ES Tutorial for Android – Part III – Transformations

Per-Erik Bergman
Consultant at Jayway