OpenGL ES教程V之更多3D模型(原文对照)

OpenGL ES Tutorial for Android – Part V – More on Meshes

February 15th, 2010 by Per-Erik Bergman — Android , Embedded

I have a feeling that some of you have tried my tutorials and then thought "This is a 3D tutorial, but why is everything in 2D?". So in this tutorial we will make some real 3D meshes. This is also necessary for the following tutorials.

我已经感觉到了某些人可能感到不耐烦了， “ 这是一个 3D 教程，但是讲的怎么全是 2D ？ ” 因此在本教程中，我们将生成一些真正的 3D 模型。这是后续教程的必要前提。

When I started I had problems with finding out how to programmatic make different meshes like cubes, cones and so on. I needed this so I easy easy could put my scenes together. So this tutorial will show how to make some of the basic primitives. They might not be the most effective way of creating them but it is a way of doing them.

当我正尝试编码生成不同的模型如立方体，锥形体等。我遇到一些问题：我需要将它们很容易地合成到我的场景中。因些本教程将展示生成一些基本的原始几何体。它们可能不是最有效的创建方式。但不管怎样，这确实行之有效。

Starting point will be from the source of the second tutorial. I will show you plane and cube and then give you a couple of hint for additional primitives.

以第二个教程的源代码为基础，我将展示一个平面物体和一个立方体，后面，我将给出一些展示其它原始几何体的建议。

Design

A good place to start when designing an OpenGL framework is to use the composite pattern. This is a start of how I would proceed:

在 OpenGL 框架上，使用合成模式是一个好的开始。这是我着手的开始。如下图：

Let's start making out pattern.

Mesh

It's a good idea to have a common base for your meshes. So let us start by creating a class called Mesh.

模型，让我们的模型拥有一个共同的基类，创建一个名为 Mesh 的类。

package se.jayway .opengl .tutorial .mesh ;

public class Mesh {

 

}

We add the draw function from previous example, since I when over this function in a previous tutorial I just show it here:

    // Our vertex buffer.

    private FloatBuffer verticesBuffer = null ;

 

    // Our index buffer.

    private ShortBuffer indicesBuffer = null ;

 

    // The number of indices.

    private int numOfIndices = -1 ;

 

    // Flat Color

    private float [] rgba = new float []{ 1 .0f, 1 .0f, 1 .0f, 1 .0f} ;

 

    // Smooth Colors

    private FloatBuffer colorBuffer = null ;

 

    public void draw( GL10 gl) {

        // Counter-clockwise winding.

        gl.glFrontFace ( GL10.GL_CCW ) ;

        // Enable face culling.

        gl.glEnable ( GL10.GL_CULL_FACE ) ;

        // What faces to remove with the face culling.

        gl.glCullFace ( GL10.GL_BACK ) ;

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

        // rendering.

        gl.glEnableClientState ( GL10.GL_VERTEX_ARRAY ) ;

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

        // coordinates to use when rendering.

        gl.glVertexPointer ( 3 , GL10.GL_FLOAT , 0 , verticesBuffer) ;

        // Set flat color

        gl.glColor4f ( rgba[ 0 ] , rgba[ 1 ] , rgba[ 2 ] , rgba[ 3 ]) ;

        // Smooth color

        if ( colorBuffer != null ) {

            // Enable the color array buffer to be used during rendering.

            gl.glEnableClientState ( GL10.GL_COLOR_ARRAY ) ;

            // Point out the where the color buffer is.

            gl.glColorPointer ( 4 , GL10.GL_FLOAT , 0 , colorBuffer) ;

        }

        gl.glDrawElements ( GL10.GL_TRIANGLES , numOfIndices,

               GL10.GL_UNSIGNED_SHORT , indicesBuffer) ;

        // Disable the vertices buffer.

        gl.glDisableClientState ( GL10.GL_VERTEX_ARRAY ) ;

        // Disable face culling.

        gl.glDisable ( GL10.GL_CULL_FACE ) ;

    }

