使用Metal渲染本地视频文件

实现思路：

• 使用自定义的CJLAssetReader工具类，读取mov/mp4视频文件
• Metal渲染回调 还原成CMSampleBufferRef图像数据，然后将读取到CVPixelBufferRef视频像素缓存区
• 通过CoreVideo获取Y纹理，UV纹理
• 在自定义着色器将颜色编码格式由YUV转换为RGB，显示到屏幕上

主要分为三部分：

• viewDidLoad函数：绘制前的准备工作
• MTKViewDelegate协议：视频文件渲染
• Metal着色文件：处理顶点数据，以及将YUV转换为RGB格式显示

整体的流程图

工具类（AVAssetReader）

AVAssetReader是AVFoundation中的一个读取器对象，主要有以下两种功能：

• 直接从存储中读取原始未解码的媒体样本，获取解码为可渲染形式的样本：从mp4文件中拿到h264，并对其进行解码拿到可渲染的样本
• 混合资产的多个音轨，并使用和组合多个视频音轨

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函数：转换矩阵设置

viewDidLoad函数流程

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渲染命令队列

//1 获取.metal
    /*
     newDefaultLibrary: 默认一个metal 文件时,推荐使用
     newLibraryWithFile:error: 从Library 指定读取metal 文件
     newLibraryWithData:error: 从Data 中获取metal 文件
     */
    id defaultLibrary = [self.mtkView.device newDefaultLibrary];
    // 顶点shader，vertexShader是函数名
    id vertexFunction = [defaultLibrary newFunctionWithName:@"vertexShader"];
    // 片元shader，samplingShader是函数名
    id fragmentFunction = [defaultLibrary newFunctionWithName:@"samplingShader"];
    
    //2.渲染管道描述信息类
    MTLRenderPipelineDescriptor *pipelineStateDescriptor = [[MTLRenderPipelineDescriptor alloc] init];
    //设置vertexFunction
    pipelineStateDescriptor.vertexFunction = vertexFunction;
    //设置fragmentFunction
    pipelineStateDescriptor.fragmentFunction = fragmentFunction;
    // 设置颜色格式
    pipelineStateDescriptor.colorAttachments[0].pixelFormat = self.mtkView.colorPixelFormat;
    
    //3.初始化渲染管道根据渲染管道描述信息
    // 创建图形渲染管道，耗性能操作不宜频繁调用
    self.pipelineState = [self.mtkView.device newRenderPipelineStateWithDescriptor:pipelineStateDescriptor
                                                                             error:NULL];
    
    //4.CommandQueue是渲染指令队列，保证渲染指令有序地提交到GPU
    self.commandQueue = [self.mtkView.device newCommandQueue];

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着色文件

主要是对顶点数据以及纹理的处理

• 用于顶点函数输出/片元函数输入的结构体

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 textureY [[ texture(CJLFragmentTextureIndexTextureY) ]],
               texture2d 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视频解压本质是通过封装的硬解码/硬编码完成的，不需要亲自去做，这种方式是最简便的。

完整代码+注释