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;
    }
    
    
  1. 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. 设置顶点数据
  1. 设置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); 
    }
    
  1. 提交绘制
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,188评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,464评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,562评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,893评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,917评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,708评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,430评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,342评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,801评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,976评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,115评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,804评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,458评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,008评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,135评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,365评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,055评论 2 355