Android OpenGL ES 2.0 手把手教学（1）- Hello World!

大家好，下面和大学一起学习Android OpenGL ES 2.0的入门Hello World，在我的github上有一个项目OpenGLES2.0SamplesForAndroid，我会不断地编写学习样例，文章和代码同步更新，欢迎关注，链接：github.com/kenneycode/…

下面开始我们的Hello World之旅，我们将渲染一个三角形，为什么要渲染一个三角形呢？三角形在OpenGL中是很重要的，实际上我们看到的那些复杂图形，它们在OpenGL里都 是通过多个三角形组合而成的，因此我们先来学习如何渲染一个三角形~

要在Android上进行OpenGL渲染，首先要有GL环境，什么是GL环境？后面我会写文章解析，现在只需要知道有这回事就行了。为了简单起见，我们直接使用Android的GLSurfaceView，它就自带了GL环境。

我们在layout中写一个GLSurfaceView然后find出来，这是Android的常规操作，就不多做解释了。然后给GLSurfaceView做一些配置，现在暂时不用管这些配置的用途，后面也会有文章解析~

val glSurfaceView = findViewById<GLSurfaceView>(R.id.glsurfaceview)
// 设置RGBA颜色缓冲、深度缓冲及stencil缓冲大小
// Set the size of RGBA、depth and stencil buffer
glSurfaceView.setEGLConfigChooser(8, 8, 8, 8, 0, 0)
// 设置GL版本，这里设置为2.0
// Set GL version, here I set it to 2.0
glSurfaceView.setEGLContextClientVersion(2)

然后给GLSurfaceView设置Renderer，这个Renderer就是用于做渲染的，可以把GLSurfaceView理解成就是一块画板，具体怎么画，是在Renderer里做的

glSurfaceView.setRenderer(SampleHelloWorld())

我们让SampleHelloWorld实现GLSurfaceView.Renderer接口，将渲染逻辑写在SampleHelloWorld中，共有3个方法需要实现：

class SampleHelloWorld : GLSurfaceView.Renderer {

    override fun onDrawFrame(gl: GL10?) {
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
    }

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
    }

}

其中： onDrawFrame()是渲染时的回调，我们的渲染逻辑就是在这里面写 onSurfaceChanged()是在GLSurfaceView宽高改变时会回调，一般可以在这里记录最新的宽高 onSurfaceCreated()在GLSurfaceView创建好时会回调，一般可以在里面写一些初始化逻辑 我们先在onSurfaceChanged()中加上一些逻辑记录最新的宽高：

override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        // 记录GLSurfaceView的宽高
        // Record the width and height of the GLSurfaceView
        glSurfaceViewWidth = width
        glSurfaceViewHeight = height
}

接下来重点看onSurfaceCreated()和onDrawFrame()，我们先在onSurfaceCreated()做一些初始化逻辑然后在onDrawFrame()中执行渲染

1.调用GLES20.glCreateProgram()创建OpenGL程序，我们将得到一个programId

// 创建GL程序
// Create GL program
val programId = GLES20.glCreateProgram()

2.加载、编译vertex shader和fragment shader 什么是vertex shader和fragment shader？vertex shader是顶点着色器，OpenGL执行渲染时会对每个顶点执行一次，我们可以在其中做一些顶点变换等操作，fragment shader就片元着色器，OpenGL执行渲染时会在栅格化后对每个片元执行一次片元着色器，我们可以在其中决定每个像素输出的颜色 关于vertex shader和fragment shader，后面也会有文章解析，这里就大概了解就行了~ 我们写两个最简单的shader:

private val vertexShaderCode =
            "precision mediump float;\n" +
            "attribute vec4 a_Position;\n" +
            "void main() {\n" +
            "    gl_Position = a_Position;\n" +
            "}"

 private val fragmentShaderCode =
            "precision mediump float;\n" +
            "void main() {\n" +
            "    gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n" +
            "}"

在vertex shader中我们将输入的顶点原样输出，不做任何变换，在fragment shader中将输出颜色设置为RGBA值为(0.0, 0.0, 1.0, 1.0)的颜色，即无透明度的蓝色 shader代码和我们的普通程序代码类似，也是需要编译的，下面是具体的代码：

