GPUImage详细解析(二)

解析

GPUImage详细解析(一)
上一篇介绍的是GPUImageFramebufferGPUImageFilter
简单回顾一下:

  • GPUImageFilter就是用来接收源图像,通过自定义的顶点、片元着色器来渲染新的图像,并在绘制完成后通知响应链的下一个对象。
  • GPUImageFramebuffer就是用来管理纹理缓存的格式与读写帧缓存的buffer。

这一篇介绍的是GPUImageVideoCameraGPUImageView

GPUImageVideoCamera

GPUImageVideoCamera是GPUImageOutput的子类,提供来自摄像头的图像数据作为源数据,一般是响应链的源头。

1、视频图像采集 :AVCaptureSession

GPUImage使用AVFoundation框架来获取视频。
AVCaptureSession类从AV输入设备的采集数据到制定的输出。
为了实现实时的图像捕获,要实现AVCaptureSession类,添加合适的输入(AVCaptureDeviceInput)和输出(比如 AVCaptureMovieFileOutput)
调用startRunning开始输入到输出的数据流,调用stopRunning停止数据流。
需要注意的是startRunning函数会花费一定的时间,所以不能在主线程(UI线程)调用,防止卡顿。
sessionPreset 属性可以自定义一些设置。
特殊的选项比如说高帧率,可以通过 AVCaptureDevice来设置。
AVCaptureSession使用的简单示例:

_captureSession = [[AVCaptureSession alloc] init];
    [_captureSession beginConfiguration];
// 中间可以实现关于session属性的设置
    [_captureSession commitConfiguration];
  • AVCaptureVideoDataOutput
    AVCaptureVideoDataOutputAVCaptureOutput的子类,用来处理从摄像头采集的未压缩或者压缩过的图像帧。
    通过captureOutput:didOutputSampleBuffer:fromConnection: delegate,可以访问图像帧。
    通过下面这个方法,可以设置delegate。
- (void)setSampleBufferDelegate:
(id<AVCaptureVideoDataOutputSampleBufferDelegate>)sampleBufferDelegate 
queue:(dispatch_queue_t)sampleBufferCallbackQueue;

需要注意的是,当一个新的视频图像帧被采集后,它会被传送到output,调用这里设置的delegate。所有的delegate函数会在这个queue中调用。如果队列被阻塞,新的图像帧到达后会被自动丢弃(默认alwaysDiscardsLateVideoFrames = YES)。这允许app处理当前的图像帧,不需要去管理不断增加的内存,因为处理速度跟不上采集的速度,等待处理的图像帧会占用内存,并且不断增大
必须使用同步队列处理图像帧,保证帧的序列是顺序的。

  • frameRenderingSemaphore 帧渲染的信号量
    下面有一个这样的调用,用于等待处理完一帧后,再接着处理下一帧。
        if (dispatch_semaphore_wait(frameRenderingSemaphore, DISPATCH_TIME_NOW) != 0)
        {
            return;
        }
        runAsynchronouslyOnVideoProcessingQueue(^{
              dispatch_semaphore_signal(frameRenderingSemaphore);
        });
  • rotateCamera
    前后摄像头翻转:更改videoInput的设置。

2、颜色空间:YUV

YUV是被欧洲电视系统所采用的一种颜色编码方法。
采用YUV色彩空间的重要性是它的亮度信号Y色度信号U、V是分离的。如果只有Y信号分量而没有U、V分量,那么这样表示的图像就是黑白灰度图像。彩色电视采用YUV空间正是为了用亮度信号Y解决彩色电视机与黑白电视机的兼容问题,使黑白电视机也能接收彩色电视信号。

YCbCr或Y'CbCr有的时候会被写作:YCBCR或是Y'CBCR,是色彩空间的一种,通常会用于影片中的影像连续处理,或是数字摄影系统中。Y'为颜色的亮度(luma)成分、而CB和CR则为蓝色和红色的浓度偏移量成份。
YUV主要用于优化彩色视频信号的传输,使其向后相容老式黑白电视。与RGB视频信号传输相比,它最大的优点在于只需占用极少的频宽(RGB要求三个独立的视频信号同时传输)。

