盒子
盒子
文章目录
  1. 基本概念
    1. 坐标
    2. 形状与方向
  2. GL程序
    1. 着色器源码
    2. 创建GL程序
    3. 添加顶点与片段着色器
    4. 链接与应用
  3. 数据填充
  4. 渲染

Android OpenGL ES 基础原理

2022.02.14 Rouse android  热度 ℃

由于5G的发展，现在音视频越来越流行，我们的生活已经完全被抖音、视频号、B站等视频应用所包围。从这一点也能看到音视频的重要性。

而作为一名Android开发者，是时候来了解一下关于Android方面渲染方面的知识。音视频的应用都离不开OpenGL ES的处理。对于视频的高效渲染与融合操作是至关重要的。

xx

上面的这种动画相信大家都很熟悉，类似的动画在各大直播间都会出现。那么这炫酷的原理实现内部都离不开OpenGL ES的高效渲染与更高级的融合处理。

多的就先不说了，现在我们就来认识一下OpenGL ES。

基本概念

Android可以通过OpenGL来支持高效的2D和3D图形，同时OpenGL是一种跨平台的图形API。其中OpenGL ES是OpenGL规范的一种形式，适用于嵌入式设备。

Android支持多种版本的OpenGL ES API：

  1. 1.0&1.1 Android1.0及以上
  2. 2.0 Android2.2及以上
  3. 3.0 Android4.3及以上
  4. 3.1 Android5.0及以上

我们的内容主要是基于OpenGL ES 2.0来进行，也就是进行二维的图形渲染。

坐标

在Android中通过Canvas进行绘制的坐标原点是在屏幕的左上角，同时它的坐标范围都是以屏幕的宽高来定义。

OpenGL ES则不同，它是以绘制区域的中心为原点，同时它的坐标范围是-1.0 ~ 1.0。也就是说它的坐标都是基于可绘制区域进行比例换算。并不是真正的值。



形状与方向

在OpenGL ES中，绘制的形状都是以三角形为基础，也就是说它必须由3个或者以上的点来进行绘制。所以它是由多个三角形进行组合成特定的形状，进过不同程度的交叉与重叠来达到不同的形状。

例如以二维空间来定义



同时还存在绘制顺序，所谓的绘制顺序也是以三角形为基础，通过三角形的三个顶点进行环绕绘制。默认是以逆时针进行绘制。

对于二维图像可能绘制顺序没那么重要，但是对于三维图像就很重要了。三维图像是由于视角的问题，会存在正反面的关系。

例如一款3D游戏，游戏中有一辆汽车，正对我们的为正面，我们看不到的一面为反面，虽然反面看不到，但OpenGL ES还是会进行绘制。为了对反面不做无用的绘制，可以使用OpenGL的面剔除操作，该操作允许渲染管道忽略形状的反面，这样就可以节约时间与内存并缩短处理周期。

那么这里的正面就是沿逆时针绘制的面。

GL程序

OpenGL ES渲染需要借助GL程序，通过创建GL程序、顶点与片段着色器、加载着色器代码、编译代码、应用、数据填充，最终进行渲染。

在创建GL程序之前，我们先来了解顶点着色器与片段着色器。

着色器源码

GL程序渲染的过程中需要确认顶点位置与对应的颜色，而这两个部分分别借助于顶点与片段着色器来实现。

1
2
3
4
5
6
7
8
9
10
11
12
// 顶点
private const val VERTEX_SHADER_SOURCE =
    "attribute vec4 a_Position;\n" +
            "void main() {\n" +
            "   gl_Position = a_Position;\n" +
            "}"
// 片段
private const val FRAGMENT_SHADER_SOURCE =
    "precision mediump float;\n" +
            "void main() {\n" +
            "   gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n" +
            "}"

上面分别是顶点着色器与片段着色器的源码。attribute是变量修饰符，用的比较多的是以下三种。

  1. attribute:表示只读的顶点数据，应用在顶点着色器中。可修饰声明顶点、颜色等数据
  2. uniform:顶点着色器与片段着色器的共享数据，在程序中值的不变的，初始值由程序外部传入
  3. varying:顶点着色器输入，片段着色器输出；由顶点着色器传输给片段着色器中的插值数据

vec4是变量类型，变量主要有以下几种

变量类别 变量类型 描述
空 void 代表无返回值的函数或空参数列表
标量 float，int，bool 浮点型、整型、布尔型的标量
浮点型向量 float，vec2，vec3，vec4 包含1，2，3，4个元素的浮点型向量
整型向量 int，ivec2，ivec3，ivec4 包含1，2，3，4个元素的整型向量
布尔型向量 bool，bvec2，bvec3，bvec4 包含1，2，3，4个元素的布尔型向量
矩阵 mat2，mat3，mat4 尺寸为2x2，3x3，4x4的浮点型矩阵
纹理句柄 sampler2D，samplerCube 表示2D，立方体纹理的句柄