// 加载、编译vertex shader和fragment shader
// Load and compile vertex shader and fragment shader
val vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER)
val fragmentShader= GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER)
GLES20.glShaderSource(vertexShader, vertexShaderCode)
GLES20.glShaderSource(fragmentShader, fragmentShaderCode)
GLES20.glCompileShader(vertexShader)
GLES20.glCompileShader(fragmentShader)

3.将shader程序附着到GL程序上

// 将shader程序附着到GL程序上
// Attach the compiled shaders to the GL program
GLES20.glAttachShader(programId, vertexShader)
GLES20.glAttachShader(programId, fragmentShader)

4.链接GL程序

// 链接GL程序
// Link the GL program
GLES20.glLinkProgram(programId)

至此，我们就在GPU中创建好了一个具有简单功能的GL程序

5.应用GL程序 创建好了GL程序，但并没有在用它，我们在做一些操作的时候， 比如向它的shader中传递数据，先要让OpenGL知道我们是对哪个GL程序在操作，因此需要先应用GL程序

// 应用GL程序
// Use the GL program
GLES20.glUseProgram(programId)

6.设置三角形顶点数据 我们的目标是渲染一个三角形，下面向shader中的a_Position变量传递三角形顶点，首先构造一个buffer用于承载顶点数据，数据是按x、y、x、y...这样排列的

// 三角形顶点数据
// The vertex data of a triangle
val vertexData = floatArrayOf(0f, 0.5f, -0.5f, -0.5f, 0.5f, -0.5f)

// 将三角形顶点数据放入buffer中
// Put the triangle vertex data into the buffer
val buffer = ByteBuffer.allocateDirect(vertexData.size * java.lang.Float.SIZE)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer()
buffer.put(vertexData)
buffer.position(0)

然后获取a_Position在shader中的位置location，这个location可以理解为就是GPU中代表a_Position一个位置标识，之后操作a_Position都是通过这个location

// 获取字段a_Position在shader中的位置
// Get the location of a_Position in the shader
val location = GLES20.glGetAttribLocation(programId, "a_Position")

获取到location后要启动这个位置，这样才能生效

// 启动对应位置的参数
// Enable the parameter of the location
GLES20.glEnableVertexAttribArray(location)

然后就可以将顶点数据设置给a_Position了，这里glVertexAttribPointer()的第2个参数表示每个顶点由几个float组成，在我们这个例子中是2个，即x、y

// 指定a_Position所使用的顶点数据
// Specify the vertex data of a_Position
GLES20.glVertexAttribPointer(location, 2, GLES20.GL_FLOAT, false,0, buffer)

这样我们就完成了初始化工作，渲染一个三角形需要的数据都准备好了

7.执行渲染 下面我们在onDrawFrame()中写渲染逻辑，我们先设置清屏颜色并清屏，这样背景就会变成我们设置的颜色，这里将背景清成灰色，这一步在这个例子中不是必须的，如果不做清屏，那么背景就是黑色的，如果要绘制可变的效果，比如一个运动的图形，就需要清屏，否则之前所绘制的效果会残留在上面

// 设置清屏颜色
// Set the color which the screen will be cleared to
GLES20.glClearColor(0.9f, 0.9f, 0.9f, 1f)

// 清屏
// Clear the screen
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)

视口大小，渲染到GLSurfaceView上，可以通过设置视口来控制渲染到GLSurfaceView的什么区域中，这里我们渲染到整个GLSurfaceView上

// 设置视口，这里设置为整个GLSurfaceView区域
// Set the viewport to the full GLSurfaceView
GLES20.glViewport(0, 0, glSurfaceViewWidth, glSurfaceViewHeight)

然后调用draw方法进行渲染，这里我们使用GL_TRIANGLES的方式进行渲染，这个在后面的文章也会解析，现在可以简单地理解为它是以每三个点为一个独立三角形的方式来渲染

// 调用draw方法用TRIANGLES的方式执行渲染，顶点数量为3个
// Call the draw method with GL_TRIANGLES to render 3 vertices
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3)

这样，我们就渲染出来一个蓝色三角形：

至此，我们的Hello World之旅馆就圆满结束了，可能其中还有许多的疑问，毕竟OpenGL入门还是有点难度的，没关系，万事开头难

代码在我github的OpenGLES2.0SamplesForAndroid项目中，本文对应的是SampleHelloWorld，项目链接：github.com/kenneycode/…

感谢阅读！