AndroidOpenGLES简明开发教程小结AndroidOpenGLES简明开发教程三：3D绘图基本概念

http://www.guidebee.info/wordpress/archives/1512

前面介绍了使用Android 编写OpenGL ES应用的程序框架&＃xff0c;本篇介绍3D绘图的一些基本构成要素&＃xff0c;最终将实现一个多边形的绘制。

一个3D图形通常是由一些小的基本元素&＃xff08;顶点&＃xff0c;边&＃xff0c;面&＃xff0c;多边形&＃xff09;构成&＃xff0c;每个基本元素都可以单独来操作。

Vertex &＃xff08;顶点&＃xff09;

顶点是3D建模时用到的最小构成元素&＃xff0c;顶点定义为两条或是多条边交会的地方。在3D模型中一个顶点可以为多条边&＃xff0c;面或是多边形所共享。一个顶点也可以代表一个点光源或是Camera的位置。下图中标识为黄色的点为一个顶点(Vertex)。

在Android系统中可以使用一个浮点数数组来定义一个顶点&＃xff0c;浮点数数组通常放在一个Buffer&＃xff08;java.nio)中来提高性能。

比如&＃xff1a;下图中定义了四个顶点和对应的Android 顶点定义&＃xff1a;

private float vertices[] &＃61; {-1.0f, 1.0f, 0.0f, // 0, Top Left-1.0f, -1.0f, 0.0f, // 1, Bottom Left1.0f, -1.0f, 0.0f, // 2, Bottom Right1.0f, 1.0f, 0.0f, // 3, Top Right
};

为了提高性能&＃xff0c;通常将这些数组存放到java.io 中定义的Buffer类中&＃xff1a;

// a float is 4 bytes, therefore we multiply the
//number if vertices with 4.
ByteBuffer vbb &＃61; ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder());
FloatBuffer vertexBuffer &＃61; vbb.asFloatBuffer();
vertexBuffer.put(vertices);
vertexBuffer.position(0);

有了顶点的定义&＃xff0c;下面一步就是如何将它们传给OpenGL ES库&＃xff0c;OpenGL ES提供一个成为”管道Pipeline”的机制&＃xff0c;这个管道定义了一些“开关”来控制OpenGL ES支持的某些功能&＃xff0c;缺省情况这些功能是关闭的&＃xff0c;如果需要使用OpenGL ES的这些功能&＃xff0c;需要明确告知OpenGL “管道”打开所需功能。因此对于我们的这个示例&＃xff0c;需要告诉OpenGL库打开 Vertex buffer以便传入顶点坐标Buffer。要注意的使用完某个功能之后&＃xff0c;要关闭这个功能以免影响后续操作&＃xff1a;

// 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&＃39;t forget to disable it.
// Disable the vertices buffer.
gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);// OpenGL docs.

Edge&＃xff08;边&＃xff09;

边定义为两个顶点之间的线段。边是面和多边形的边界线。在3D模型中&＃xff0c;边可以被相邻的两个面或是多边形形共享。对一个边做变换将影响边相接的所有顶点&＃xff0c;面或多边形。在OpenGL中&＃xff0c;通常无需直接来定义一个边&＃xff0c;而是通过顶点定义一个面&＃xff0c;从而由面定义了其所对应的三条边。可以通过修改边的两个顶点来更改一条边&＃xff0c;下图黄色的线段代表一条边&＃xff1a;

