[OpenGLES系列]如何入门GPUImage2框架？

2018-10-21 本文已影响130人紧张的牛排

GPUImage2系列专题:

1. 如何入门 GPUImage2 框架？
2. GPUImage2之渲染管线Pipeline的实现

目标：熟悉GPUImage2框架的抽象，利用GPUImage简单处理图像或视频。

学习思路

刚接触OpenGLES的同学，可能因很多原因止步，运行你的第一个hello world程序需要储备很多知识才行，因此可以选择一个低门槛的方式：GPUImage2框架。
接触一个框架，我们先不急于去读代码，一开始就扎头代码中，你不知道哪里是入口，哪里是出口，看了一会儿陷进去了，那就game over了。

framework的抽象
简单使用
阅读代码
总结
备注

1. GPUImage2框架抽象

1.1 观察目录结构

Base -- 渲染层实现、基础类型的封装
Inputs -- 输入源，可以是图片、视频文件、摄像头输出的CMSampleBuffer等等
Outputs -- 输出结果，可以是图片、视频文件、甚至展示到屏幕上
Operations -- 图像处理部分，各种滤镜的实现
Other -- Shader， GPU执行的代码
Tests -- 测试代码

1.2 思考

输入图片 --> 处理 --> 输出图片

例如处理图片，我们大脑里应该有个这个流程，有了这个流程，我们可以去解决每个节点，处理视频也同样道理。

输入：
在Inputs/iOS目录下，发现PictureInput、MovieInput、Camera等类；
-- PictureInput -- 图片输入
-- MovieInput ----- 视频文件输入
-- Camera ----------- 摄像机

处理：
在Operations/Color processing、Operations/Image processing、Operations/Effects、Operations/Blends目录下，有很多种处理效果，我们先不一一看，只知道要处理的找这里就对了。

输出：
在Outputs目录下，有以下5中输出方式：
-- PictureOutput ------ 输出图片
-- MovieOutput --------- 输出视频文件
-- RenderView ----------- 输出到实时显示的预览页上
-- RawDataOutput ------ 输出图像数据
-- TextureOutput ------ 输出纹理格式

讲个大道理：抽象层
在代码设计上，为了保持不同抽象层的接口一致性，都做一层抽象。对于GPUImage2来说，大家想输入的格式千万种，作为framework设计者无法满足所有人，因此都会抽象一层。Inputs、Oputputs是对输入输出的抽象，对外提出输入要求，对内统一输入目的。

2. GPUImage2框架的简单使用

我们以渲染一张图片为例。

创建输入对象：
根据1.2节思考，我们知道输入需要使用PictureInput，输入一个UIImage即可。

private var image = UIImage(named: "sample")
private var input = PictureInput(image: image)

创建输出对象
根据1.2节思考，我们知道输出可以选择几种不同的方案，显示屏幕上选择RenderView,导出图片可以选择PictureOutput，我们选择显示到屏幕上，这样更直观的看到结果。

private var output = RenderView(frame: view.bounds)

2.1 直接显示原图

聪明的你肯定猜到直接把输入连接即可，那么GPUImage2是怎么连接渲染管线的呢？
2.1.1 建立渲染链
建立渲染链的目的是讲前面处理的结果当做下一个的输入，以便做到链式调用目的。
我们先看看PictureInput的接口：

public class PictureInput : ImageSource {

    public let targets: GPUImage.TargetContainer