We need functions where the subclasses can set the vertices and the indices. These function contains nothing new and are pretty much the same as you seen in earlier tutorials.

    protected void setVertices( float [] vertices) {

        // 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 ()) ;

        verticesBuffer = vbb.asFloatBuffer () ;

        verticesBuffer.put ( vertices) ;

        verticesBuffer.position ( 0 ) ;

    }

 

    protected void setIndices( short [] indices) {

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

        // vertices with 2.

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

        ibb.order ( ByteOrder.nativeOrder ()) ;

        indicesBuffer = ibb.asShortBuffer () ;

        indicesBuffer.put ( indices) ;

        indicesBuffer.position ( 0 ) ;

        numOfIndices = indices.length ;

    }

 

    protected void setColor( float red, float green, float blue, float alpha) {

        // Setting the flat color.

        rgba[ 0 ] = red;

        rgba[ 1 ] = green;

        rgba[ 2 ] = blue;

        rgba[ 3 ] = alpha;

    }

 

    protected void setColors( float [] colors) {

        // float has 4 bytes.

        ByteBuffer cbb = ByteBuffer.allocateDirect ( colors.length * 4 ) ;

        cbb.order ( ByteOrder.nativeOrder ()) ;

        colorBuffer = cbb.asFloatBuffer () ;

        colorBuffer.put ( colors) ;

        colorBuffer.position ( 0 ) ;

    }

We need to add a couple of things. When we start working with multiple meshes we need to be able to move and rotate them individual so let us add translation and rotation parameters:

    // Translate params.

    public float x = 0 ;

    public float y = 0 ;

    public float z = 0 ;

 

    // Rotate params.

    public float rx = 0 ;

    public float ry = 0 ;

    public float rz = 0 ;

And use them in the draw function add this lines just before the gl.glDrawElements call.

    gl.glTranslatef ( x, y, z) ;

    gl.glRotatef ( rx, 1 , 0 , 0 ) ;

    gl.glRotatef ( ry, 0 , 1 , 0 ) ;

    gl.glRotatef ( rz, 0 , 0 , 1 ) ;

Plane

Let us start making a plane an quite easy task you might think and it kinda is. But to make it more interesting and more useful we need to be able to create it with some different settings like: width, depth, how many width segments and how many depth segments.

让我们开始生成一个平面物体，这是一个相当简单的任务，可能你也有几分赞同。为了让它更有趣，更有用，需要让它有能力变更一些设置项，如宽度，深度，高度。及其段长度。

Just so we have the same terminology, width is the length over the x-axis, depth is over the z-axis and height is over the y-axis. Look at the image below as a visual input.

这里我们使用一些术语，宽表示 X 轴方向的长度，深度为 Z 轴方向的长，高深为 Y 轴方向的长。请参考下图：

Width, height and depth.

Segments is how many parts the length should be divided by. This is useful if you need to make a surface that is not total even. If you create a plane over x, y and make z not all be 0 say you give z a random span from -0.1 to 0.1 you will get something you could use as a ground plane in a game just put a nice texture on it.

段用于被长，宽，高相除。这在创建长宽高并不相等的平面场景中非常实用。假设你创建一个 Z 轴方向随机值为 -0.1-0.1 的游戏场景，可以有不错的纹理效果。

 

Segments.

Looking at the image above you see that the different segments gives you squares. Since we like it to be triangles so just split them up into 2 triangles.

I hate frameworks and classes that don't have a default setup and easy class constructors I try to always have more then one constructor. The constructors I will put in this plane is:

请看上面的图（图好像不对），方块中给定的段数并不一样，我们将方块分解为两个三角形。

我不喜欢类中没用默认构造子和简单的构造子。我一般会使用多个构造函数。（个人也推荐先定义一个全参构造子，然后再定义相对简单的构造子）

For an easy and quick setup:

// Gives you a plane that is 1 unit wide and 1 unit high with just one segment over width and height.

public Plane()

An easy one just to change the size:

  // Let you decide the size of the plane but still only one segment.

