一.整体思路
我们在用纹理增加细节那篇文章中提到过，要将图片渲染在屏幕上，首先要拿到图片的像素数组数据，然后将像素数组数据通过纹理单元传递到片段着色器中，最后通过纹理采样函数将纹理中对应坐标的颜色值采样出来，然后给最终的片段赋予颜色值。现在换成了yuv视频，我们应该如何处理呢？因为最终的片段颜色值是RGBA格式的，而我们的视频是YUV格式的，所以我们需要做一个转化：即将YUV转化为RGBA。
我们在渲染图像到屏幕的时候，需要用到glTexImage2D()函数指定二维纹理图像，这个函数各个参数的含义如下：
- target：指定目标纹理，这个值必须是GL_TEXTURE_2D
- level：执行细节级别，0是最基本的图像级别，n表示第N级贴图细化级别
- internalformat：指定纹理中的颜色组件，可选的值有GL_ALPHA,GL_RGB,GL_RGBA,GL_LUMINANCE, GL_LUMINANCE_ALPHA 等几种
- width：指定纹理图像的宽度，必须是2的n次方
- height：指定纹理图像的高度，必须是2的n次方
- border：指定边框的宽度，必须为0
- format：像素数据的颜色格式, 不需要和internalformat取值必须相同，可选的值参考internalformat
- type：指定像素数据的数据类型
- pixels：指定内存中指向图像数据的指针
我们可以看到这个函数并没有直接支持yuv格式的图像数据，但是，别担心！它又给我们提供了GL_LUMINANCE这种格式，它表示只取一个颜色通道，假如传入的值为r，则在片段着色器中的纹理单元中读出的值为(r,r,r,1)。这样以来，我们就可以将yuv图像拆分为3个通道来读取。但是，拆分为3个通道来读取，最后如何重新合成一个RGBA颜色值呢？这个时候，之前学过的纹理单元就可以派上用场了，我们可以定义3个纹理单元，分别读取yuv图像的3个通道的数据，最后在片段着色器中进行合成，然后转化为RGBA值即可。
二.读取解析yuv视频文件
想要读取yuv视频数据，我们首先得清楚它的内部结构。为了方便讲解，这里我们以yuv420p格式的视频文件为例，它是一个由宽640，高360的yuv图像构成的视频，并且帧和帧之间无缝衔接。我们知道yuv420p格式的图像帧是先连续存储所有的y分量，然后再连续存储所有的u分量，最后再连续存储所有的v分量。并且，亮度分量y和色度分量uv的比例为4:1:1，也就是4个亮度分量共享一组色度分量。
知道了这些之后，我们就可以来读取yuv视频文件了。首先我们将准备的视频文件input.yuv放入assets文件夹下面，然后写一个函数循环地去读取这个视频文件，代码如下：
代码语言：javascript复制fun readYuvData(w:Int,h:Int){
val input=context.resources.assets.open("input.yuv")
val y=ByteArray(w*h)
val u=ByteArray(w*h/4)
val v=ByteArray(w*h/4)
while(true){
val ySize=input.read(y)
val uSize=input.read(u)
val vSize=input.read(v)
if(ySize>0&&uSize>0&&vSize>0){
//根据指定的字节数组创建一个新的ByteBuffer对象,对返回的ByteBuffer对象所做的更改会反映在原始字节数组上，因为它们共享相同的存储区域
bufferY=ByteBuffer.wrap(y)
bufferU=ByteBuffer.wrap(u)
bufferV=ByteBuffer.wrap(v)
//请求渲染一个新帧，调用requestRender()后，GLSurfaceView会在下一个合适的时机调用OpenGL渲染器的onDrawFrame()方法，从而实现新的场景绘制和渲染
glSurfaceView.requestRender()
Thread.sleep(1000/30)
}
else{
break
}
}
}三.编写顶点着色器和片段着色器
首先，我们来编写顶点着色器，代码如下：
代码语言：javascript复制#version 300 es
layout(location=0) in vec4 a_Position;
layout(location=1) in vec2 a_Texture_Coordinates;
layout(location=3) uniform mat4 u_Matrix;
out vec2 v_Texture_Coordinates;
void main() {
gl_Position=u_Matrix*a_Position;
v_Texture_Coordinates=a_Texture_Coordinates;
}接下来，再来编写片段着色器，代码如下：
代码语言：javascript复制#version 300 es
precision mediump float;
in vec2 v_Texture_Coordinates;
out vec4 fragColor;
layout(location=0) uniform sampler2D textureY;
layout(location=1) uniform sampler2D textureU;
layout(location=2) uniform sampler2D textureV;
void main() {
float y,u,v;
vec3 rgb;
y=texture(textureY,v_Texture_Coordinates).r;
u=texture(textureU,v_Texture_Coordinates).g-0.5;
v=texture(textureV,v_Texture_Coordinates).b-0.5;
rgb.r = y 1.540*v;
rgb.g = y - 0.183*u - 0.459*v;
rgb.b = y 1.816*u;
fragColor=vec4(rgb,1.0);
}在这里，我们定义了三个纹理采样对象，分别用于对yuv图像3个通道的数据进行采样。然后，我们需要知道rgb.r，rgb.g指的是什么。其实，在GLSL中，向量的组件可以通过{x,y,z,w}，{r,g,b,a}或{s,t,r,q}来获取，之所以采用这三个不同的命名方法，是因为向量通常会用来表示数学向量，颜色和纹理坐标。所以rgb.r，texture(textureY,v_Texture_Coordinates).r都是指向量中的第一个元素的值。由于我们之前设置的格式是GL_LUMINANCE，假设传入的y分量对应坐标位置的值为r,则在片段着色器中的纹理单元中读出的值为(r,r,r,1)，那么我们取r就是取第一个元素的值，其实这里前3个的值都是一样的，取哪个都可以。
但是，我们注意到，u和v后面都减去了0.5，这是为什么呢？我们先来看下yuv转rgb的公式：
我们首先需要知道的是yuv中的u,v指的是红色R和蓝色B与亮度Y的偏差，u和v的默认值都是128，我们把128代入公式，正好R=Y,R=B。从上面的公式看，代入的u和v都是减去默认值128的，也就是说转化公式中所使用的是u，v和默认值128的偏移值。所以，我们要使用这个公式，也要求出这个偏移值。但是，texture函数计算后得到的是归一化的值，取值范围是[0,1]，由于位深是8bit，取值范围是[0,255]，减去128相当于减去总范围的一半，所以我们也需要减去总范围的一半，即0.5。
四.绑定顶点数据和纹理数据
首先，我们写一个函数用于绑定顶点数据：
代码语言：javascript复制fun bindVertexData(){
//创建vao
glGenVertexArrays(1,vao,0)
//创建vbo
glGenBuffers(1,vbo,0)
//一定要先绑定vao，再绑定vbo
glBindVertexArray(vao[0])
glBindBuffer(GL_ARRAY_BUFFER,vbo[0])
//将顶点数组数据存入显存
glBufferData(GL_ARRAY_BUFFER,floatBuffer.capacity()*4,floatBuffer, GL_STATIC_DRAW)
//最后一个参数改为偏移值offset
glVertexAttribPointer(0, position_component_count, GL_FLOAT,false,stride,0)
glEnableVertexAttribArray(0)
glVertexAttribPointer(1, texture_coordinate_component_count, GL_FLOAT,false,stride, position_component_count*4)
glEnableVertexAttribArray(1)
//解除绑定
glBindBuffer(GL_ARRAY_BUFFER,0)
glBindVertexArray(0)
}在这里，我们使用了顶点数组对象vao和顶点缓冲对象vbo，这是opengl es3.0中引入的新特性。在opengl es2.0编程中，用于绘制的顶点数组数据首先保存在cpu内存，在调用glDrawArrays函数进行绘制时，需要将顶点数组数据从cpu内存拷贝到gpu显存中。但是，很多时候我们没必要每次绘制时都进行内存拷贝，如果可以直接在显存中存储这些数据，就可以避免每次拷贝所带来的巨大开销。vbo的出现就是为了解决这个问题的，vbo的作用是提前在显存中开辟好一块内存，用于存储顶点数组数据。
那vao是用来干嘛的呢？我们现在思考一个问题，假如我们有两份顶点数组数据，一份用来绘制正方体，一份用来绘制长方体，并且我们将它们都存入vbo开辟的显存中，那么gpu怎么知道取哪一部分数据绘制正方体，哪一部分数据绘制长方体呢？vao就是用于解决这个问题的，vao的作用就相当于一个指针，指向我们所开辟的内存的首地址，如下图所示。这样以来，我们可以开辟两处内存分别用于存储正方体数据和长方体数据，然后，我们再使用两个vao对象，分别指向两个内存块的首地址，这样以来，gpu就知道去哪里取数据了。当然，如果只有一份数据，不使用vao也行。
然后，再写一个函数用来绑定纹理数据，代码如下：
代码语言：javascript复制fun bindTextureData(){
//y平面
glActiveTexture(GL_TEXTURE0)
glBindTexture(GL_TEXTURE_2D,textures[0])
glTexImage2D(GL_TEXTURE_2D,0, GL_LUMINANCE,W,H,0, GL_LUMINANCE, GL_UNSIGNED_BYTE,bufferY)
//u平面
glActiveTexture(GL_TEXTURE1)
glBindTexture(GL_TEXTURE_2D,textures[1])
glTexImage2D(GL_TEXTURE_2D,0, GL_LUMINANCE,W/2,H/2,0, GL_LUMINANCE, GL_UNSIGNED_BYTE,bufferU)
//v平面
glActiveTexture(GL_TEXTURE2)
glBindTexture(GL_TEXTURE_2D,textures[2])
glTexImage2D(GL_TEXTURE_2D,0, GL_LUMINANCE,W/2,H/2,0, GL_LUMINANCE, GL_UNSIGNED_BYTE,bufferV)
}完整的MyRenderer.kt的代码如下：
代码语言：javascript复制class MyRenderer(val context: Context,val glSurfaceView:GLSurfaceView):GLSurfaceView.Renderer {
private val projectionMatrix:FloatArray=FloatArray(16)//存储投影矩阵
private val textures=IntArray(3)
private var floatBuffer:FloatBuffer
private val vao=IntArray(1)
private val vbo=IntArray(1)
private var bufferY:ByteBuffer?=null
private var bufferU:ByteBuffer?=null
private var bufferV:ByteBuffer?=null
init{
//存储顶点坐标和纹理坐标，并且让矩形的宽高比和视频像素的宽高比一样，都是16:9
val vertexData= floatArrayOf(
1f, 9/16f, 1.0f, 0.0f, // top right
1f, -9/16f, 1.0f, 1.0f, // bottom right
-1f, 9/16f, 0.0f, 0.0f, // top left
1f, -9/16f, 1.0f, 1.0f, // bottom right
-1f, -9/16f, 0.0f, 1.0f, // bottom left
-1f, 9/16f, 0.0f, 0.0f // top left
)
floatBuffer= ByteBuffer
.allocateDirect(vertexData.size*4)//一个浮点数占四个字节
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(vertexData)
floatBuffer.position(0)
}
companion object{
val position_component_count=2
val texture_coordinate_component_count=2
val stride=(position_component_count texture_coordinate_component_count)*4
val W=640
val H=360
}
override fun onSurfaceCreated(gl: GL10?, config: EGLConfig?) {
glClearColor(1.0f,1.0f,1.0f,1.0f)
val vertexShaderCode=TextResourceReader.readTextFileFromResource(context,R.raw.vertex_shader)
val fragmentShaderCode=TextResourceReader.readTextFileFromResource(context,R.raw.fragment_shader)
ShaderHelper.buildProgram(vertexShaderCode,fragmentShaderCode)
glUniform1i(0,0)
glUniform1i(1,1)
glUniform1i(2,2)
glGenTextures(3,textures,0)
for(i in 0..2){
glBindTexture(GL_TEXTURE_2D,textures[i])
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER, GL_NEAREST)//处理图片缩小的情况
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR)//处理图片放大的情况
//解绑纹理对象
glBindTexture(GL_TEXTURE_2D,0)
}
bindVertexData()
}
override fun onSurfaceChanged(gl: GL10?, width: Int, height: Int) {
glViewport(0,0,width,height)
//根据屏幕方向生成投影矩阵
val aspectRatio=if(width>height) width.toFloat()/height.toFloat() else height.toFloat()/width.toFloat()
if(width>height){
Matrix.orthoM(projectionMatrix,0,-aspectRatio,aspectRatio,-1f,1f,-1f,1f)
}
else{
Matrix.orthoM(projectionMatrix,0,-1f,1f,-aspectRatio,aspectRatio,-1f,1f)
}
//传递正交投影矩阵
glUniformMatrix4fv(3,1,false,projectionMatrix,0)
thread{
readYuvData(W,H)
}
}
override fun onDrawFrame(gl: GL10?) {
glClear(GL_COLOR_BUFFER_BIT)
bindTextureData()
glBindVertexArray(vao[0])
glDrawArrays(GL_TRIANGLES,0,6)
bufferY?.clear()
bufferU?.clear()
bufferV?.clear()
}
fun bindVertexData(){
glGenVertexArrays(1,vao,0)
glGenBuffers(1,vbo,0)
glBindVertexArray(vao[0])
glBindBuffer(GL_ARRAY_BUFFER,vbo[0])
glBufferData(GL_ARRAY_BUFFER,floatBuffer.capacity()*4,floatBuffer, GL_STATIC_DRAW)
glVertexAttribPointer(0, position_component_count, GL_FLOAT,false,stride,0)
glEnableVertexAttribArray(0)
glVertexAttribPointer(1, texture_coordinate_component_count, GL_FLOAT,false,stride, position_component_count*4)
glEnableVertexAttribArray(1)
glBindBuffer(GL_ARRAY_BUFFER,0)
glBindVertexArray(0)
}
fun bindTextureData(){
//y平面
glActiveTexture(GL_TEXTURE0)
glBindTexture(GL_TEXTURE_2D,textures[0])
glTexImage2D(GL_TEXTURE_2D,0, GL_LUMINANCE,W,H,0, GL_LUMINANCE, GL_UNSIGNED_BYTE,bufferY)
//u平面
glActiveTexture(GL_TEXTURE1)
glBindTexture(GL_TEXTURE_2D,textures[1])
glTexImage2D(GL_TEXTURE_2D,0, GL_LUMINANCE,W/2,H/2,0, GL_LUMINANCE, GL_UNSIGNED_BYTE,bufferU)
//v平面
glActiveTexture(GL_TEXTURE2)
glBindTexture(GL_TEXTURE_2D,textures[2])
glTexImage2D(GL_TEXTURE_2D,0, GL_LUMINANCE,W/2,H/2,0, GL_LUMINANCE, GL_UNSIGNED_BYTE,bufferV)
}
fun readYuvData(w:Int,h:Int){
val input=context.resources.assets.open("input.yuv")
val y=ByteArray(w*h)
val u=ByteArray(w*h/4)
val v=ByteArray(w*h/4)
while(true){
val ySize=input.read(y)
val uSize=input.read(u)
val vSize=input.read(v)
if(ySize>0&&uSize>0&&vSize>0){
//根据指定的字节数组创建一个新的ByteBuffer对象,对返回的ByteBuffer对象所做的更改会反映在原始字节数组上，因为它们共享相同的存储区域
bufferY=ByteBuffer.wrap(y)
bufferU=ByteBuffer.wrap(u)
bufferV=ByteBuffer.wrap(v)
//请求渲染一个新帧，调用requestRender()后，GLSurfaceView会在下一个合适的时机调用OpenGL渲染器的onDrawFrame()方法，从而实现新的场景绘制和渲染
glSurfaceView.requestRender()
Thread.sleep(1000/30)
}
else{
break
}
}
}
}MainActivity.kt的代码如下：
代码语言：javascript复制class MainActivity : AppCompatActivity() {
private lateinit var glSurfaceView:GLSurfaceView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
glSurfaceView= GLSurfaceView(this)
glSurfaceView.setEGLContextClientVersion(3)
glSurfaceView.setRenderer(MyRenderer(this,glSurfaceView))
setContentView(glSurfaceView)
}
override fun onPause() {
super.onPause()
glSurfaceView.onPause()
}
override fun onResume() {
super.onResume()
glSurfaceView.onResume()
}
}其他代码我之前的文章中有写。
