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/…

感谢阅读！