    public init(image: CGImage, smoothlyScaleOutput: Bool ...

    public convenience init(image: UIImage, smoothlyScaleOutput: Bool ...

    public convenience init(imageName: String, smoothlyScaleOutput: Bool ...

    public func processImage(synchronously: Bool = default)

    public func transmitPreviousImage(to target: ImageConsumer, atIndex: UInt)
}

从接口看只有transmitPreviousImage接口可能有点像连接渲染管线，因为RenderView也确实遵守了ImageConsumer协议。同时也注意到PictureInput也遵守了协议ImageSource。

接下来看看ImageSource有哪些接口：

public protocol ImageSource {
    var targets:TargetContainer { get }
    func transmitPreviousImage(to target:ImageConsumer, atIndex:UInt)
}

public extension ImageSource {
    public func addTarget(_ target:ImageConsumer, atTargetIndex:UInt? = nil)  {
        targets.append(target, indexAtTarget:indexAtTarget)
    }
    public func removeAllTargets() 
    public func updateTargetsWithFramebuffer(_ framebuffer:Framebuffer) 
}

再看看addTarget方法的实现，该方法会把target:ImageConsumer添加到PictureInput.targets上，意思是给输入图片PictureInput添加一个目标，因此这个才是我们寻找的方法。

现在渲染的目标就是RenderView，代码如下：

input = PictureInput(image: image)
output = RenderView(frame: view.bounds)
view.addSubview(output)
input.addTarget(output)

运行程序后，竟然没有效果，并没有显示原图。

2.1.2 驱动渲染管线
再看看PictureInput的接口，发现有个processImage(synchronously: Bool)接口，synchronously是选择异步处理还是同步处理，对于我们例子没有影响，可以选择默认设置。整体代码如下：

class ViewController: UIViewController {
    
    private var input: PictureInput!
    private var output: RenderView!
    
    private var image: UIImage = {
        let imgPath = Bundle.main.path(forResource: "sample", ofType: "jpg")!
        return UIImage(contentsOfFile: imgPath)!
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        input = PictureInput(image: image)
        output = RenderView(frame: view.bounds)
        view.addSubview(output)
        input.addTarget(output)
        input.processImage()
    }
}

运行结果OK。

2.2 滤镜处理

在上面例子的基础上，以调整饱和度的SaturationAdjustment为例，介绍滤镜的使用。
2.2.1 创建滤镜
看SaturationAdjustment滤镜的接口，发现有个可调节饱和度的参数saturation，可以使用UISlider改变饱和度值。

public class SaturationAdjustment: BasicOperation {
    public var saturation:Float = 1.0
   
    public init() { }
}

2.2.2 建立渲染链

// Input -> filter -> output
private var filter = SaturationAdjustment()
filter.saturation = 10.0
input.addTarget(filter)
filter.addTarget(output)

2.2.3 驱动渲染管线(同上)

2.2.4 修改filter.saturation看看效果。

注意：
使用UISlider改变filter.saturation没有变化时，记得调用input.processImage()驱动渲染管线。

3. 阅读代码

PictureInput
两个关键步骤：
-1. 将UIImage转换为image bytes.
-2. 如何使用image bytes生成2D纹理(texture)。

 sharedImageProcessingContext.runOperationSynchronously{
    // 创建了一个framebuffer
    self.imageFramebuffer = try Framebuffer(context:sharedImageProcessingContext, orientation:orientation, size:GLSize(width:widthToUseForTexture, height:heightToUseForTexture), textureOnly:true)
    // 绑定texture 
    glBindTexture(GLenum(GL_TEXTURE_2D), self.imageFramebuffer.texture)
    if (smoothlyScaleOutput) {
        // 设置多级逐渐过滤方式
        glTexParameteri(GLenum(GL_TEXTURE_2D), GLenum(GL_TEXTURE_MIN_FILTER), GL_LINEAR_MIPMAP_LINEAR)
    }
     // 用图片数据生成2D纹理       
     glTexImage2D(GLenum(GL_TEXTURE_2D), 0, GL_RGBA, widthToUseForTexture, heightToUseForTexture, 0, GLenum(format), GLenum(GL_UNSIGNED_BYTE), imageData)
            
     if (smoothlyScaleOutput) {
           // 生成多级逐渐纹理
           glGenerateMipmap(GLenum(GL_TEXTURE_2D))
     }
      // 解绑texture
      glBindTexture(GLenum(GL_TEXTURE_2D), 0)
}

[1]纹理Texture：有1D/2D/3D的纹理，2D纹理是一张2D图。
[2]帧缓冲Framebuffer：OpenGLES将渲染结果保存到它身上。
[3]多级逐渐纹理Mipmap：OpenGLES在一个高分率的纹理上采样正确的颜色值很困难，而且内存开销也大，因此根据离观察者的距离，使用不同采样率的纹理，它会带来性能的优势。

PictureOutput
两个关键步骤：
-1. 绑定framebuffer, 设置参数，draw call。
-2. framebuffer上读取渲染结果生成图片。

func cgImageFromFramebuffer(_ framebuffer:Framebuffer) -> CGImage {
    // GPUImage的framebuffer管理机制：创建了cache，通过framebuffer的参数作为key存储
    // 从cache中读取framebuffer
   let renderFramebuffer = sharedImageProcessingContext.framebufferCache.requestFramebufferWithProperties(orientation:framebuffer.orientation, size:framebuffer.size)
    // 绑定framebuffer
    renderFramebuffer.lock()
    renderFramebuffer.activateFramebufferForRendering()
    clearFramebufferWithColor(Color.red)
    
     // 设置shader的参数（顶点，shader需要的uniform等），并调用draw call.
    renderQuadWithShader(sharedImageProcessingContext.passthroughShader, uniformSettings:ShaderUniformSettings(), vertexBufferObject:sharedImageProcessingContext.standardImageVBO, inputTextures:[framebuffer.texturePropertiesForOutputRotation(.noRotation)])
        
    framebuffer.unlock()
        
    let imageByteSize = Int(framebuffer.size.width * framebuffer.size.height * 4)
    let data = UnsafeMutablePointer<UInt8>.allocate(capacity: imageByteSize)
     // 将渲染的结果从显存上读取
    glReadPixels(0, 0, framebuffer.size.width, framebuffer.size.height, GLenum(GL_RGBA), GLenum(GL_UNSIGNED_BYTE), data)

    renderFramebuffer.unlock()

    // 剩下的事情就是将图片数据生成图片问题了
    guard let dataProvider = CGDataProvider(dataInfo:nil, data:data, size:imageByteSize, releaseData: dataProviderReleaseCallback)  else {
       fatalError("Could not allocate a CGDataProvider")
    }

    let defaultRGBColorSpace = CGColorSpaceCreateDeviceRGB()
   return CGImage(width:Int(framebuffer.size.width), height:Int(framebuffer.size.height), bitsPerComponent:8, bitsPerPixel:32, bytesPerRow:4 * Int(framebuffer.size.width), space:defaultRGBColorSpace, bitmapInfo:CGBitmapInfo() /*| CGImageAlphaInfo.Last*/, provider:dataProvider, decode:nil, shouldInterpolate:false, intent:.defaultIntent)!
    }

RenderView的渲染也一样的，只是不需要从显存里拷贝数据，但需要调用EGALContext的presentRenderbuffer方法进行最终的渲染绘制，这里渲染的是Color Buffer，这个方法会将renderBuffer渲染到CALayer上面。

Filter代码解释
-1. Shader是用着色语言写的，分为顶点着色器vertextShader和片段着色器fragmentShader。
-2. 顶点着色器：OpenGLES只能允许画点、线、三角形，因此画一张方图至少需要2个三角形等同于至少需要4个顶点。
-3. 片段着色器：处理2D纹理时内部有采样器sampler2D, 根据顶点坐标从纹理上采样当前位置的颜色值。

例子代码: https://github.com/DarkKnightOne/GPUImage2.Tutorial

4. 总结

文章第一部分通过目录和文件名简单了解到框架的抽象，对阅读代码有了一定的目的性，刚开始接触时我也一脸懵圈，为了很多的开发者快速的掌握，讲解中采用先抽象，再阅读代码方式。
刚开始接触也可能无法理解为啥绑定framebuffer等操作，这些操作其实就是遵守的流程，使用多了就掌握了，也知道什么时候该做点什么了，所以不要灰心。
目前虽然对整个框架掌握度不是很高，但可以使用框架去做些有趣的效果了，提升大家的兴趣是目的，兴趣上来了就能坚持下来。
写完了这篇后，发现文笔还需要提升，将写技术文章当做总结也是不错的。

5. 备注

文中统一提到OpenGLES, 但OpenGL和OpenGLES流程上是一致的。
OpenGLES的学习是比较漫长的过程，刚开始大多数程序员很难理解，原因在于OpenGLES是基于上下文，状态机的控制机制,。