CbCr 则是在世界数字组织视频标准研制过程中作为ITU - R BT.601 建议的一部分,其实是YUV经过缩放和偏移的翻版。其中Y与YUV 中的Y含义一致,Cb,Cr 同样都指色彩,只是在表示方法上不同而已。在YUV 家族中,YCbCr 是在计算机系统中应用最多的成员,其应用领域很广泛,JPEG、MPEG均采用此格式。一般人们所讲的YUV大多是指YCbCr。YCbCr 有许多取样格式,如4∶4∶4,4∶2∶2,4∶1∶1 和4∶2∶0。
百度百科的介绍
YUV数据格式-图文详解
GPUImage中的YUV
GLProgram *yuvConversionProgram; 将YUV颜色空间转换成RGB颜色空间的GLSL。
CVPixelBufferGetPlaneCount()返回缓冲区的平面数。
通过CVOpenGLESTextureCacheCreateTextureFromImage()创建两个纹理luminanceTextureRef(亮度纹理)和chrominanceTextureRef(色度纹理)。
convertYUVToRGBOutput()把YUV颜色空间的纹理转换成RGB颜色空间的纹理
顶点着色器-通用kGPUImageVertexShaderString
片元着色器:
1、kGPUImageYUVFullRangeConversionForLAFragmentShaderString
2、kGPUImageYUVVideoRangeConversionForLAFragmentShaderString
区别在不同的格式
video-range (luma=[16,235] chroma=[16,240])
full-range (luma=[0,255] chroma=[1,255])

3、纹理绘制

glActiveTextue 并不是激活纹理单元,而是选择当前活跃的纹理单元。每一个纹理单元都有GL_TEXTURE_1D, 2D, 3D 和 CUBE_MAP。

    glActiveTexture(GL_TEXTURE1);
    glGenTextures(1, &_texture);
    glBindTexture(GL_TEXTURE_2D, _texture);

SO的详细介绍

GPUImageView

GPUImageView是响应链的终点,一般用于显示GPUImage的图像。

1、填充模式

GPUImageFillModeType fillMode图像的填充模式。
sizeInPixels 像素区域大小。
recalculateViewGeometry() 重新计算图像顶点位置数据。
AVMakeRectWithAspectRatioInsideRect() 在保证宽高比不变的前提下,得到一个尽可能大的矩形。
如果是kGPUImageFillModeStretch
图像拉伸,直接使宽高等于1.0即可,原图像会直接铺满整个屏幕。

如果是kGPUImageFillModePreserveAspectRatio
保持原宽高比,并且图像不超过屏幕。那么以当前屏幕大小为准。
widthScaling = insetRect.size.width / currentViewSize.width;

如果是kGPUImageFillModePreserveAspectRatioAndFill
保持原宽高比,并且图像要铺满整个屏幕。那么图像大小为准。
widthScaling = currentViewSize.height / insetRect.size.height;

imageVertices存放着顶点数据,上面的修改都会存放在这个数组。

2、OpenGL ES绘制

- (void)newFrameReadyAtTime:(CMTime)frameTime atIndex:(NSInteger)textureIndex;源图像已经准备好,开始绘制。
setDisplayFramebuffer()会绑定GPUImageView的帧缓存,同时调试视口大小为view的大小。
glActiveTexture上面已经介绍过,是选择一个纹理单元。先选择纹理单元4,然后把源图像数据绑定到GL_TEXTURE_2D的位置上。最后告诉片元着色器,纹理单元是4。

        glActiveTexture(GL_TEXTURE4);
        glBindTexture(GL_TEXTURE_2D, [inputFramebufferForDisplay texture]);
        glUniform1i(displayInputTextureUniform, 4);

这两行是分别绑定顶点坐标数据和纹理坐标数据。

        glVertexAttribPointer(displayPositionAttribute, 2, GL_FLOAT, 0, 0, imageVertices);
        glVertexAttribPointer(displayTextureCoordinateAttribute, 2, GL_FLOAT, 0, 0, [GPUImageView textureCoordinatesForRotation:inputRotation]);

这两行是设定输入的源图像数据缓存,并且对缓存加锁。

    inputFramebufferForDisplay = newInputFramebuffer;
    [inputFramebufferForDisplay lock];

在准备好着色器、纹理data、顶点位置坐标和纹理坐标后,就可以调用
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);绘制图像。

demo

这里有一个简单的示例,介绍如何用GPUImageVideoCamera采集图像并且用GPUImageView显示出来。
十分简单,核心代码不过十行。

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

推荐阅读更多精彩内容