绘制形状(Drawing Shapes)

编写:jdneo - 原文:http://developer.android.com/training/graphics/opengl/draw.html

在定义了将要绘制的形状之后，你可能希望使用 OpenGL 绘制出它们。使用 OpenGL ES 2.0 绘制图形可能会比你想象当中更复杂一些，因为 API 中提供了大量对于图形渲染流程的控制。

这节课将解释如何使用 OpenGL ES 2.0 接口画出在上一节课中定义的形状。

初始化形状(Initialize Shapes)

在你开始绘画之前，你需要初始化并加载你期望绘制的图形。除非你所使用的形状结构（原始坐标）在执行过程中发生了变化，不然的话你应该在渲染器的 onSurfaceCreated() 方法中初始化它们，这样做是出于内存和执行效率的考量。

  1. public class MyGLRenderer implements GLSurfaceView.Renderer {
  3.     ...
  4.     private Triangle mTriangle;
  5.     private Square   mSquare;
  7.     public void onSurfaceCreated(GL10 unused, EGLConfig config) {
  8.         ...
  10.         // initialize a triangle
  11.         mTriangle = new Triangle();
  12.         // initialize a square
  13.         mSquare = new Square();
  14.     }
  15.     ...
  16. }

画一个形状(Draw a Shape)

使用 OpenGL ES 2.0 画一个定义好的形状需要较多代码，因为你需要提供很多图形渲染流程的细节。具体而言，你必须定义如下几项：

  • 顶点着色器（Vertex Shader）：用来渲染形状顶点的 OpenGL ES 代码。
  • 片段着色器（Fragment Shader）：使用颜色或纹理渲染形状表面的 OpenGL ES 代码。
  • 程式（Program）：一个 OpenGL ES 对象，包含了你希望用来绘制一个或更多图形所要用到的着色器。

你需要至少一个顶点着色器来绘制一个形状，以及一个片段着色器为该形状上色。这些着色器必须被编译然后添加到一个 OpenGL ES Program 当中，并利用它来绘制形状。下面的代码在 Triangle 类中定义了基本的着色器，我们可以利用它们绘制出一个图形：

  1. public class Triangle {
  3.     private final String vertexShaderCode =
  4.         "attribute vec4 vPosition;" +
  5.         "void main() {" +
  6.         "  gl_Position = vPosition;" +
  7.         "}";
  9.     private final String fragmentShaderCode =
  10.         "precision mediump float;" +
  11.         "uniform vec4 vColor;" +
  12.         "void main() {" +
  13.         "  gl_FragColor = vColor;" +
  14.         "}";
  16.     ...
  17. }

着色器包含了 OpenGL Shading Language（GLSL）代码，它必须先被编译然后才能在 OpenGL 环境中使用。要编译这些代码，需要在你的渲染器类中创建一个辅助方法：

  1. public static int loadShader(int type, String shaderCode){
  3.     // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
  4.     // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
  5.     int shader = GLES20.glCreateShader(type);
  7.     // add the source code to the shader and compile it
  8.     GLES20.glShaderSource(shader, shaderCode);
  9.     GLES20.glCompileShader(shader);
  11.     return shader;
  12. }

为了绘制你的图形，你必须编译着色器代码，将它们添加至一个 OpenGL ES Program 对象中，然后执行链接。在你的绘制对象的构造函数里做这些事情，这样上述步骤就只用执行一次。

Note：编译 OpenGL ES 着色器及链接操作对于CPU周期和处理时间而言，消耗是巨大的，所以你应该避免重复执行这些事情。如果在执行期间不知道着色器的内容，那么你应该在构建你的应用时，确保它们只被创建了一次，并且缓存以备后续使用。

  1. public class Triangle() {
  2.     ...
  4.     private final int mProgram;
  6.     public Triangle() {
  7.         ...
  9.         int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
  10.                                         vertexShaderCode);
  11.         int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,
  12.                                         fragmentShaderCode);
  14.         // create empty OpenGL ES Program
  15.         mProgram = GLES20.glCreateProgram();
  17.         // add the vertex shader to program
  18.         GLES20.glAttachShader(mProgram, vertexShader);
  20.         // add the fragment shader to program
  21.         GLES20.glAttachShader(mProgram, fragmentShader);
  23.         // creates OpenGL ES program executables
  24.         GLES20.glLinkProgram(mProgram);
  25.     }
  26. }

至此，你已经完全准备好添加实际的调用语句来绘制你的图形了。使用OpenGL ES绘制图形需要你定义一些变量来告诉渲染流程你需要绘制的内容以及如何绘制。既然绘制属性会根据形状的不同而发生变化，把绘制逻辑包含在形状类里面将是一个不错的主意。

创建一个draw()方法来绘制图形。下面的代码为形状的顶点着色器和形状着色器设置了位置和颜色值，然后执行绘制函数：

  1. private int mPositionHandle;
  2. private int mColorHandle;
  4. private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
  5. private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
  7. public void draw() {
  8.     // Add program to OpenGL ES environment
  9.     GLES20.glUseProgram(mProgram);
  11.     // get handle to vertex shader's vPosition member
  12.     mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
  14.     // Enable a handle to the triangle vertices
  15.     GLES20.glEnableVertexAttribArray(mPositionHandle);
  17.     // Prepare the triangle coordinate data
  18.     GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
  19.                                  GLES20.GL_FLOAT, false,
  20.                                  vertexStride, vertexBuffer);
  22.     // get handle to fragment shader's vColor member
  23.     mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
  25.     // Set color for drawing the triangle
  26.     GLES20.glUniform4fv(mColorHandle, 1, color, 0);
  28.     // Draw the triangle
  29.     GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
  31.     // Disable vertex array
  32.     GLES20.glDisableVertexAttribArray(mPositionHandle);
  33. }

一旦你完成了上述所有代码，仅需要在你渲染器的onDrawFrame()方法中调用draw()方法就可以画出我们想要画的对象了：

  1. public void onDrawFrame(GL10 unused) {
  2.     ...
  4.     mTriangle.draw();
  5. }

当你运行这个应用时，它看上去会像是这样：

ogl-triangle

在这个代码样例中，还存在一些问题。首先，它无法给用户带来什么深刻的印象。其次，这个三角形看上去有一些扁，另外当你改变屏幕方向时，它的形状也会随之改变。发生形变的原因是因为对象的顶点没有根据显示GLSurfaceView的屏幕区域的长宽比进行修正。你可以在下一节课中使用投影（Projection）或者相机视角（Camera View）来解决这个问题。

最后，这个三角形是静止的，这看上去有些无聊。在添加移动课程当中（后续课程），你会让这个形状发生旋转，并使用一些OpenGL ES图形处理流程中更加新奇的用法。