本案例的目的在于理解本地视频文件渲染的过程
整体的效果图如下
整体效果
案例的实现思路：
- 1、使用自定义的CJLAssetReader工具类，读取mov/mp4视频文件
- 2、Metal渲染回调 还原成
CMSampleBufferRef图像数据，然后将读取到CVPixelBufferRef视频像素缓存区 - 3、通过CoreVideo获取Y纹理，UV纹理
- 4、在自定义着色器将颜色编码格式由YUV转换为RGB，显示到屏幕上
整体的流程图如下
整体流程
主要分为三部分
- viewDidLoad函数：绘制前的准备工作
- MTKViewDelegate协议：视频文件渲染
- Metal着色文件：处理顶点数据，以及将YUV转换为RGB格式显示
准备工作
在此之前还需要作一些准备
- 创建OC与C共用的.h文件
- AVassetreader工具类
共用文件
主要包含以下内容
- 顶点数据结构体
//顶点数据结构 typedef struct { //顶点坐标(x,y,z,w) vector_float4 position; //纹理坐标(s,t) vector_float2 textureCoordinate; }CJLVertex;
- 转换矩阵结构体，用于YUV转换为RGB
//转换矩阵：YUV-->RGB typedef struct { //三维矩阵:转换矩阵 matrix_float3x3 matrix; //偏移量 vector_float3 offset; }CJLConvertMatrix;
- 顶点函数输入索引，用于viewController数据传入metal的入口
typedef enum CJLVertexInputIndex { CJLVertexInputIndexVertices = 0, }CJLVertexInputIndex;
- 片元函数缓存区索引
typedef enum CJLFragmentBufferIndex { CJLFragmentInputIndexMatrix = 0, }CJLFragmentBufferIndex;
- 片元函数纹理索引
typedef enum CJLFragmentTextureIndex { //Y纹理 CJLFragmentTextureIndexTextureY = 0, //UV纹理 CJLFragmentTextureIndexTextureUV = 1, }CJLFragmentTextureIndex;
工具类
AVAssetReader是AVFoundation中的一个读取器对象，主要有以下两种功能：
- 1、直接从存储中读取原始未解码的媒体样本，获取解码为可渲染形式的样本：从mp4文件中拿到h264，并对其进行解码拿到可渲染的样本
- 2、混合资产的多个音轨，并使用和组合多个视频音轨
AVAssetReader类结构如下图所示
其中，AVAssetReaderOutPut包含三种类型的输出
- AVAssetReaderTrackOutput：用于从
AVAssetReader存储中读取单个轨道的媒体样本 - AVAssetReaderAudioMixOutput：用于读取音频样本
- AVAssetReaderVideoCompositionOutput：用于读取一个或多个轨道中的帧合成的视频帧
下图是利用AVAssetReader读取视频文件并传入GPU渲染的图示
- 从
AVAssetReader存储中M获取mov/mp4视频文件，将视频文件解压缩，即解码，还原成CMSampleBufferRef图像数据 - 从
CMSampleBufferRef中将图像数据读取到CVPixelBufferRef视频像素缓存区 - 利用
CVPixelBufferRef像素缓存区数据 和CVMetalTextureCacheRef纹理缓存区数据 创建metal纹理缓存区CVMetalTextureRef - 将metal纹理缓存区
CVMetalTextureRef的数据转换成metal纹理id - 将mental纹理
id传递到GPU中的片元着色函数
工具类CJLAssetReader中主要提供了两个函数
initWithUrl函数：初始化readBuffer函数：从mov/mp4文件读取CMSampleBufferRef数据
函数的具体实现这里不做详细讲解，有兴趣的可以看看文末完整代码，也可以直接在项目中使用。
viewDidLoad函数
该函数主要是绘制前的准备工作，主要有五部分，如下图所示
- setupMTKView函数：MTKView设置
- setupCJLAsset函数：工具类设置
- setupPipeline函数：渲染管道设置
- setupVertex函数：顶点数据设置
- setupMatrix函数：转换矩阵设置
setupMTKView函数
主要是设置MTKView及视口大小
//1.MTKView 设置 - (void)setupMTKView { //1.初始化mtkView self.mtkView = [[MTKView alloc] initWithFrame:self.view.bounds device:MTLCreateSystemDefaultDevice()]; //设置self.view = self.mtkView; self.view = self.mtkView; //设置代理 self.mtkView.delegate = self; //2、获取视口size self.viewPortSize = (vector_uint2){self.mtkView.drawableSize.width, self.mtkView.drawableSize.height}; }
setupCJLAsset函数
工具类的初始化主要分为3步
- 获取视频文件路径
- 通过视频路径初始化自定义的工具类
- 创建纹理缓存区对象
//2.CCAssetReader设置 - (void)setupCJLAsset { //注意CCAssetReader 支持MOV/MP4文件都可以 //1.视频文件路径 NSURL *url = [[NSBundle mainBundle] URLForResource:@"sinan" withExtension:@"mp4"]; //2.初始化CCAssetReader self.reader = [[CJLAssetReader alloc] initWithUrl:url]; //3._textureCache的创建(通过CoreVideo提供给CPU/GPU高速缓存通道读取纹理数据) CVMetalTextureCacheCreate(NULL, NULL, self.mtkView.device, NULL, &_textureCache); }
setupPipeline函数
渲染管道的设置在以前的案例中已经提及了多次，这里仅简述下步骤
- 获取metal文件 & 加载function
- 创建渲染描述符 & 设置function
- 初始化渲染管道状态
- 创建commandQueue渲染命令队列
具体的代码青草考文末案例的完整代码
setupVertex函数
顶点数据初始化以及顶点缓存区的创建
- 初始化顶点数据
- 创建MTLBuffer顶点缓存区
- 计算顶点个数
//4.顶点数据设置 - (void)setupVertex { //1.顶点坐标(x,y,z,w);纹理坐标(x,y) //注意: 为了让视频全屏铺满,所以顶点大小均设置[-1,1] static const CJLVertex quadVertices[] = { // 顶点坐标，分别是x、y、z、w； 纹理坐标，x、y； { { 1.0, -1.0, 0.0, 1.0 }, { 1.f, 1.f } }, { { -1.0, -1.0, 0.0, 1.0 }, { 0.f, 1.f } }, { { -1.0, 1.0, 0.0, 1.0 }, { 0.f, 0.f } }, { { 1.0, -1.0, 0.0, 1.0 }, { 1.f, 1.f } }, { { -1.0, 1.0, 0.0, 1.0 }, { 0.f, 0.f } }, { { 1.0, 1.0, 0.0, 1.0 }, { 1.f, 0.f } }, }; //2.创建顶点缓存区 self.vertices = [self.mtkView.device newBufferWithBytes:quadVertices length:sizeof(quadVertices) options:MTLResourceStorageModeShared]; //3.计算顶点个数 self.numVertices = sizeof(quadVertices) / sizeof(CJLVertex); }
setupMatrix函数
主要是设置YUV->RGB转换的矩阵，转换矩阵主要有3种，其中BT.709最好
- BT.601：SDTV的标准
matrix_float3x3 kColorConversion601DefaultMatrix = (matrix_float3x3){ (simd_float3){1.164, 1.164, 1.164}, (simd_float3){0.0, -0.392, 2.017}, (simd_float3){1.596, -0.813, 0.0}, };
- BT.601 全系列
matrix_float3x3 kColorConversion601FullRangeMatrix = (matrix_float3x3){ (simd_float3){1.0, 1.0, 1.0}, (simd_float3){0.0, -0.343, 1.765}, (simd_float3){1.4, -0.711, 0.0}, };
- BT.709：HDTV的标准
matrix_float3x3 kColorConversion709DefaultMatrix[] = { (simd_float3){1.164, 1.164, 1.164}, (simd_float3){0.0, -0.213, 2.112}, (simd_float3){1.793, -0.533, 0.0}, };
颜色编码格式的转换选择其中一种即可
转换矩阵的设置，主要有以下几步
- 初始化转化矩阵
- 初始化偏移量
vector_float3 kColorConversion601FullRangeOffset = (vector_float3){ -(16.0/255.0), -0.5, -0.5};
- 创建转换矩阵结构体：通过矩阵、偏移量创建
//3.创建转化矩阵结构体. CJLConvertMatrix matrix; //设置转化矩阵 /* kColorConversion601DefaultMatrix； kColorConversion601FullRangeMatrix； kColorConversion709DefaultMatrix； */ matrix.matrix = kColorConversion601FullRangeMatrix; //设置offset偏移量 matrix.offset = kColorConversion601FullRangeOffset;
- 创建转换矩阵缓存区，用于颜色编码格式的转换
self.convertMatrix = [self.mtkView.device newBufferWithBytes:&matrix length:sizeof(CJLConvertMatrix) options:MTLResourceStorageModeShared];
MTKViewDelegate协议
主要是回调视图渲染代理方法drawInMTKView，将视频文件数据渲染到屏幕上，其流程如下
drawInMTKView代理方法流程
这里大部分的步骤都是Metal中渲染的基础步骤，这些步骤将不再讲解，主要讲解以下3步
- 2、从工具类中读取图像数据
- 9.设置纹理
- 10.设置片元函数转化矩阵
2、从工具类中读取图像数据
通过工具类的readBuffer函数从存储中读取视频文件图像数据，还原为CMSampleBufferRef类型
CMSampleBufferRef sampleBuffer = [self.reader readBuffer];
9.setupTextureWithEncoder函数：设置纹理
主要是将sampleBuffer数据 设置到renderEncoder 中，即将读取的数据转换为metal纹理，主要有以下步骤，如图所示
- 将从CMSampleBuffer读取CVPixelBuffer：
从CMSampleBufferRef中将图像数据读取到CVPixelBufferRef视频像素缓存区
CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(CMSampleBufferRef);
- 设置Y纹理、UV纹理
纹理通用的设置步骤总结如下：
- 获取纹理的宽高
- 初始化像素格式
- 创建CoreVideo框架Metal空纹理
- 根据视频像素缓存区 创建 Metal 纹理缓存区
- 判断纹理缓存区是否创建成功
- 如果创建成功，则将纹理缓存区数据转换为metal纹理，并释放
以Y纹理为例，设置的代码如下
//textureY 设置 { //2.获取纹理的宽高 size_t width = CVPixelBufferGetWidth(pixelBuffer); size_t height = CVPixelBufferGetHeight(pixelBuffer); //3.像素格式:普通格式，包含一个8位规范化的无符号整数组件。 MTLPixelFormat pixelFormat = MTLPixelFormatR8Unorm; //4.创建CoreVideo的Metal纹理 CVMetalTextureRef texture = NULL; /*5. 根据视频像素缓存区 创建 Metal 纹理缓存区 CVReturn CVMetalTextureCacheCreateTextureFromImage(CFAllocatorRef allocator, CVMetalTextureCacheRef textureCache, CVImageBufferRef sourceImage, CFDictionaryRef textureAttributes, MTLPixelFormat pixelFormat, size_t width, size_t height, size_t planeIndex, CVMetalTextureRef *textureOut); 功能: 从现有图像缓冲区创建核心视频Metal纹理缓冲区。 参数1: allocator 内存分配器,默认kCFAllocatorDefault 参数2: textureCache 纹理缓存区对象 参数3: sourceImage 视频图像缓冲区 参数4: textureAttributes 纹理参数字典.默认为NULL 参数5: pixelFormat 图像缓存区数据的Metal 像素格式常量.注意如果MTLPixelFormatBGRA8Unorm和摄像头采集时设置的颜色格式不一致，则会出现图像异常的情况； 参数6: width,纹理图像的宽度（像素） 参数7: height,纹理图像的高度（像素） 参数8: planeIndex.如果图像缓冲区是平面的，则为映射纹理数据的平面索引。对于非平面图像缓冲区忽略。 参数9: textureOut,返回时，返回创建的Metal纹理缓冲区。 */ CVReturn status = CVMetalTextureCacheCreateTextureFromImage(NULL, self.textureCache, pixelBuffer, NULL, pixelFormat, width, height, 0, &texture); //6.判断textureCache 是否创建成功 if (status == kCVReturnSuccess) { //7.转成Metal用的纹理 textureY = CVMetalTextureGetTexture(texture); //8.使用完毕释放 CFRelease(texture); } }
- 判断Y纹理 和UV 纹理是否都读取成功，如果读取成功，则分别将其传入片元着色函数
通过MTLRenderCommandEncoder的setFragmentTexture:atIndex:函数传递
//10.判断textureY 和 textureUV 是否读取成功 if (textureY != nil && textureUV != nil) { //11.向片元函数设置textureY 纹理 [encoder setFragmentTexture:textureY atIndex:CJLFragmentTextureIndexTextureY]; //12.向片元函数设置textureUV 纹理 [encoder setFragmentTexture:textureUV atIndex:CJLFragmentTextureIndexTextureUV]; } //13.使用完毕,则将sampleBuffer 及时释放 CFRelease(CMSampleBufferRef);
10.设置片元函数转化矩阵
主要是将转换矩阵通过setFragmentBuffer:offset:atIndex:函数传入片元着色函数，用于将YUV格式转换为RGB格式
//10.设置片元函数转化矩阵 [commandEncoder setFragmentBuffer:self.convertMatrix offset:0 atIndex:CJLFragmentInputIndexMatrix];
Metal着色文件
主要是对顶点数据以及纹理的处理
- 用于顶点函数输出/片元函数输入的结构体
typedef struct { float4 clipSpacePosition [[position]]; // position的修饰符表示这个是顶点 float2 textureCoordinate; // 纹理坐标 } RasterizerData;
- 顶点着色函数：原样输出顶点坐标和纹理坐标
//RasterizerData 返回数据类型->片元函数 // vertex_id是顶点shader每次处理的index，用于定位当前的顶点 // buffer表明是缓存数据，0是索引 vertex RasterizerData vertexShader(uint vertexID [[ vertex_id ]], constant CJLVertex *vertexArray [[ buffer(CJLVertexInputIndexVertices) ]]) { RasterizerData out; //顶点坐标 out.clipSpacePosition = vertexArray[vertexID].position; //纹理坐标 out.textureCoordinate = vertexArray[vertexID].textureCoordinate; return out; }
- 片元着色函数
由于读取视频文件时采用的是YUV颜色编码格式，而最终屏幕的显示是RGB格式，所以需要在片元着色函数中将YUV格式转换为RGB格式
//YUV->RGB 参考学习链接: https://mp.weixin.qq.com/s/KKfkS5QpwPAdYcEwFAN9VA // stage_in表示这个数据来自光栅化。（光栅化是顶点处理之后的步骤，业务层无法修改） // texture表明是纹理数据，CCFragmentTextureIndexTextureY是索引 // texture表明是纹理数据，CCFragmentTextureIndexTextureUV是索引 // buffer表明是缓存数据， CCFragmentInputIndexMatrix是索引 fragment float4 samplingShader(RasterizerData input [[stage_in]], texture2d<float> textureY [[ texture(CJLFragmentTextureIndexTextureY) ]], texture2d<float> textureUV [[ texture(CJLFragmentTextureIndexTextureUV) ]], constant CJLConvertMatrix *convertMatrix [[ buffer(CJLFragmentInputIndexMatrix) ]]) { //1.获取纹理采样器 constexpr sampler textureSampler (mag_filter::linear, min_filter::linear); /* 2. 读取YUV 纹理对应的像素点值，即颜色值 textureY.sample(textureSampler, input.textureCoordinate).r 从textureY中的纹理采集器中读取,纹理坐标对应上的R值.(Y) textureUV.sample(textureSampler, input.textureCoordinate).rg 从textureUV中的纹理采集器中读取,纹理坐标对应上的RG值.(UV) */ //r 表示 第一个分量，相当于 index 0 //rg 表示 数组中前面两个值，相当于 index 的0 和 1，用xy也可以 float3 yuv = float3(textureY.sample(textureSampler, input.textureCoordinate).r, textureUV.sample(textureSampler, input.textureCoordinate).rg); //3.将YUV 转化为 RGB值.convertMatrix->matrix * (YUV + convertMatrix->offset) float3 rgb = convertMatrix->matrix * (yuv + convertMatrix->offset); //4.返回颜色值(RGBA) return float4(rgb, 1.0); }
总结
视频文件的解码方式有以下两种
- 通过
AVAssetReader自定义解码
从MP4中拿到视频文件，将视频文件解压缩，即解码，还原成CMSampleBufferRef，然后在进行渲染 - 通过
AVFoundation解码
可以使用AVFoundation直接将mp4解压成想要的CMSampleBufferRef，不需要自己去解压，AVFoundation视频解压本质是通过封装的硬解码/硬编码完成的，不需要亲自去做，这种方式是最简便的。
