美文网首页傲视苍穹iOS《Objective-C》VIP专题程序员OpenGL
OpenGL ES实践教程(九)OpenGL与视频混合

OpenGL ES实践教程(九)OpenGL与视频混合

作者: 落影loyinglin | 来源:发表于2017-08-24 13:17 被阅读2975次

前言

前面的实践教程:
OpenGL ES实践教程1-Demo01-AVPlayer
OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染
OpenGL ES实践教程3-Demo03-Mirror
OpenGL ES实践教程4-Demo04-VR全景视频播放
OpenGL ES实践教程5-Demo05-多重纹理实现图像混合
OpenGL ES实践教程6-Demo06-全景视频获取焦点
OpenGL ES实践教程7-Demo07-多滤镜叠加处理
OpenGL ES实践教程8-Demo08-blend混合与shader混合
其他教程请移步OpenGL ES文集

在前面的文章《AVFoundation详细解析(一)视频合并与混音》介绍如何用AVFoundation的指令进行视频合并与混音,GPUImage文集中也介绍了第三方扩展的GPUImage视频混合和基于AVFoundation指令的GPUImage视频混合。
最近在帮一个群友解决贴图问题的时候,我突然想起可以用AVFoundation的接口抽象优势,辅以OpenGL ES对图像处理的优点,进行比较容易的视频混合。

核心思路

用AVFoundation处理视频合并的时间轴关系(混合规则),用OpenGL ES处理两个视频图像混合。
1、用AVURLAsset加载视频,取得视频相关的轨道信息;
2、用AVMutableComposition承载视频的合并信息,主要是添加音频和视频轨道,同时记录一个时间轴,表明一个时间点,应该有哪些音频轨道和视频轨道;
3、新建AVMutableVideoComposition类,并且设定自定义的视频合并类;
4、用AVMutableComposition新建AVPlayerItem类,并设定videoComposition为第三步创建的AVMutableVideoComposition类;
5、用AVPlayerItem创建AVPlayer;
6、开始播放后,如果有视频需要显示,会通过AVVideoCompositing协议的startVideoCompositionRequest:方法进行回调,request参数包括有当前时间节点的视频轨道信息,可以通过request的sourceFrameByTrackID:方法取得视频帧信息,用OpenGL进行图像处理,最后把渲染的结果通过finishWithComposedVideoFrame:回传。

上面的1~5步骤主要是AVFoundation相关的操作,在之前有所介绍,本文重点介绍第6步的OpenGL ES处理。

效果

正常播放视频的时候:


正常播放视频

视频进行混合的时候:


视频混合

代码解析

demo的地址在这里

1、从视频轨道中取出视频帧的图像

AVAsynchronousVideoCompositionRequest的sourceTrackIDs属性存在当前可获取的视频轨道信息,再通过sourceFrameByTrackID:方法可以取得CVPixelBufferRef格式的视频信息。
需要注意的是,在AVVideoCompositing协议的sourcePixelBufferAttributesrequiredPixelBufferAttributesForRenderContext的方法中,需要指定对应像素的格式。

2、配置OpenGL ES渲染到纹理

通过CVOpenGLESTextureCacheCreateTextureFromImage方法,创建目标纹理destTextureRef,并且用glFramebufferTexture2D绑定到帧缓存上。

3、配置GLKBaseEffect

同样用CVOpenGLESTextureCacheCreateTextureFromImage方法,创建视频帧信息相关的纹理,赋值给GLKBaseEffect的texture2d0属性,并配置好顶点、纹理相关数据,最后使用glDrawArrays绘制图像。

4、返回CVPixelBufferRef数据

如果是处于合并状态下,可能需要多次GLKBaseEffect的绘制,最终再返回CVPixelBufferRef。(这里比较推荐使用多重纹理的合并图像方式)

OpenGL ES相关的核心代码:

- (void)prepareToDraw:(CVPixelBufferRef)videoPixelBuffer andDestination:(CVPixelBufferRef)destPixelBuffer {
    // 准备绘制相关
    if ([EAGLContext currentContext] != context) {
        [EAGLContext setCurrentContext:context];
    }
    glBindFramebuffer(GL_FRAMEBUFFER, frameBufferId);
    [self cleanUpTextures];
    glViewport(0, 0, (GLsizei)CVPixelBufferGetWidth(destPixelBuffer), (GLsizei)CVPixelBufferGetHeight(destPixelBuffer));
    
    BOOL success = NO;
    do {
        CVReturn ret;
        
        // 配置渲染目标
        ret = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault,
                                                           videoTextureCache,
                                                           destPixelBuffer,
                                                           NULL,
                                                           GL_TEXTURE_2D,
                                                           GL_RGBA,
                                                           (int)CVPixelBufferGetWidth(destPixelBuffer),
                                                           (int)CVPixelBufferGetHeight(destPixelBuffer),
                                                           GL_BGRA,
                                                           GL_UNSIGNED_BYTE,
                                                           0,
                                                           &destTextureRef);
        if (ret) {
            NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", ret);
            break;
        }
        glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, CVOpenGLESTextureGetTarget(destTextureRef), CVOpenGLESTextureGetName(destTextureRef), 0);
        if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {
            NSLog(@"Error at glFramebufferTexture2D");
            break;
        }
        
        // 上传图像
        ret = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault,
                                                           videoTextureCache,
                                                           videoPixelBuffer,
                                                           NULL,
                                                           GL_TEXTURE_2D,
                                                           GL_RGBA,
                                                           (int)CVPixelBufferGetWidth(videoPixelBuffer),
                                                           (int)CVPixelBufferGetHeight(videoPixelBuffer),
                                                           GL_BGRA,
                                                           GL_UNSIGNED_BYTE,
                                                           0,
                                                           &videoTextureRef);
        
        if (ret) {
            NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", ret);
            break;
        }
        glBindTexture(CVOpenGLESTextureGetTarget(videoTextureRef), CVOpenGLESTextureGetName(videoTextureRef));
        glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
        glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
        glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
        glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
        baseEffect.texture2d0.name = CVOpenGLESTextureGetName(videoTextureRef);
        baseEffect.texture2d0.target = CVOpenGLESTextureGetTarget(videoTextureRef);
        glEnableVertexAttribArray(GLKVertexAttribPosition);
        glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, baseVertices);
        glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
        glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, baseVertices + 3);
        [baseEffect prepareToDraw];
        
        glClearColor(0.0, 0.0, 0.0, 1.0);
        glClear(GL_COLOR_BUFFER_BIT);
        glDrawArrays(GL_TRIANGLES, 0, 6); // 6个顶点,2个三角形

        success = YES;
    } while (NO);
    
    if (!success) {
        NSLog(@"render is %@", success ? @"success":@"fail");
    }
}

