GPUImage 详细解析

从源码的角度分析、学习GPUImage和OpenGL ES,这是第一篇,介绍GPUImageFilter 和 GPUImageFramebuffer。

OpenGL ES准备

回顾下我们之前的OpenGL ES教程,图像在OpenGL ES中的表示是纹理,会在片元着色器里面进行像素级别的处理。

假设我们自定义一个OpenGL ES程序来处理图片,那么会有以下几个步骤:

1、初始化OpenGL ES环境,编译、链接顶点着色器和片元着色器;

2、缓存顶点、纹理坐标数据,传送图像数据到GPU;

3、绘制图元到特定的帧缓存;

4、在帧缓存取出绘制的图像。

GPUImageFilter负责的是第一、二、三步。

GPUImageFramebuffer负责是第四步。

GPUImageFilter解析

GPUImageFilter和响应链的其他元素实现了GPUImageInput协议,他们都可以提供纹理参与响应链,或者从响应链的前面接收并处理纹理。响应链的下一个对象是target,响应链可能有多个分支(添加多个targets)。

Filters and other subsequent elements in the chain conform to the GPUImageInput protocol, which lets them take in the supplied or processed texture from the previous link in the chain and do something with it. Objects one step further down the chain are considered targets, and processing can be branched by adding multiple targets to a single output or filter.

获取纹理坐标

+ (const GLfloat *)textureCoordinatesForRotation:(GPUImageRotationMode)rotationMode;

绘制结果输出

绘制的结果后输入到outputframebuffer指定的缓存

usingNextFrameForImageCapture代表着输出的结果会被用于获取图像,所以在绘制之前要加锁

if (usingNextFrameForImageCapture)

{

[outputFramebuffer lock];

}

绑定纹理

glBindTexture(GL_TEXTURE_2D, [firstInputFramebuffer texture]);

绑定输入纹理,OpenGL ES才能确定要处理纹理数据

绑定顶点和纹理坐标并绘制图元

glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);

glVertexAttribPointer(filterTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, textureCoordinates);

glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

GL_TRIANGLE_STRIP模式用于绘制三角形带。这里有介绍

纹理解锁

[firstInputFramebuffer unlock]; 输入纹理使用完毕,解锁。在调用这个解锁之前必须确定之前已经调用加锁,否则会报错。

GPUImageFramebuffer使用引用计数来管理缓存,当引用计数小于0的时候会回收缓存。

信号量

如果设置了usingNextFrameForImageCapture,则会通过GCD信号量来通知仍在等待绘制完成的函数。

if (usingNextFrameForImageCapture)

{

dispatch_semaphore_signal(imageCaptureSemaphore);

}

通知targets

- (void)informTargetsAboutNewFrameAtTime:(CMTime)frameTime;

当self的帧绘制完成后,通知自己的targets,并将自己的输出设置为targets的输入纹理:

[self setInputFramebufferForTarget:currentTarget atIndex:textureIndex];

然后解锁自己使用的输出缓冲区[[self framebufferForOutput] unlock];

(在上一个函数已经lock了这个缓冲区,所以这里的unlock不会马上回收内存,等到targets使用完自己的纹理后调用unlock,缓存会被回收)

在设置完缓冲区后,self会通知所有targets(除了设置忽略的)

[currentTarget newFrameReadyAtTime:frameTime atIndex:textureIndex];

等待渲染完成

if (dispatch_semaphore_wait(imageCaptureSemaphore, convertedTimeout) != 0)

{

return NULL;

}

一系列setter

- (void)setInteger:(GLint)newInteger forUniformName:(NSString *)uniformName;

这些函数是设置GLSL里面的变量

GPUImageFramebuffer

管理纹理缓存格式、帧缓存的buffer。

纹理格式

默认的纹理格式defaultTextureOptions

缓存创建

generateTexture会创建对应的纹理缓存

generateFramebuffer会创建对应的帧缓存

注意:iOS5.0以上会使用CVOpenGLESTextureCache

否则会使用glTexImage2D(),这个我们更熟悉的函数来传送CPU图像数据到GPU

指定渲染目标

glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _texture, 0);

把渲染目标指定为图像

调整视口大小

先绑定自己的帧缓存,再调整视口大小。

- (void)activateFramebuffer;

{

glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

glViewport(0, 0, (int)_size.width, (int)_size.height);

}

解锁

当引用计数小于1的时候,会调用下面的函数把自己放回缓存管理cache。(注意这个和 destroyFramebuffer不一样,一个是回收再利用,一个是销毁)

[[GPUImageContext sharedFramebufferCache] returnFramebufferToCache:self];

从帧缓存中读取图片

在newCGImageFromFramebufferContents函数获取图像数据。

CVPixelBufferGetBaseAddress 和  glReadPixels都可以获得图像数据,根据iOS版本不同调用不同函数。

最后通过CGImageCreate,创建 CGImageRef,然后返回。

CVPixelBuffer

CV像素缓存是一个主内存的图像缓存,应用在渲染帧、压缩解压视频、使用CoreImage都会用到CV像素缓存。

在访问CPU的像素数据之前,必须调用CVPixelBufferLockBaseAddress,并在访问后调用CVPixelBufferUnlockBaseAddress。如果lockFLags带有kCVPixelBufferLock_ReadOnly参数,那么unlocking 的时候也需要。

A Core Video pixel buffer is an image buffer that holds pixels in main memory. Applications generating frames, compressing or decompressing video, or using Core Image can all make use of Core Video pixel buffers.

CVOpenGLESTextureCache

缓存和管理CVOpenGLESTextureRef纹理,这些纹理缓存提供了一个直接读写多种颜色格式缓存的方式。

Core Video OpenGLES texture caches are used to cache and manage CVOpenGLESTextureRef textures. These texture caches provide you with a way to directly read and write buffers with various pixel formats, such as 420v or BGRA, from GLES.

CVOpenGLESTexture

CV纹理是纹理图像缓存,提供OpenGL图像数据

Core Video OpenGLES textures are texture-based image buffers used for supplying source image data to OpenGL.

扩展

GPUImage的四大输入基础类,都可以作为响应链的起点。这些基础类会把图像作为纹理,传给OpenGL ES处理,然后把纹理传递给响应链的下一个对象。

GPUImageVideoCamera 摄像头-视频流

GPUImageStillCamera 摄像头-照相

GPUImagePicture 图片

GPUImageMovie 视频

响应链,先要理解帧缓存的概念,这在OpenGL ES教程-帧缓存有提到过。

总结

用一句话来解释GPUImageFilter就是用来接收源图像,通过自定义的顶点、片元着色器来渲染新的图像,并在绘制完成后通知响应链的下一个对象。

GPUImageFramebuffer就是用来管理纹理缓存的格式与读写帧缓存的buffer。

这里有个GPUImage的简单工程,可以看到GPUImage的源代码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容