OpenGL ES(3)——绘制图形

在你定义了被OpenGL绘制的形状之后，你可能想要真正地绘制出它们。OpenGL ES 2.0可能会比你想象的花费更多代码，因为API提供了对于图像渲染管道相当多的控制。

这节课解释了怎样去使用OpenGL ES 2.0 API绘制你之前定义的图形。

在你做任何绘制之前，你必须初始化并加载你计划绘制的形状。你应该在Renderer的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程序，然后被用来绘制图形。这里是怎样去定义绘制Triangle类的基本着色器的一个例子。

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 ES环境的OpenGL Shading Language(GLSL)代码。为了编译这些代码，在渲染器类中创建一个静态方法。

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;
}

为了绘制你的图形，你必须编译着色器代码，将他们添加到OpenGL ES program对象然后链接到程序之中。在被绘制的对象的构造函数中做这件事情，这样它只会执行一次。

注意：编译OpenGL ES着色器和链接程序具有比较高的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);
}

当你将所有这些代码就位的时候，绘制这个对象只需要在渲染器的onDrawFrame()方法中调用对象的draw()方法就可以。

当你在运行应用的时候，应该看起来是这样的：

这个代码示例有些问题。首先，它不会让别人印象深刻。第二，三角形有些扁，而且你改变设备的屏幕方向之后形状也会改变。图形扭曲的原因是对象的顶点坐标没有在GLSurfaceView显示的屏幕区域中修正。你可以在下节课中使用投影和camera view来解决这个问题。
最后，三角形是静止的，有一些无聊。在添加动作这一课中，你会让这个图形旋转并使用OpenGL ES图像管道做更有趣的事情。