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是基于上下文，状态机的控制机制,。
网友评论