Android OpenGL ES2.0编程教程系列之绘制图形（三）

原文链接

定义好想要用OpenGL绘制的图形后，你大概想要画它们了。绘制形状可能需要比你想象的更多的代码，因为API提供了在图形渲染管线上的大量的控制。

本节内容讲解如何使用OpenGL ES 2.0 API来绘制你在上节内容中定义的形状。

初始化形状

在任何绘制之前，你都必须初始化和加载你计划绘制的图形。除非你在程序中使用的形状的结构（原始坐标）是在程序执行过程中改变的，你应该在你的渲染器的onSurfaceCreated()方法中初始化它们来提高内存和执行的效率。

public class MyGLRenderer implements GLSurfaceView.Renderer {

    ...
    private Triangle mTriangle;
    private Square   mSquare;

    public void onSurfaceCreated(GL10 unused, EGLConfig config) {
        ...

        // initialize a triangle
        mTriangle = new Triangle();
        // initialize a square
        mSquare = new Square();
    }
    ...
}

绘制形状
用 OpenGL ES 2.0绘制定义的形状需要大量有效的代码，因为你必须给图形渲染管线提供大量的细节。特别地，你需要定义以下几个内容：

• Vertex Shader -—渲染形状定点的OpenGL ES图形代码
  
• Fragment Shader—用颜色或纹理渲染形状的面的OpenGL ES代码
  
• Program—包含你想用来绘制一个或多个形状的着色器的一个OpenGL ES 对象
  

你至少需要一个定点着色器去绘制形状和一个片元着色器去个这些形状上色。这些着色器必须先编译然后添加到用于绘制形状的OpenGL ES程序中。下面是一个教你怎样定义一个可以绘制形状的基本着色器的例程。在三角形类中：

public class Triangle {

    private final String vertexShaderCode =
        "attribute vec4 vPosition;" +
        "void main() {" +
        "  gl_Position = vPosition;" +
        "}";

    private final String fragmentShaderCode =
        "precision mediump float;" +
        "uniform vec4 vColor;" +
        "void main() {" +
        "  gl_FragColor = vColor;" +
        "}";

    ...
}

着色器包含OpenGL shading语言代码，这些代码在OpenGL ES环境中使用前必须先编译。在你的渲染器类中创建一个工具类方法来编译这些shader代码。

public static int loadShader(int type, String shaderCode){

    // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
    // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
    int shader = GLES20.glCreateShader(type);

    // add the source code to the shader and compile it
    GLES20.glShaderSource(shader, shaderCode);
    GLES20.glCompileShader(shader);

    return shader;
}

为了绘制形状，你必须编译shader代码，并将它们添加到 OpenGL ES程序对象中，然后链接它们。在你的绘制对象的构造器中做这件事，因此它会只执行一次。

注意：的编译shader代码和链接程序是很耗CPU资源和处理时间的，

public class Triangle() {
    ...

    private final int mProgram;

    public Triangle() {
        ...

        int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
                                        vertexShaderCode);
        int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,
                                        fragmentShaderCode);

        // create empty OpenGL ES Program
        mProgram = GLES20.glCreateProgram();

        // add the vertex shader to program
        GLES20.glAttachShader(mProgram, vertexShader);

        // add the fragment shader to program
        GLES20.glAttachShader(mProgram, fragmentShader);

        // creates OpenGL ES program executables
        GLES20.glLinkProgram(mProgram);
    }
}

此时此刻你准备添加一个真实的调用来绘制你的形状。用OpenGL ES绘制形状需要你指定几个参数，来告诉渲染管线你想画什么，以及怎么画他们由于绘制的选项会由于形状的不同而不同，因此让你的形状类包含他们自己的绘制逻辑是个好主意。

创建draw()方法来绘制形状，下面的代码是给形状的顶点着色器和片元着色器来设置位置值和颜色值。，然后执行绘制功能：

private int mPositionHandle;
private int mColorHandle;

private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

public void draw() {
    // Add program to OpenGL ES environment
    GLES20.glUseProgram(mProgram);

    // get handle to vertex shader's vPosition member
    mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

    // Enable a handle to the triangle vertices
    GLES20.glEnableVertexAttribArray(mPositionHandle);

    // Prepare the triangle coordinate data
    GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                                 GLES20.GL_FLOAT, false,
                                 vertexStride, vertexBuffer);

    // get handle to fragment shader's vColor member
    mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

    // Set color for drawing the triangle
    GLES20.glUniform4fv(mColorHandle, 1, color, 0);

    // Draw the triangle
    GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

    // Disable vertex array
    GLES20.glDisableVertexAttribArray(mPositionHandle);
}

一旦你有了这些代码，你只要在onFrameDraw()方法中调用draw()方法便可绘制你的形状了。

public void onDrawFrame(GL10 unused) {
    ...

    mTriangle.draw();
}

当你运行应用程序是它应该看起来像下面这个样子：

图1、没有用投影和相机视图绘制的三角形

这个例子中的代码有些小问题。首先，它无法给你的朋友留下深刻印象；第二，这个三角形有点被压扁了，而且当你改变屏幕方向时形状会变形。形状变形的原因是绘制对象的顶点没有针对GLSurfaceView显示的屏幕区域的屏幕比例做修正。你可以用下一节课程中的投影和相机视图来修复这些问题。

最后这个三角形是固定不动的，这有些无聊。不过在“添加动作”的课程中，你可以让它旋转，并且可以用OpenGL图形管线来做更多有趣的东西。

例程源码下载