public Plane( float width, float height)

And finally one for setting up the plane with different segments:

// For alla your settings.

public Plane( float width, float height, int widthSegments, int heightSegments)

If I in theory would construct a plane that is 1 unit wide and 1 units high with 4 segments in both width and height direction it would look like this images:

在理论上，我们可以构造一个宽和高都为 1 单位，段数为 4 的平面，如下图

The one to the left shows the segments and the one to the right show us the faces we need to create.

左图显示的是平面，右图显示的是我们要构造的面。

package se.jayway .opengl .tutorial .mesh ;

 

public class Plane extends Mesh {

 

    public Plane() {

        this ( 1 , 1 , 1 , 1 ) ;

    }

 

    public Plane( float width, float height) {

        this ( width, height, 1 , 1 ) ;

    }

 

    public Plane( float width, float height, int widthSegments,

               int heightSegments) {

        float [] vertices = new float [( widthSegments + 1 ) * ( heightSegments + 1 )

                       * 3 ] ;

        short [] indices = new short [( widthSegments + 1 ) * ( heightSegments + 1 )

                       * 6 ] ;

 

        float xOffset = width / -2 ;

        float yOffset = height / -2 ;

        float xWidth = width / ( widthSegments) ;

        float yHeight = height / ( heightSegments) ;

        int currentVertex = 0 ;

        int currentIndex = 0 ;

        short w = ( short ) ( widthSegments + 1 ) ;

        for ( int y = 0 ; y < heightSegments + 1 ; y++) {

            for ( int x = 0 ; x < widthSegments + 1 ; x++) {

                vertices[ currentVertex] = xOffset + x * xWidth;

               vertices[ currentVertex + 1 ] = yOffset + y * yHeight;

                vertices[ currentVertex + 2 ] = 0 ;

               currentVertex += 3 ;

 

               int n = y * ( widthSegments + 1 ) + x;

 

               if ( y < heightSegments && x < widthSegments) {

                   // Face one

                   indices[ currentIndex] = ( short ) n;

                   indices[ currentIndex + 1 ] = ( short ) ( n + 1 ) ;

                   indices[ currentIndex + 2 ] = ( short ) ( n + w) ;

                   // Face two

                   indices[ currentIndex + 3 ] = ( short ) ( n + 1 ) ;

                   indices[ currentIndex + 4 ] = ( short ) ( n + 1 + w) ;

                   indices[ currentIndex + 5 ] = ( short ) ( n + 1 + w - 1 ) ;

 

                   currentIndex += 6 ;

               }

            }

        }

 

        setIndices( indices) ;

        setVertices( vertices) ;

    }

}

Cube

The next step I think a cube will be nice. I will only make a cube that you can set: height, width and depth on but I suggest you as a practice make it with segments just as we did with the plane.

上图的平面，看起来像是 2D 的。所以我想展示一个立方体可能更好一点。我将生成一个长，宽，高都可以设置的立方体。我建议像上面的平面一样，加上一个段参数。

The constructor will look like this:

public Cube( float width, float height, float depth)

And since I'm not doing this with any segments the constructor will be quite easy.

package se.jayway .opengl .tutorial .mesh ;

 

public class Cube extends Mesh {

    public Cube( float width, float height, float depth) {

        width  /= 2 ;

        height /= 2 ;

        depth  /= 2 ;

 

        float vertices[] = { -width, -height, -depth, // 0

                              width, -height, -depth, // 1

                              width,  height, -depth, // 2

                             -width,  height, -depth, // 3

                             -width, -height,  depth, // 4

                               width, -height,  depth, // 5

                              width,  height,  depth, // 6

                             -width,  height,  depth, // 7

        } ;

 

        short indices[] = { 0 , 4 , 5 ,

                            0 , 5 , 1 ,

                            1 , 5 , 6 ,

                            1 , 6 , 2 ,

                            2 , 6 , 7 ,

                            2 , 7 , 3 ,

                            3 , 7 , 4 ,

                            3 , 4 , 0 ,

                            4 , 7 , 6 ,

                            4 , 6 , 5 ,

                            3 , 0 , 1 ,

                            3 , 1 , 2 , } ;

 

        setIndices( indices) ;

        setVertices( vertices) ;

    }

}

