因为5G的开展，现在音视频越来越流行，咱们的日子现已彻底被抖音、视频号、B站等视频运用所包围。从这一点也能看到音视频的重要性。

而作为一名Android开发者，是时候来了解一下关于Android方面烘托方面的常识。音视频的运用都离不开OpenGL ES的处理。关于视频的高效烘托与交融操作是至关重要的。

Android OpenGL ES 基础原理

上面的这种动画信任大家都很了解，类似的动画在各大直播间都会出现。那么这炫酷的原理完成内部都离不开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。也便是说它的坐标都是根据可制作区域进行比例换算。并不是真实的值。

Android OpenGL ES 基础原理

形状与方向

在OpenGL ES中，制作的形状都是以三角形为根底，也便是说它必须由3个或许以上的点来进行制作。所以它是由多个三角形进行组合成特定的形状，进过不同程度的穿插与重叠来达到不同的形状。

例如以二维空间来界说

Android OpenGL ES 基础原理

一同还存在制作次序，所谓的制作次序也是以三角形为根底，经过三角形的三个极点进行盘绕制作。默认是以逆时针进行制作。

关于二维图画或许制作次序没那么重要，但是关于三维图画就很重要了。三维图画是因为视角的问题，会存在正不和的联系。

例如一款3D游戏，游戏中有一辆轿车，正对咱们的为正面，咱们看不到的一面为不和，尽管不和看不到，但OpenGL ES仍是会进行制作。为了对不和不做无用的制作，可以运用OpenGL的面剔除操作，该操作答应烘托管道忽略形状的不和，这样就可以节省时间与内存并缩短处理周期。

那么这儿的正面便是沿逆时针制作的面。

GL程序

OpenGL ES烘托需求凭借GL程序，经过创立GL程序、极点与片段着色器、加载着色器代码、编译代码、运用、数据填充，最终进行烘托。

在创立GL程序之前，咱们先来了解极点着色器与片段着色器。

着色器源码

GL程序烘托的过程中需求确认极点方位与对应的色彩，而这两个部分别离凭借于极点与片段着色器来完成。

// 极点
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是变量类型，变量主要有以下几种

Android OpenGL ES 基础原理

除此之外还有数组与结构体，用来完成杂乱的数据类型。

咱们将界说的a_Position赋值给gl_Position，这样GL程序就会运用界说的极点数据进行烘托。

同理gl_FragColor也是相同，代表对应烘托极点方位时的色彩，这儿直接写死了一个蓝色。

创立GL程序

首先咱们要创立GL程序

// 创立GL程序
val programId = GLES20.glCreateProgram()

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

增加极点与片段着色器

首先创立极点与片段着色器

// 创立极点与片段着色器
val vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER)
val fragmentShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER)

将之前界说的着色器源码加载到着色器中

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

经过GL程序进行编译

// 编译极点与片段着色器代码
GLES20.glCompileShader(vertexShader)
GLES20.glCompileShader(fragmentShader)

最终将编译完的极点与片段着色器增加到指定的GL程序中，也便是咱们第一步创立的GL程序

// 增加到GL程序中
GLES20.glAttachShader(programId, vertexShader)
GLES20.glAttachShader(programId, fragmentShader)

链接与运用

着色器装载完毕之后，剩下的便是将咱们创立的GL程序进行链接与运用

// 链接GL程序
GLES20.glLinkProgram(programId)
// 运用GL程序
GLES20.glUseProgram(programId)

这样咱们的GL程序才算真实的完成了，下面便是数据的填充与烘托操作。

数据填充

在极点着色器源码界说中，咱们界说了a_Position变量，需求咱们从外部将数据增加到a_Position，这样才能真实运用到gl_Position中。

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

首先咱们界说一个填充的极点数据

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

// 加载极点数据
val vertexBuffer = ByteBuffer.allocateDirect(mVertexData.size * Float.SIZE_BYTES)
    .order(ByteOrder.nativeOrder())
    .asFloatBuffer()
vertexBuffer.put(mVertexData)
vertexBuffer.position(0)

持续获取a_Position在GL程序中的参数方位

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

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

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

// 发动对应参数方位
GLES20.glEnableVertexAttribArray(positionLocation)

最终便是填充

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

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

烘托

GL程序与极点数据都现已准备完毕，接下来是最终一步烘托。

在烘托之前咱们需求对屏幕进行清屏操作，默认屏幕是黑色，咱们可以指定需求的清屏后的色彩

// 设置清屏色彩
GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f)
// 清屏处理
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT)

这儿指定清屏色彩为白色

在烘托之前设置烘托的视图方位与巨细，最终再进行烘托。

// 设置视图巨细
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个方位开端，也便是第一个极点方位。

最终咱们再来看下运行后的作用

Android OpenGL ES 基础原理

大功告成，与咱们的预期彻底相同。

后续会持续聊聊色彩的动态填充、烘托的三种方法与纹理的操作，敬请期待。

源码地址：OpenGL ES

引荐

android_startup: 供给一种在运用发动时可以更加简单、高效的方法来初始化组件，优化发动速度。不仅支撑Jetpack App Startup的全部功能，还供给额定的同步与异步等候、线程操控与多进程支撑等功能。

AwesomeGithub: 根据Github的客户端，纯练习项目，支撑组件化开发，支撑账户暗码与认证登陆。运用Kotlin言语进行开发，项目架构是根据JetPack&DataBinding的MVVM；项目中运用了Arouter、Retrofit、Coroutine、Glide、Dagger与Hilt等流行开源技能。

flutter_github: 根据Flutter的跨渠道版本Github客户端，与AwesomeGithub相对应。

android-api-analysis: 结合具体的Demo来全面解析Android相关的常识点, 帮助读者可以更快的把握与理解所阐述的要点。

daily_algorithm: 每日一算法，由浅入深，欢迎参加一同共勉。