前言
前面的实践教程：
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协议的sourcePixelBufferAttributes和requiredPixelBufferAttributesForRenderContext的方法中，需要指定对应像素的格式。
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的sourcePixelBufferAttributes和requiredPixelBufferAttributesForRenderContext对齐。
总结
这里的视频混合，为了节省开发时间，OpenGL ES的上下文管理用的GLKit，视频混合部分用的顶点来简单区分，如果要深入开发，需要用自己的shader来处理视频混合的规则。
OpenGL ES的文集有将近半年没更新，一部分原因是新的工作比较忙碌，一部分原因是觉得需要沉淀一段时间。
如今恢复更新，维持一定的精力在图形学上，欢迎简友一起探讨有关OpenGL ES的问题，私信邮箱均可。
PS：如果demo代码写的精简，架构清晰，既有利于自己开发维护，也会节省其他人很多时间。
网友评论