Face (面&＃xff09;

在OpenGL ES中&＃xff0c;面特指一个三角形&＃xff0c;由三个顶点和三条边构成&＃xff0c;对一个面所做的变化影响到连接面的所有顶点和边&＃xff0c;面多边形。下图黄色区域代表一个面。

定义面的顶点的顺序很重要 在拼接曲面的时候&＃xff0c;用来定义面的顶点的顺序非常重要&＃xff0c;因为顶点的顺序定义了面的朝向&＃xff08;前向或是后向&＃xff09;&＃xff0c;为了获取绘制的高性能&＃xff0c;一般情况不会绘制面的前面和后面&＃xff0c;只绘制面的“前面”。虽然“前面”“后面”的定义可以应人而易&＃xff0c;但一般为所有的“前面”定义统一的顶点顺序(顺时针或是逆时针方向&＃xff09;。

下面代码设置逆时针方法为面的“前面”&＃xff1a;

gl.glFrontFace(GL10.GL_CCW);

打开 忽略“后面”设置&＃xff1a;

gl.glEnable(GL10.GL_CULL_FACE);

Polygon &＃xff08;多边形&＃xff09;

多边形由多个面&＃xff08;三角形&＃xff09;拼接而成&＃xff0c;在三维空间上&＃xff0c;多边形并一定表示这个Polygon在同一平面上。这里我们使用缺省的逆时针方向代表面的“前面Front)&＃xff0c;下图黄色区域为一个多边形。

来看一个多边形的示例在Android系统如何使用顶点和buffer 来定义&＃xff0c;如下图定义了一个正方形&＃xff1a;

对应的顶点和buffer 定义代码&＃xff1a;

private short[] indices &＃61; { 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.
ByteBuffer ibb &＃61; ByteBuffer.allocateDirect(indices.length * 2);
ibb.order(ByteOrder.nativeOrder());
ShortBuffer indexBuffer &＃61; ibb.asShortBuffer();
indexBuffer.put(indices);
indexBuffer.position(0);


Render (渲染&＃xff09;

我们已定义好了多边形&＃xff0c;下面就要了解如和使用OpenGL ES的API来绘制&＃xff08;渲染&＃xff09;这个多边形了。OpenGL ES提供了两类方法来绘制一个空间几何图形&＃xff1a;

• public abstract void glDrawArrays(int mode, int first, int count)   使用VetexBuffer 来绘制&＃xff0c;顶点的顺序由vertexBuffer中的顺序指定。
• public abstract void glDrawElements(int mode, int count, int type, Buffer indices)  &＃xff0c;可以重新定义顶点的顺序&＃xff0c;顶点的顺序由indices Buffer 指定。

前面我们已定义里顶点数组&＃xff0c;因此我们将采用glDrawElements 来绘制多边形。

同样的顶点&＃xff0c;可以定义的几何图形可以有所不同&＃xff0c;比如三个顶点&＃xff0c;可以代表三个独立的点&＃xff0c;也可以表示一个三角形&＃xff0c;这就需要使用mode 来指明所需绘制的几何图形的基本类型。

GL_POINTS

绘制独立的点。

GL_LINE_STRIP

绘制一系列线段。

GL_LINE_LOOP

类同上&＃xff0c;但是首尾相连&＃xff0c;构成一个封闭曲线。

GL_LINES

顶点两两连接&＃xff0c;为多条线段构成。

GL_TRIANGLES

每隔三个顶点构成一个三角形&＃xff0c;为多个三角形组成。

GL_TRIANGLE_STRIP

每相邻三个顶点组成一个三角形&＃xff0c;为一系列相接三角形构成。

GL_TRIANGLE_FAN

以一个点为三角形公共顶点&＃xff0c;组成一系列相邻的三角形。

下面可以来绘制正方形了&＃xff0c;在项目中添加一个Square.java 定义如下&＃xff1a;

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[] &＃61; {-1.0f, 1.0f, 0.0f, // 0, Top Left-1.0f, -1.0f, 0.0f, // 1, Bottom Left1.0f, -1.0f, 0.0f, // 2, Bottom Right1.0f, 1.0f, 0.0f, // 3, Top Right};// The order we like to connect them.private short[] indices &＃61; { 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&＃61; ByteBuffer.allocateDirect(vertices.length * 4);vbb.order(ByteOrder.nativeOrder());vertexBuffer &＃61; vbb.asFloatBuffer();vertexBuffer.put(vertices);vertexBuffer.position(0);// short is 2 bytes, therefore we multiply//the number if// vertices with 2.ByteBuffer ibb&＃61; ByteBuffer.allocateDirect(indices.length * 2);ibb.order(ByteOrder.nativeOrder());indexBuffer &＃61; ibb.asShortBuffer();indexBuffer.put(indices);indexBuffer.position(0);}/*** This function draws our square on screen.* &＃64;param gl*/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,vertexBuffer);gl.glDrawElements(GL10.GL_TRIANGLES, indices.length,GL10.GL_UNSIGNED_SHORT, indexBuffer);// Disable the vertices buffer.gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);// Disable face culling.gl.glDisable(GL10.GL_CULL_FACE);}}

在OpenGLRenderer 中添加Square成员变量并初始化&＃xff1a;

// Initialize our square.
Square square &＃61; new Square();

并在public void onDrawFrame(GL10 gl) 添加

// Draw our square.
square.draw(gl);


来绘制这个正方形&＃xff0c;编译运行&＃xff0c;什么也没显示&＃xff0c;这是为什么呢&＃xff1f;这是因为OpenGL ES从当前位置开始渲染&＃xff0c;缺省坐标为(0,0,0)&＃xff0c;和View port 的坐标一样&＃xff0c;相当于把画面放在眼前&＃xff0c;对应这种情况OpenGL不会渲染离view Port很近的画面&＃xff0c;因此我们需要将画面向后退一点距离&＃xff1a;

// Translates 4 units into the screen.
gl.glTranslatef(0, 0, -4);

在编译运行&＃xff0c;这次倒是有显示了&＃xff0c;当正方形迅速后移直至看不见&＃xff0c;这是因为每次调用onDrawFrame 时&＃xff0c;每次都再向后移动4个单位&＃xff0c;需要加上重置Matrix的代码。

// Replace the current matrix with the identity matrix
gl.glLoadIdentity();

最终onDrawFrame的代码如下&＃xff1a;

public void onDrawFrame(GL10 gl) {// Clears the screen and depth buffer.gl.glClear(GL10.GL_COLOR_BUFFER_BIT |GL10.GL_DEPTH_BUFFER_BIT);gl.glLoadIdentity();gl.glTranslatef(0, 0, -4);// Draw our square.square.draw(gl); // ( NEW )}