If you like to make it with segments the constructor could look like this:

public Cube( float width, float height, float depth,

                 int widthSegments, int heightSegments, int depthSegments)

Since we now have a plane that replaces the Square class ( in the code from tutorial II ) I will just remove it and in OpenGLRenderer change the square to a cube...

public OpenGLRenderer() {

    // Initialize our cube.

    cube = new Cube( 1 , 1 , 1 ) ;

    cube.rx = 45 ;

    cube.ry = 45 ;

}

... and render it.

public void onDrawFrame( GL10 gl) {

    ...

    // Draw our cube.

    cube.draw ( gl) ;

}

Group

A group is really good to have when setting up and controlling your 3D scene. What a group really do is to distribute all commands sent to the group to all it's children. You can see the implementation of a simple group here:

package se.jayway .opengl .tutorial .mesh ;

 

import java.util.Vector;

 

import javax.microedition.khronos.opengles.GL10;

 

public class Group extends Mesh {

     private Vector<Mesh> children = new Vector<Mesh>() ;

 

    @Override

    public void draw( GL10 gl) {

        int size = children.size () ;

        for ( int i = 0 ; i < size; i++)

            children.get ( i) .draw ( gl) ;

    }

 

    public void add( int location, Mesh object) {

        children.add ( location, object) ;

    }

 

    public boolean add( Mesh object) {

        return children.add ( object) ;

    }

 

    public void clear() {

        children.clear () ;

    }

 

    public Mesh get( int location) {

        return children.get ( location) ;

    }

 

    public Mesh remove( int location) {

        return children.remove ( location) ;

    }

 

    public boolean remove( Object object) {

        return children.remove ( object) ;

    }

 

    public int size() {

        return children.size () ;

    }

}

Make the renderer work with a group as a root node and add your cube to it.

Group group = new Group () ;

Cube cube = new Cube( 1 , 1 , 1 ) ;

cube.rx = 45 ;

cube.ry = 45 ;

group.add ( cube) ;

root = group;

And draw our scene:

public void onDrawFrame( GL10 gl) {

    ...

    // Draw our scene.

    root.draw ( gl) ;

}

Suggestions

It's always a good idea to have different primitives ready to use when you starting up a new project. My experience tell me that in 9 times of 10 you won't have any meshes from the graphic people when you start coding so it's really good to have some meshes to work with as place holders. I'll give you a hint of the way to start with your own meshes library by giving you an idea of how I would do it.

我推荐在开始 3D 编程之前，学会一些原始几何体的生成。绝大多数时候，一个人物不会用到这些模型，但是作为某些类似场景的地方就派上用场了。对于你创建自己的模型库，我有些许的建议，希望可以帮上点忙。

Creating your own meshes is a really good way of getting to know vertices and indices really close up.

创建自己的 3D 模型是你深入了解了顶点，及顶点顺序非常好的实践。

Cone

After you have gotten your cube up and ready to go my suggestion is that you move onto a cone. A cone with the right settings could be more then just a cone. if you give is 3-4 sides it will be a pyramid. If you give it the same base and top radius it becomes a cylinder. So you can see why it is so useful. Take a look at this image and see what the this cone can do.

根据教程，你已经创建了一个立方体，我建立可以考虑一下锥形体的实现。不同的设置项产生的不仅仅是单一的锥形体这么简单。如果设置的边为 3 － 4 ，那么它就是一个金字塔。如果顶部半径与底部半径相等的话，那么它就是一个柱体。如果边数很大的话，那会是什么？对了它就是一个圆柱体。所以你可以看到，这些模型很有用了吧。请参考下图，考虑一下他们的实现。

public Cone( float baseRadius, float topRadius, float height, int numberOfSides)

