在使用 OpenGL 定义要绘制的形状后,您可能想要绘制它们。使用 OpenGL ES 2.0 绘制形状所需的代码量可能比您想象的要多,因为该 API 对图形渲染流水线提供了很大的控制权。
本课程将解释如何使用 OpenGL ES 2.0 API 绘制您在上一课程中定义的形状。
初始化形状
在进行任何绘制之前,您必须初始化和加载您计划绘制的形状。除非您在程序中使用的形状结构(原始坐标)在执行过程中发生变化,否则为了内存和处理效率,您应该在渲染器的 onSurfaceCreated()
方法中初始化它们。
Kotlin
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() } ... }
Java
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 绘制已定义的形状需要大量的代码,因为您必须为图形渲染流水线提供很多细节。具体来说,您必须定义以下内容
- 顶点着色器 - 用于渲染形状顶点的 OpenGL ES 图形代码。
- 片段着色器 - 用于渲染形状表面颜色或纹理的 OpenGL ES 代码。
- 程序 - 一个 OpenGL ES 对象,其中包含您希望用于绘制一个或多个形状的着色器。
您至少需要一个顶点着色器来绘制形状,以及一个片段着色器来为形状着色。这些着色器必须经过编译,然后添加到 OpenGL ES 程序中,该程序随后用于绘制形状。以下是在 Triangle
类中定义可用于绘制形状的基本着色器的示例
Kotlin
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;" + "}" ... }
Java
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 Language (GLSL) 代码,在使用之前必须在 OpenGL ES 环境中进行编译。要编译此代码,请在渲染器类中创建一个实用方法
Kotlin
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) } }
Java
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 程序对象中,然后链接程序。在绘制对象的构造函数中执行此操作,以便只执行一次。
注意:编译 OpenGL ES 着色器和链接程序在 CPU 周期和处理时间方面成本很高,因此您应该避免多次执行此操作。如果您在运行时不知道着色器的内容,则应构建代码,使其仅创建一次,然后缓存以备后用。
Kotlin
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) } } }
Java
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()
方法。此代码将位置和颜色值设置到形状的顶点着色器和片段着色器,然后执行绘制函数。
Kotlin
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) } }
Java
private int positionHandle; private int colorHandle; 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 positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition"); // Enable a handle to the triangle vertices GLES20.glEnableVertexAttribArray(positionHandle); // Prepare the triangle coordinate data GLES20.glVertexAttribPointer(positionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer); // get handle to fragment shader's vColor member colorHandle = GLES20.glGetUniformLocation(mProgram, "vColor"); // 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(positionHandle); }
完成所有这些代码后,只需在渲染器的 onDrawFrame()
方法中调用 draw()
方法即可绘制此对象。
Kotlin
override fun onDrawFrame(unused: GL10) { ... mTriangle.draw() }
Java
public void onDrawFrame(GL10 unused) { ... mTriangle.draw(); }
运行应用时,它应如下所示

图 1. 未使用投影或相机视图绘制的三角形。
此代码示例存在一些问题。首先,它不会让您的朋友眼前一亮。其次,当您更改设备的屏幕方向时,三角形会有点变形并改变形状。形状发生倾斜的原因是对象顶点未针对显示 GLSurfaceView
的屏幕区域的比例进行校正。您可以在下一课程中使用投影和相机视图解决此问题。
最后,三角形是静止的,这有点无聊。在添加运动课程中,您将使此形状旋转,并更有趣地使用 OpenGL ES 图形流水线。