除此之外还有数组与结构体，用来实现复杂的数据类型。

我们将定义的a_Position赋值给gl_Position，这样GL程序就会使用定义的顶点数据进行渲染。

同理gl_FragColor也是一样，代表对应渲染顶点位置时的颜色，这里直接写死了一个蓝色。

创建GL程序

首先我们要创建GL程序

1
2
// 创建GL程序
val programId = GLES20.glCreateProgram()

拿到programId，为之后的程序操作做准备

添加顶点与片段着色器

首先创建顶点与片段着色器

1
2
3
// 创建顶点与片段着色器
val vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER)
val fragmentShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER)

将之前定义的着色器源码加载到着色器中

1
2
3
// 加载顶点与片段着色器代码
GLES20.glShaderSource(vertexShader, VERTEX_SHADER_SOURCE)
GLES20.glShaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE)

通过GL程序进行编译

1
2
3
// 编译顶点与片段着色器代码
GLES20.glCompileShader(vertexShader)
GLES20.glCompileShader(fragmentShader)

最后将编译完的顶点与片段着色器添加到指定的GL程序中，也就是我们第一步创建的GL程序

1
2
3
// 添加到GL程序中
GLES20.glAttachShader(programId, vertexShader)
GLES20.glAttachShader(programId, fragmentShader)

链接与应用

着色器装载完毕之后，剩下的就是将我们创建的GL程序进行链接与应用

1
2
3
4
// 链接GL程序
GLES20.glLinkProgram(programId)
// 应用GL程序
GLES20.glUseProgram(programId)

这样我们的GL程序才算真正的完成了，下面就是数据的填充与渲染操作。

数据填充

在顶点着色器源码定义中，我们定义了a_Position变量，需要我们从外部将数据添加到a_Position，这样才能真正应用到gl_Position中。

下面我们来进行数据的填充

首先我们定义一个填充的顶点数据

1
2
3
private val mVertexData = floatArrayOf(0.0f, 0.5f, -0.5f, -0.5f, 0.5f, -0.5f, -0.5f, 1.0f, -1.0f, 0.5f, 0f, 0.5f)
 
private const val VERTEX_DIMENSION_SIZE = 2

顶点维度是二维，所以这里mVertexData中定义了6个顶点数据，也就是2个三角形的数据。第一个在左上角，第二个在中间。

我们将数据添加到Buffer中，并将索引位置定义到开始位置0

1
2
3
4
5
6
// 加载顶点数据
val vertexBuffer = ByteBuffer.allocateDirect(mVertexData.size * Float.SIZE_BYTES)
    .order(ByteOrder.nativeOrder())
    .asFloatBuffer()
vertexBuffer.put(mVertexData)
vertexBuffer.position(0)

继续获取a_Position在GL程序中的参数位置

1
2
// 获取对应参数位置
val positionLocation = GLES20.glGetAttribLocation(programId, "a_Position")

这一点与我们平常的编程不同，在GL程序中，如果要获取其中的变量，我们并不是直接拿到这个变量的本身，而是通过拿到它在GL中对应的位置索引，然后通过位置索引进行变量操作。

获取之后还要进行启动激活

1
2
// 启动对应参数位置
GLES20.glEnableVertexAttribArray(positionLocation)

最后就是填充

1
2
// 填充顶点数据
GLES20.glVertexAttribPointer(positionLocation, VERTEX_DIMENSION_SIZE, GLES20.GL_FLOAT, false, 0, vertexBuffer)

VERTEX_DIMENSION_SIZE代表的是填充一个二维的顶点数据，类型为GLES20.GL_FLOAT。

渲染

GL程序与顶点数据都已经准备完毕，接下来是最后一步渲染。

在渲染之前我们需要对屏幕进行清屏操作，默认屏幕是黑色，我们可以指定需要的清屏后的颜色

1
2
3
4
// 设置清屏颜色
GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f)
// 清屏处理
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)

这里指定清屏颜色为白色

在渲染之前设置渲染的视图位置与大小，最后再进行渲染。

1
2
3
4
// 设置视图大小
GLES20.glViewport(0, 0, mSurfaceViewWidth, mSurfaceViewHeight)
// 渲染
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, mVertexData.size / VERTEX_DIMENSION_SIZE)

在渲染操作中使用了GLES20.GL_TRIANGLES，这是一种渲染方式，它代表会以每3个顶点为一组的方式进行三角形渲染，所以我们运行之后就能看到2个三角形。

参数0与mVertexData.size / VERTEX_DIMENSION_SIZE代表有6个顶点且从第0个位置开始，也就是第一个顶点位置。

最后我们再来看下运行后的效果



大功告成，与我们的预期完全一样。

后续会继续聊聊颜色的动态填充、渲染的三种方式与纹理的操作，敬请期待。

源码地址：OpenGL ES

支持一下
赞赏是一门艺术