Android OpenGL ES 开发（一）：相关概念

OpenGL(Open Graphics Library) 是开放图形库，是一个跨平台的图形 API。OpenGL ES(OpenGL for Embedded System)是专为移动端提供的一个子集。目前主要版本有1.0/1.1/2.0/3.0/3.1：

• 1.0：Ａndroid 1.0和更高的版本支持这个API规范
• 2.0：不兼容 OpenGL ES 1.x。Android 2.2(API 8)和更高的版本支持这个API规范
• 3.0：向下兼容 OpenGL ES 2.x。Android 4.3(API 18)及更高的版本支持这个API规范
• 3.1：向下兼容 OpenGL ES3.0/2.0。Android 5.0（API 21）和更高的版本支持这个API规范

先了解一下 OpenGl 几个相关的概念

相关概念

管线

也称渲染管线，因为 OpenGL ES 在渲染处理过程中会顺序执行一系列操作，这一系列相关的处理阶段就被称为 OpenGL ES 渲染管线。OpenGL ES 渲染过程就如流水线作业一样，这样的实现极大地提高了渲染的效率。如图就是 OpenGL ES 的管线图，学习OpenGL ES 就是学习这张图中的每一个部分。

图中阴影部分的 Vertex Shader(顶点着色器) 和 Fragment Shader(片元着色器) 是可编程管线 。

顶点

OpenGl 物体图形都由点、线、多边形组成，组成他们的关键就在于顶点数据。绘制时需要准备绘制的位置，这些位置就是顶点，顶点组合起来就是顶点坐标。

坐标系

OpenGl 使用右手坐标系，手机屏幕中心坐标系（0，0，0），左上角坐标（-1, 1, 0），依此类推。

着色器语言

着色器的编程语言是基于 C 语言开发的，被称为 GLSL（OpenGL Shading Language），和 C 语言最大的区别是它新增了许多适合图形处理的东西，比如定义了向量和矩阵两个数据类型，另外 GLSL 也对高并发进行了特殊优化。

GLSL 详细语法可见：GLSL 中文手册

顶点着色器（Vertex Shader）

顶点着色器分为输入和输出两部分，负责的功能是把输入的数据进行矩阵变换位置，计算光照公式生成逐顶点颜⾊，⽣成/变换纹理坐标。并且把位置和纹理坐标这样的参数发送到片段着色器。

顶点着色器的输入数据由下面组成：

• Attributes：使用顶点数组封装每个顶点的数据，一般用于每个顶点都各不相同的变量，如顶点位置、颜色等。
• Uniforms：顶点着色器使用的常量数据，不能被着色器修改，一般用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量，如当前光源的位置。
• Samplers：这个是可选的，一种特殊的 uniforms，表示顶点着色器使用的纹理。
• Shader program：顶点着色器的源码或可执行文件，描述了将对顶点执行的操作。

顶点着色器对于 3D 模型网格的每个顶点执行一次，确定顶点的最终位置。顶点着色器取得一个位置及相关的颜色数据作为输入属性，用一个 4x4 矩阵变换位置，并输出变换后的位置和颜色。

顶点着色器是可编程渲染管道，例如一个简单的顶点着色器：

attribute vec4 aPosition;

void main() {
  gl_Position = aPosition;
}

上面例子里的 gl_Position 是顶点着色器的内建输出变量。

gl_Position： 顶点坐标
gl_PositionSize：点的大小，默认值是 1

图元装配

图元指的是点、直线和三角形。该过程还有两个重要操作：裁剪和淘汰。对不在屏幕可见的 3D 区域内的图元进行裁剪，根据图元面向前方或后方选择抛弃它们（比如物体内部的点）。

光栅化

将图元转为片段的过程称为光栅化。片段可以理解为带有深度信息的像素点。屏幕上的一个像素点可能对应多个片段。

片段着色器（Fragment Shader）

片段着色器用于对片段进行处理，例如纹理采样、颜色汇总等，将每个片段的颜色等属性计算出来并向后传输。编写片元着色器可以实现滤镜、美颜、图片处理、类似抖音的一些特效等效果。片段着色器对光栅化之后 2D 图像中的每个像素处理一次，3D 物体的表面最终显示成什么样子由片段着色器决定。

片段着色器也是可编程的，例如：

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)
}

gl_FragColor 是片段着色器的内建输出变量，指当前片元的颜色。

GLSurfaceView

我们都知道 SurfaveView 最大的特点是可以在子线程中绘制图象，GLSurfaceView 继承自 SurfaceView，其实是对 SurfaceView 再做了一次封装，方便在 Android 中使用 OpenGL。

GLSurfaceView 的渲染被委托给渲染器在独立的渲染线程里进行，通过 setRender(Render) 设置渲染器。

HelloWorld

了解相关概念后，先动手编写个简单的 Demo 实操一下。Android 上使用 OpenGl ES 流程如下：

1. 在 AndroidMenifest 中设置 OpenGL 版本：

如果应用不指定 android:glEsVersion 属性，则系统默认使用 OpenGL ES 1.0，即所有 Android 设备都支持的版本。

<uses-feature android:glEsVersion="0x00020000" android:required="true" />

2. 自定义渲染器

新建类实现 GLSurfaceView.Renderer 接口，并在三个回调方法中做相应操作。

• 在 Surface 创建时，设置设置清除后的颜色预设值
• 在 Surface 变化时，更新视口矩形宽高、窗口位置
• 在每次绘制帧时，清空颜色缓冲并置为预设颜色

class CustomRender: GLSurfaceView.Renderer {
    override fun onDrawFrame(gl: GL10?) {
        //绘制当前帧
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
    }

    override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
        //surface 变化时的回调，包括尺寸变化、设备屏幕方向变化等
        GLES20.glViewport(0, 0, width, height);
    }

    override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
        //surface 创建时的回调
        GLES20.glClearColor(0.0f, 0.0f, 1.0f, 1.0f)
    }
}

3. 自定义 GLSurfaceView

新建类继承自 GLSurfaceView，并在初始化时设置渲染器

class CustomGLSurfaceView(context: Context?) : GLSurfaceView(context) {
    init {
        setRenderer(CustomRender())
    }
}

4. 展示 GLSurfaceView

将 GLSurfaceView 添加到布局

class KotlinActivity : AppCompatActivity() {

    private val glSurfaceView by lazy { CustomGLSurfaceView(this) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(glSurfaceView)
    }
}

运行之后，页面会显示蓝色背景，这是 GLSurfaceView 最简单的运用，简单到我都不好意思放效果图。但千里之行始于足下，下一次我们接着深入 GLSurfaceView 的使用，动手编写着色器来实现图形绘制。

Comming soon 😛