Metal实现视频文件的渲染

如何通过Metal实现视频文件的渲染？

  与Metal 实现摄像头采集内容的渲染 不同的是，获取到的媒体样本是YUV,需要将其转换为RGB之后再渲染到屏幕上。

实现视频文件渲染的流程

1. 通过AVAssetReader直接从存储中读取原始未解码的媒体样本，获取解码为可渲染形式的样本CMSampleBufferRef。
2. 通过CoreVideo将采集到的CMSampleBufferRef 获取Y纹理，UV纹理。
3. 自定义着色器 将YUV转换为 RGB值。
4. 将纹理数据渲染到屏幕上。

关于AVAssetReader

从存储中读取原始未解码的媒体样本，获取解码为可渲染形式的样本。

着色器

1. vertexShader（顶点坐标、纹理坐标）

   vertex RasterizerData
   vertexShader(uint vertexID [[ vertex_id ]],
                constant CCVertex *vertexArray [[ buffer(CCVertexInputIndexVertices) ]])
   {
       RasterizerData out;
       //顶点坐标
       out.clipSpacePosition = vertexArray[vertexID].position;
       //纹理坐标
       out.textureCoordinate = vertexArray[vertexID].textureCoordinate;
       return out;
   }
   
   

2. fragmentShader(采样、YUV转换RGB)

   vertex RasterizerData
   vertexShader(uint vertexID [[ vertex_id ]],
                constant CCVertex *vertexArray [[ buffer(CCVertexInputIndexVertices) ]])
   {
       RasterizerData out;
       //顶点坐标
       out.clipSpacePosition = vertexArray[vertexID].position;
       //纹理坐标
       out.textureCoordinate = vertexArray[vertexID].textureCoordinate;
       return out;
   }
   
   

初始化

1. 初始化MTKView

2. 初始化 AVAssetReader加载视频资源文件

3. 设置渲染管道

4. 设置顶点数据

5. 设置YUV转换RGB的矩阵数据

   // 设置YUV->RGB转换的矩阵
   - (void)setupMatrix {
       
       //1.转化矩阵
       // BT.601, which is the standard for 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 full range
       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, which is the standard for 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},
       };
       
       //2.偏移量
       vector_float3 kColorConversion601FullRangeOffset = (vector_float3){ -(16.0/255.0), -0.5, -0.5};
       
       //3.创建转化矩阵结构体.
       CCConvertMatrix matrix;
       //设置转化矩阵
       /*
        kColorConversion601DefaultMatrix；
        kColorConversion601FullRangeMatrix；
        kColorConversion709DefaultMatrix；
        */
       matrix.matrix = kColorConversion601FullRangeMatrix;
       //设置offset偏移量
       matrix.offset = kColorConversion601FullRangeOffset;
       
       //4.创建转换矩阵缓存区.
       self.convertMatrix = [self.mtkView.device newBufferWithBytes:&matrix
                                                           length:sizeof(CCConvertMatrix)
                                                   options:MTLResourceStorageModeShared];
   }
   
   

绘制

1. 读取帧数据

2. 设置顶点缓存区

3. 获取Y/UV纹理数据，传递数据

   // 设置纹理
   - (void)setupTextureWithEncoder:(id<MTLRenderCommandEncoder>)encoder buffer:(CMSampleBufferRef)sampleBuffer {
       
       //1.从CMSampleBuffer读取CVPixelBuffer，
       CVPixelBufferRef pixelBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
       
       id<MTLTexture> textureY = nil;
       id<MTLTexture> textureUV = nil;
      
       //textureY 设置
       {
           //2.获取纹理的宽高
           size_t width = CVPixelBufferGetWidthOfPlane(pixelBuffer, 0);
           size_t height = CVPixelBufferGetHeightOfPlane(pixelBuffer, 0);
           
           //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);
           }
       }
       
       //9.textureUV 设置(同理,参考于textureY 设置)
       {
           size_t width = CVPixelBufferGetWidthOfPlane(pixelBuffer, 1);
           size_t height = CVPixelBufferGetHeightOfPlane(pixelBuffer, 1);
           MTLPixelFormat pixelFormat = MTLPixelFormatRG8Unorm;
           CVMetalTextureRef texture = NULL;
           CVReturn status = CVMetalTextureCacheCreateTextureFromImage(NULL, self.textureCache, pixelBuffer, NULL, pixelFormat, width, height, 1, &texture);
           if(status == kCVReturnSuccess)
           {
               textureUV = CVMetalTextureGetTexture(texture);
               CFRelease(texture);
           }
       }
       
       //10.判断textureY 和 textureUV 是否读取成功
       if(textureY != nil && textureUV != nil)
       {
           //11.向片元函数设置textureY 纹理
           [encoder setFragmentTexture:textureY atIndex:CCFragmentTextureIndexTextureY];
           //12.向片元函数设置textureUV 纹理
           [encoder setFragmentTexture:textureUV atIndex:CCFragmentTextureIndexTextureUV];
       }
       
       //13.使用完毕,则将sampleBuffer 及时释放
       CFRelease(sampleBuffer); 
   }
   

4. 提交绘制