【iOS】（二）GPUImage的Source，滤镜链的源头--万恶之源

2020-03-31 12:38:22 浏览数 (1)

一、前言

（一）GPUImage的结构，滤镜链的实现原理

从上一节的滤镜链的原理中，我们知道了Source总是滤镜链的源头，必须继承GPUImageOutput，通过传递outputFramebuffer给target，实现滤镜链

二、GPUImageOutput关键属性和方法

1、outputFramebuffer

GPUImageOutput中的outputFramebuffer的类型是GPUImageFramebuffer，作用是管理GPUImageOutput（包括Source和Filter）产生的Texture

2、targets

targets是一个保存实现了GPUImageInput的数组，作用是

  • 负责管理GPUImageOutput的GPUImageInput集合
  • 通过addTarget和removeTarget管理GPUImageInput集合

3、setInputFramebufferForTarget

GPUImageOutput生成的outputFrameBuffer设置给GPUImageInput target，这样就实现了GPUImageInput是在GPUImageOutput处理后的texture上做处理，这是滤镜链的关键

三、GPUImageOutput的子类

3.1、GPUImageRawDataInput

从二进制的图片数据中，生成outputFramebuffer，初始化时要指定数据的格式GPUPixelFormat，其核心方法是- (void)uploadBytes:(GLubyte *)bytesToUpload，通过glTexImage2D加载纹理数据

代码语言：javascript复制
- (void)uploadBytes:(GLubyte *)bytesToUpload;
{
    [GPUImageContext useImageProcessingContext];

    // TODO: This probably isn't right, and will need to be corrected
    outputFramebuffer = [[GPUImageContext sharedFramebufferCache] fetchFramebufferForSize:uploadedImageSize textureOptions:self.outputTextureOptions onlyTexture:YES];
    
    glBindTexture(GL_TEXTURE_2D, [outputFramebuffer texture]);
    glTexImage2D(GL_TEXTURE_2D, 0, _pixelFormat, (int)uploadedImageSize.width, (int)uploadedImageSize.height, 0, (GLint)_pixelFormat, (GLenum)_pixelType, bytesToUpload);
}

3.2、GPUImageUIElement

  • 通过UIView或CALayer初始化，通过layer的renderInContext显示内容，核心方法是- (void)updateWithTimestamp:(CMTime)frameTime
  • 将显示的内容绘制到CoreGraphics上下文，获取图像数据后通过glTexImage2D加载纹理数据
  • 适合在视频上添加文字水印的功能
代码语言：javascript复制
- (void)updateWithTimestamp:(CMTime)frameTime;
{
    [GPUImageContext useImageProcessingContext];
    
    CGSize layerPixelSize = [self layerSizeInPixels];
    
    GLubyte *imageData = (GLubyte *) calloc(1, (int)layerPixelSize.width * (int)layerPixelSize.height * 4);
    
    CGColorSpaceRef genericRGBColorspace = CGColorSpaceCreateDeviceRGB();    
    CGContextRef imageContext = CGBitmapContextCreate(imageData, (int)layerPixelSize.width, (int)layerPixelSize.height, 8, (int)layerPixelSize.width * 4, genericRGBColorspace,  kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);
//    CGContextRotateCTM(imageContext, M_PI_2);
    CGContextTranslateCTM(imageContext, 0.0f, layerPixelSize.height);
    CGContextScaleCTM(imageContext, layer.contentsScale, -layer.contentsScale);
    //        CGContextSetBlendMode(imageContext, kCGBlendModeCopy); // From Technical Q&A QA1708: http://developer.apple.com/library/ios/#qa/qa1708/_index.html
    
    [layer renderInContext:imageContext];
    
    CGContextRelease(imageContext);
    CGColorSpaceRelease(genericRGBColorspace);
    
    // TODO: This may not work
    outputFramebuffer = [[GPUImageContext sharedFramebufferCache] fetchFramebufferForSize:layerPixelSize textureOptions:self.outputTextureOptions onlyTexture:YES];

    glBindTexture(GL_TEXTURE_2D, [outputFramebuffer texture]);
    // no need to use self.outputTextureOptions here, we always need these texture options
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, (int)layerPixelSize.width, (int)layerPixelSize.height, 0, GL_BGRA, GL_UNSIGNED_BYTE, imageData);
    ...

3.3、GPUImageVideoCamera

  • 通过AVCaptureVideoDataOutput获取持续的视频数据输出，在代理方法captureOutput:didOutputSampleBuffer:fromConnection:可以拿到CMSamleBufferRef，然后判断采集的图像的编码格式是否为YUV，再进行调用不同的方法，加载纹理数据，核心方法是- (void)processVideoSampleBuffer:(CMSampleBufferRef)sampleBuffer; 若是YUV，需要通过调用CVOpenGLESTextureCacheCreateTextureFromImage分别产生Y和UV纹理。这里纹理的产生大概是这样的一个过程CMSampleBufferRef->CVImageBufferRef->CVOpenGLESTextureRef->Texture
代码语言：javascript复制
//  processVideoSampleBuffer方法中的这个判断就是对YUV编码的图像处理，产生纹理的具体代码
if ([GPUImageContext supportsFastTextureUpload] && captureAsYUV)
    {
   // 这里产生YUV纹理
}

否则还是调用glTexImage2D，加载纹理

  • 一般用它的子类GPUImageStillCamera，既可以拍照，也可以录制视频

3.4、GPUImageMovie

  • 通过本地的视频来初始化，产生纹理的核心方法- (void)startProcessing
    • 通过Asset加载，调用processAsset方法，依赖AVAssetReaderOutput的copyNextSampleBuffer方法，获取CMSampleBufferRef，拿到了SampleBuffer后，就跟上面GPUImageVideoCamera对SampleBuffer的处理方法一样
    • 通过NSURL加载，生成AVURLAsset，然后走processAsset的流程
    • 通过AVPlayerItem加载，调用processPlayerItem方法，通过AVPlayerItemVideoOutput逐帧读取，通过AVPlayerItemVideoOutput的copyPixelBufferForItemTime获取CVPixelBufferRef，然后继续走YUV判断的那套流程产生纹理数据

GPUImageMovie配合AVFoundation，可以做一个视频编辑的功能，GPUImageMovie提供实时预览和加滤镜的功能，AVFoundation负责视频的编辑，这里我做了一个Demo，下载地址https://github.com/maple1994/MPVideoEditDemo

3.5、GPUImageTextureInput

通过已经存在的纹理初始化

3.6、GPUImagePicture

通过加载图片的信息，生成纹理信息，实现的核心是图片->CGImageRef->纹理

四、总结

GPUImageOutput的作用，总的一句话，就是产生纹理数据，将纹理绑定到GPUImageFrameBuffer。常用生成纹理的途径可以总结为以下三种

  • CMSampleBuffer -> CVImageBuffer/CVPixelBuffer -> CVOpenGLESTextureCacheCreateTextureFromImage生成纹理(YUV)
  • UIView -> Layer(生成上下文绘制) -> glTextImage2D
  • UIImage -> CGImageRef -> glTextImage2D
企业 opengl api 缓存 php

0 人点赞