在定义要使用 OpenGL 绘制的形状后，您可能想要绘制它们。使用 OpenGL ES 2.0 绘制形状需要的代码比您想象的要多一些，因为 API 提供了对图形渲染管道的大量控制。

本课介绍如何使用 OpenGL ES 2.0 API 绘制您在上一课中定义的形状。

初始化形状

在您进行任何绘图之前，您必须初始化并加载您计划绘制的形状。除非您在程序中使用的形状的结构（原始坐标）在执行过程中发生变化，否则您应该在渲染器的 onSurfaceCreated() 方法中初始化它们以提高内存和处理效率。

class MyGLRenderer : GLSurfaceView.Renderer {
    ...
    private lateinit var mTriangle: Triangle
    private lateinit var mSquare: Square

    override fun onSurfaceCreated(unused: GL10, config: EGLConfig) {
        ...
        // initialize a triangle
        mTriangle = Triangle()
        // initialize a square
        mSquare = Square()
    }
    ...
}

绘制形状

使用 OpenGL ES 2.0 绘制定义的形状需要大量代码，因为您必须向图形渲染管道提供大量细节。具体来说，您必须定义以下内容：

顶点着色器 - 用于渲染形状顶点的 OpenGL ES 图形代码。
片段着色器 - OpenGL ES 代码，用于渲染具有颜色或纹理的形状的表面。
程序 - 一个 OpenGL ES 对象，包含要用于绘制一个或多个形状的着色器。

您至少需要一个顶点着色器来绘制形状和一个片段着色器来为该形状着色。必须编译这些着色器，然后将其添加到 OpenGL ES 程序中，然后使用该程序绘制形状。下面是一个示例，说明如何定义可用于在 Triangle 类中绘制形状的基本着色器：

class Triangle {

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

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

    ...
}

着色器包含 OpenGL 着色语言 (GLSL) 代码，在 OpenGL ES 环境中使用它之前必须对其进行编译。要编译此代码，请在渲染器类中创建一个实用方法：

fun loadShader(type: Int, shaderCode: String): Int {

    // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
    // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
    return GLES20.glCreateShader(type).also { shader ->

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

为了绘制形状，您必须编译着色器代码，将它们添加到 OpenGL ES 程序对象，然后链接程序。在绘制对象的构造函数中执行此操作，因此只执行一次。

注意：编译 OpenGL ES 着色器和链接程序在 CPU 周期和处理时间方面非常昂贵，因此您应该避免多次执行此操作。如果您不知道运行时着色器的内容，您应该构建代码，使它们只创建一次，然后缓存以备后用。

class Triangle {
    ...

    private var mProgram: Int

    init {
        ...

        val vertexShader: Int = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode)
        val fragmentShader: Int = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode)

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

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

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

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

此时，您已准备好添加绘制形状的实际调用。使用 OpenGL ES 绘制形状需要您指定几个参数来告诉渲染管道您要绘制什么以及如何绘制。由于绘图选项会因形状而异，因此让您的形状类包含它们自己的绘图逻辑是个好主意。创建用于绘制形状的 draw() 方法。此代码将位置和颜色值设置到形状的顶点着色器和片段着色器，然后执行绘图函数。

private var positionHandle: Int = 0
private var mColorHandle: Int = 0

private val vertexCount: Int = triangleCoords.size / COORDS_PER_VERTEX
private val vertexStride: Int = COORDS_PER_VERTEX * 4 // 4 bytes per vertex

fun draw() {
    // Add program to OpenGL ES environment
    GLES20.glUseProgram(mProgram)

    // get handle to vertex shader's vPosition member
    positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition").also {

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

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

        // get handle to fragment shader's vColor member
        mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor").also { colorHandle ->

            // Set color for drawing the triangle
            GLES20.glUniform4fv(colorHandle, 1, color, 0)
        }

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

        // Disable vertex array
        GLES20.glDisableVertexAttribArray(it)
    }
}

准备好所有这些代码后，绘制此对象只需要从渲染器的 onDrawFrame() 方法中调用 draw() 方法：

override fun onDrawFrame(unused: GL10) {
    ...

    mTriangle.draw()
}

当您运行该应用程序时，它应该看起来像这样：

此代码示例存在一些问题。首先，它不会给您的朋友留下深刻印象。其次，当您更改设备的屏幕方向时，三角形会有点压扁并改变形状。形状倾斜的原因是对象的顶点没有根据显示 GLSurfaceView 的屏幕区域的比例进行校正。您可以在下一课中使用投影和相机视图解决该问题。

最后，三角形是静止的，有点无聊。在“添加运动”课程中，您使这个形状旋转并更有趣地使用 OpenGL ES 图形管道。

05、Android OpenGL学习-绘制形状

初始化形状

绘制形状