Pyramid

public class Pyramid extends Cone {

    public Pyramid( float baseRadius, float height)   {

        super ( baseRadius, 0 , height, 4 ) ;

     }

}

Cylinder

public class Cylinder extends Cone {

    public Cylinder( float radius, float height)   {

        super ( radius, radius, height, 16 ) ;

    }

}

 

这里给出它们的一个实现，我认为锥体是柱体的一个特殊实现（顶半径为 0 ），下面我给出一个柱体的实现算法：

 

	public Cone(float baseRadius, float topRadius, float height,
			int numberOfSides) {
		int degree = 360 / numberOfSides;
		//ry = -degree / 2;
		float r = baseRadius;
		float vertices[] = new float[numberOfSides * 6];
		int current = 0;
		double part = ((2 * Math.PI) / 360);
		float y = (float)(r  / Math.sin(degree/2 * part) * height / 2 );
		int halfTotal = numberOfSides * 3;
		// 算出基面和底面的顶点
		for (int i = 0; i < numberOfSides; i++) {
			float x = (float)Math.cos((degree * i * part));
			float z = -(float)Math.sin((degree * i * part));
			// X轴坐标值
			vertices[current] = (float) (r * x);
			vertices[current+ halfTotal] = topRadius * x;
			// Y轴，固定的
			vertices[current + 1] = -y ;
			vertices[current + 1 + halfTotal] = y;
			// Z轴，角度是逆时针等价分布，投影到Z轴，实际方向是向下，刚好相反
			vertices[current + 2] = (float) (r * z);
			vertices[current + 2 + halfTotal] = topRadius * z;
			
			current += 3;
		}

		current = 0;
		short incides[] = new short[(numberOfSides * 2 + (numberOfSides - 2) * 2) * 3];
		for (int i = 0; i < numberOfSides; i++) {
			incides[current + 0] = (short) i;
			incides[current + 1] = (short) ((i + 1) % numberOfSides);
			incides[current + 2] = (short) (incides[current + 1] + numberOfSides);

			incides[current + 3] = (short) (i);
			incides[current + 4] = (short) incides[current + 2];
			incides[current + 5] = (short) (i + numberOfSides);
			current += 6;
		}

		for (int i = 0; i < numberOfSides - 2; i++) {
			incides[current + 0] = (short) (numberOfSides);
			incides[current + 1] = (short) (numberOfSides + i + 1);
			incides[current + 2] = (short) ((numberOfSides + i + 2));
			current += 3;
		}

		for (int i = 0; i < numberOfSides - 2; i++) {
			incides[current + 0] = (short) (numberOfSides - 1);
			incides[current + 1] = (short) (i);
			incides[current + 2] = (short) (i + 1);
			current += 3;
		}
        }

 

One more thing

Dividing up surfaces is a good thing to know about and by now you know how to divide up a regular square. To divide up a triangle look at the images below. It is a bit different and it might be a bit harder to implement.

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_V
You can also checkout the code from: code.google.com

Previous tutorial: OpenGL ES Tutorial for Android – Part IV – Adding colors
Next tutorial: OpenGL ES Tutorial for Android – Part VI – Textures

Per-Erik Bergman
Consultant at Jayway

 

评论

3 楼 loogson 2013-03-22  

melord 写道

loogson 写道

麻烦问一下，你的Cone类测试了没有，我使用你的Cone测试不通过

测试OK的，所有的代码，我都在Eclipse中编译通过了的。你可以将你的编译错误贴出来看看。

不好意思，我没表达清楚，是编译通过了，只是显示的不正确。有可能是终端的问题~

2 楼 melord 2013-03-14  

loogson 写道

麻烦问一下，你的Cone类测试了没有，我使用你的Cone测试不通过

测试OK的，所有的代码，我都在Eclipse中编译通过了的。你可以将你的编译错误贴出来看看。

1 楼 loogson 2013-03-09  

麻烦问一下，你的Cone类测试了没有，我使用你的Cone测试不通过