遇到的问题

1、运行中出现GLError 0x0506

通过查错误码,知道错误是GL_INVALID_FRAMEBUFFER_OPERATION
即是在framebuffer未初始化完成时候,对framebuffer进行read/write/render的操作。
自信查看代码,发现是glClearColor提前,放在glBindFramebuffer之后,glFramebufferTexture2D之前。
解决方案是把glClearColor放在glDrawArray之前。

2、CVOpenGLESTextureCacheCreateTextureFromImage返回错误

CVOpenGLESTextureCacheCreateTextureFromImage的参数信息需要与AVVideoCompositing的sourcePixelBufferAttributesrequiredPixelBufferAttributesForRenderContext对齐。

总结

这里的视频混合,为了节省开发时间,OpenGL ES的上下文管理用的GLKit,视频混合部分用的顶点来简单区分,如果要深入开发,需要用自己的shader来处理视频混合的规则。
OpenGL ES的文集有将近半年没更新,一部分原因是新的工作比较忙碌,一部分原因是觉得需要沉淀一段时间。
如今恢复更新,维持一定的精力在图形学上,欢迎简友一起探讨有关OpenGL ES的问题,私信邮箱均可。

PS:如果demo代码写的精简,架构清晰,既有利于自己开发维护,也会节省其他人很多时间。

相关文章

网友评论

  • L_Glenn:您好,我看您的文章好久了,最近想做点视频相关的东西,看到这,想问下,这个用openGL,渲染的地方是不是只能边播放边渲染?还有就是抖音那些特效,是不是,也是您这篇文章的思路,播放的时候,就opengl改。
  • 元宇宙协会:溜溜溜
  • 4df2374eab7d:之前运行代码没有升级xcode9之后有卡屏的效果
  • 犀利熊猫:你好,在使用gpuimage添加水印的时候,不论使用GPUImageAlphaBlendFilter还是GPUImageNormalBlendFilter,水印图片都有透明度,不清晰,mix设置的为1,请问有碰到这个问题吗?谢谢
  • Y_Swordsman:能不能实时播放 音频的samplebuffer呢? 因为音频的samplebuffer 是可以转化为AudioBufferList啊....但是我对 audioUnit不熟悉..不知道大神可以指点一下吗?
  • littleDad:可爱的老哥,有针对AVFoundation获取每一帧中的samplebuffer然后通过openGLES进行贴图的demo 教程吗。 之前用opencv写的很顺利,可是cpu爆炸了,试着替换成opengles去渲染图像
    犀利熊猫:你好,在使用gpuimage添加水印的时候,不论使用GPUImageAlphaBlendFilter还是GPUImageNormalBlendFilter,水印图片都有透明度,不清晰,mix设置的为1,请问有碰到这个问题吗?谢谢
    littleDad:@落影loyinglin 我看了那样的贴图是通过 addSubview 添上去的,只是一种叠加效果,并不是合成到当前图像中
    落影loyinglin:@Little_Dad 贴图的demo有的
  • 听弦不知音:问一个问题,我做的是多个视频同时画到一个帧缓存上,最高支持到9个,我的思路与这篇文章差不多,9个视频,解出每个视频的CVPIXELBUFFER,生成纹理,然后绘制。但这样做效率与AVMutableVideoCompositionLayerInstruction有很明显的差距,请问有什么优化或者有效的方法么?
    落影loyinglin:@听弦不知音 有demo吗?可以看看
  • 6310ffb20d0c:假如只需要视频合并,可以省略AVPlayer的创建吗?只能合成视频吗?能不能再视频录制过程中,直接逐帧用opengl处理?会不会造成丢帧?
    6310ffb20d0c:@林思聪 用OpenGL实时渲染的代码,我在另一个文章有贴给你了
    6310ffb20d0c:@落影loyinglin 我们的需求是要在视频上加水印和时间,我现在是用的AVFoundation录制视频后,利用AVMutableVideoComposition重新编码视频添加图片水印,但是效果不好,1.图片模糊,2.转换时间长 3.重新编码的视频码率无法设置,导致视频大小增加了一倍(刚录制好的视频一分钟只有3M,重新编码即便不加水印也会增加到6-7M),所以我主要是想解决这几个问题,后面研究了下实时渲染,边录制边渲染,结果就是图片仍然模糊,录制结束不用再等待转码了,但是丢帧严重
    落影loyinglin:@林思聪 丢帧取决于处理速度。你问了很多问题,但是我不能把你问的东西串起来,不太理解你的需求

本文标题:OpenGL ES实践教程(九)OpenGL与视频混合

本文链接:https://www.haomeiwen.com/subject/ufjsdxtx.html