在您定义了要使用 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 着色语言 (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 图形管道。