当前位置：首页 > 编程日记 > 正文

教你实现GPUImage【OpenGL渲染原理】

编程日记 2024-08-25 11:10:01

原文出处：袁峥Seemygo（@袁峥Seemygo）

一、前言

本篇主要讲解GPUImage底层是如何渲染的,GPUImage底层使用的是OPENGL,操控GPU来实现屏幕展示

由于网上OpenGL实战资料特别少，官方文档对一些方法也是解释不清楚，避免广大同学再次爬坑，本篇讲解了不少OpenGL的知识，并且还讲解了花了大量时间解决bug的注意点，曾经因为对glDrawArrays这个方法不熟悉，遇上Bug,晚上熬到凌晨四点都没解决，还是第二天中午解决的。

如果喜欢我的文章，可以关注我微博:袁峥Seemygo

二、GPUImageVideoCamera

可以捕获采集的视频数据
关键是捕获到一帧一帧视频数据如何展示？
通过这个方法可以获取采集的视频数据

1
- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection

采集视频注意点：要设置采集竖屏，否则获取的数据是横屏
通过AVCaptureConnection就可以设置

1
[videoConnection setVideoOrientation:AVCaptureVideoOrientationPortraitUpsideDown];

三、自定义OpenGLView渲染视频

暴露一个接口，获取采集到的帧数据，然后把帧数据传递给渲染View,展示出来

1
- (void)displayFramebuffer:(CMSampleBufferRef)sampleBuffer;

四、利用OpenGL渲染帧数据并显示

导入头文件#import ，GLKit.h底层使用了OpenGLES,导入它，相当于自动导入了OpenGLES
步骤
- 01-自定义图层类型
- 02-初始化CAEAGLLayer图层属性
- 03-创建EAGLContext
- 04-创建渲染缓冲区
- 05-创建帧缓冲区
- 06-创建着色器
- 07-创建着色器程序
- 08-创建纹理对象
- 09-YUV转RGB绘制纹理
- 10-渲染缓冲区到屏幕
- 11-清理内存

01-自定义图层类型

为什么要自定义图层类型CAEAGLLayer? CAEAGLLayer是OpenGL专门用来渲染的图层，使用OpenGL必须使用这个图层

1
2
3
4
5
#pragma mark - 1.自定义图层类型
+ (Class)layerClass
{
    return [CAEAGLLayer class];
}

02-初始化CAEAGLLayer图层属性

1.不透明度(opaque)=YES,CALayer默认是透明的，透明性能不好,最好设置为不透明.
2.设置绘图属性
- kEAGLDrawablePropertyRetainedBacking ：NO (告诉CoreAnimation不要试图保留任何以前绘制的图像留作以后重用)
- kEAGLDrawablePropertyColorFormat ：kEAGLColorFormatRGBA8 (告诉CoreAnimation用8位来保存RGBA的值)
其实设置不设置都无所谓，默认也是这个值,只不过GPUImage设置了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#pragma mark - 2.初始化图层
- (void)setupLayer
{
    CAEAGLLayer *openGLLayer = (CAEAGLLayer *)self.layer;
    _openGLLayer = openGLLayer;
    // 设置不透明,CALayer 默认是透明的，透明性能不好,最好设置为不透明.
    openGLLayer.opaque = YES;
    // 设置绘图属性drawableProperties
    // kEAGLColorFormatRGBA8 ： red、green、blue、alpha共8位
    openGLLayer.drawableProperties = @{
                                       kEAGLDrawablePropertyRetainedBacking :[NSNumber numberWithBool:NO],
                                      kEAGLDrawablePropertyColorFormat : kEAGLColorFormatRGBA8
                                       };
}

03-创建EAGLContext

需要将它设置为当前context，所有的OpenGL ES渲染默认渲染到当前上下文
EAGLContext管理所有使用OpenGL ES进行描绘的状态，命令以及资源信息，要绘制东西，必须要有上下文，跟图形上下文类似。
当你创建一个EAGLContext，你要声明你要用哪个version的API。这里，我们选择OpenGL ES 2.0

1
2
3
4
5
6
7
8
9
10
11
12
#pragma mark - 3、创建OpenGL上下文，并且设置上下文
- (void)setupContext
{
    // 指定OpenGL 渲染 API 的版本，目前都使用 OpenGL ES 2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    // 创建EAGLContext上下文
    _context = [[EAGLContext alloc] initWithAPI:api];
    // 设置为当前上下文，所有的渲染默认渲染到当前上下文
    [EAGLContext setCurrentContext:_context];
}

04-创建渲染缓冲区

有了上下文，openGL还需要在一块buffer进行描绘，这块buffer就是RenderBuffer
OpenGLES 总共有三大不同用途的color buffer，depth buffer 和 stencil buffer.
最基本的是color buffer，创建它就好了

函数glGenRenderbuffers

1
函数 void glGenRenderbuffers (GLsizei n, GLuint* renderbuffers)

它是为renderbuffer(渲染缓存)申请一个id（名字）,创建渲染缓存
参数n表示申请生成renderbuffer的个数
参数renderbuffers返回分配给renderbuffer(渲染缓存)的id
。注意：返回的id不会为0，id 0 是OpenGL ES保留的，我们也不能使用id 为0的renderbuffer(渲染缓存)。

函数glBindRenderbuffer

1
void glBindRenderbuffer (GLenum target, GLuint renderbuffer)

告诉OpenGL：我在后面引用GL_RENDERBUFFER的地方，其实是引用_colorRenderBuffer
参数target必须为GL_RENDERBUFFER
参数renderbuffer就是使用glGenRenderbuffers生成的id
。当指定id的renderbuffer第一次被设置为当前renderbuffer时，会初始化该 renderbuffer对象，其初始值为：

1
2
3
4
5
6
7
8
9
width 和 height：像素单位的宽和高，默认值为0；
internal format：内部格式，三大 buffer 格式之一 -- color，depth or stencil；
Color bit-depth：仅当内部格式为 color 时，设置颜色的 bit-depth，默认值为0；
Depth bit-depth：仅当内部格式为 depth时，默认值为0；
Stencil bit-depth: 仅当内部格式为 stencil，默认值为0

函数renderbufferStorage

1
EAGLContext方法 - (BOOL)renderbufferStorage:(NSUInteger)target fromDrawable:(id)drawable

把渲染缓存(renderbuffer)绑定到渲染图层(CAEAGLLayer)上，并为它分配一个共享内存。
参数target，为哪个renderbuffer分配存储空间
参数drawable，绑定在哪个渲染图层，会根据渲染图层里的绘图属性生成共享内存。

1
2
    //    底层调用这个分配内存
    glRenderbufferStorage(GL_RENDERBUFFER, GL_RGBA, _openGLLayer.bounds.size.width, _openGLLayer.bounds.size.height);

实战代码

1
2
3
4
5
6
7
8
9
10
11
#pragma mark - 4、创建渲染缓存
- (void)setupRenderBuffer
{
    glGenRenderbuffers(1, &_colorRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
    // 把渲染缓存绑定到渲染图层上CAEAGLLayer，并为它分配一个共享内存。
    // 并且会设置渲染缓存的格式，和宽度
    [_context renderbufferStorage:GL_RENDERBUFFER fromDrawable:_openGLLayer];
}

05-创建帧缓冲区

它相当于buffer(color, depth, stencil)的管理者，三大buffer可以附加到一个framebuffer上
本质是把framebuffer内容渲染到屏幕

函数glFramebufferRenderbuffer

1
void glFramebufferRenderbuffer (GLenum target, GLenum attachment, GLenum renderbuffertarget, GLuint renderbuffer)

该函数是将相关buffer()三大buffer之一)attach到framebuffer上,就会自动把渲染缓存的内容填充到帧缓存，在由帧缓存渲染到屏幕
参数target，哪个帧缓存
参数attachment是指定renderbuffer被装配到那个装配点上，其值是GL_COLOR_ATTACHMENT0, GL_DEPTH_ATTACHMENT, GL_STENCIL_ATTACHMENT中的一个，分别对应 color，depth和 stencil三大buffer。
renderbuffertarget:哪个渲染缓存
renderbuffer渲染缓存id

1
2
3
4
5
6
7
8
#pragma mark - 5、创建帧缓冲区
- (void)setupFrameBuffer
{
    glGenFramebuffers(1, &_framebuffers);
    glBindFramebuffer(GL_FRAMEBUFFER, _framebuffers);
    // 把颜色渲染缓存 添加到 帧缓存的GL_COLOR_ATTACHMENT0上,就会自动把渲染缓存的内容填充到帧缓存，在由帧缓存渲染到屏幕
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _colorRenderBuffer);
}

06-创建着色器

着色器

什么是着色器? 通常用来处理纹理对象，并且把处理好的纹理对象渲染到帧缓存上，从而显示到屏幕上。
提取纹理信息，可以处理顶点坐标空间转换，纹理色彩度调整(滤镜效果)等操作。
着色器分为顶点着色器，片段着色器
- 顶点着色器用来确定图形形状
- 片段着色器用来确定图形渲染颜色
步骤： 1.编辑着色器代码 2.创建着色器 3.编译着色器
只要创建一次，可以在一开始的时候创建

着色器代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 顶点着色器代码
NSString *const kVertexShaderString = SHADER_STRING
(
 attribute vec4 position;
 attribute vec2 inputTextureCoordinate;
 varying vec2 textureCoordinate;
 void main()
 {
     gl_Position = position;
     textureCoordinate = inputTextureCoordinate;
 }
);
// 片段着色器代码
NSString *const kYUVFullRangeConversionForLAFragmentShaderString = SHADER_STRING
(
 varying highp vec2 textureCoordinate;
 precision mediump float;
 uniform sampler2D luminanceTexture;
 uniform sampler2D chrominanceTexture;
 uniform mediump mat3 colorConversionMatrix;
 void main()
 {
     mediump vec3 yuv;
     lowp vec3 rgb;
     yuv.x = texture2D(luminanceTexture, textureCoordinate).r;
     yuv.yz = texture2D(chrominanceTexture, textureCoordinate).ra - vec2(0.5, 0.5);
     rgb = colorConversionMatrix * yuv;
     gl_FragColor = vec4(rgb, 1);
 }
);

实战代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#pragma mark - 06、创建着色器
- (void)setupShader
{
    // 创建顶点着色器
    _vertShader = [self loadShader:GL_VERTEX_SHADER withString:kVertexShaderString];
    // 创建片段着色器
    _fragShader = [self loadShader:GL_FRAGMENT_SHADER withString:kYUVFullRangeConversionForLAFragmentShaderString];
}
// 加载着色器
- (GLuint)loadShader:(GLenum)type withString:(NSString *)shaderString
{
    // 创建着色器
    GLuint shader = glCreateShader(type);
    if (shader == 0) {
        NSLog(@"Error: failed to create shader.");
        return 0;
    }
    // 加载着色器源代码
    const char * shaderStringUTF8 = [shaderString UTF8String];
    glShaderSource(shader, 1, &shaderStringUTF8, NULL);
    // 编译着色器
    glCompileShader(shader);
    // 检查是否完成
    GLint compiled = 0;
    // 获取完成状态
    glGetShaderiv(shader, GL_COMPILE_STATUS, &compiled);
    if (compiled == 0) {
        // 没有完成就直接删除着色器
        glDeleteShader(shader);
        return 0;
    }
    return shader;
}

07-创建着色器程序

步骤： 1.创建程序 2.贴上顶点和片段着色器 3.绑定attribute属性 4.连接程序 5.绑定uniform属性 6.运行程序
注意点：第3步和第5步，绑定属性，必须有顺序，否则绑定不成功，造成黑屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#pragma mark - 7、创建着色器程序
- (void)setupProgram
{
    // 创建着色器程序
    _program = glCreateProgram();
    // 绑定着色器
    // 绑定顶点着色器
    glAttachShader(_program, _vertShader);
    // 绑定片段着色器
    glAttachShader(_program, _fragShader);
    // 绑定着色器属性,方便以后获取，以后根据角标获取
    // 一定要在链接程序之前绑定属性,否则拿不到
    glBindAttribLocation(_program, ATTRIB_POSITION, "position");
    glBindAttribLocation(_program, ATTRIB_TEXCOORD, "inputTextureCoordinate");
    // 链接程序
    glLinkProgram(_program);
    // 获取全局参数,注意 一定要在连接完成后才行，否则拿不到
    _luminanceTextureAtt = glGetUniformLocation(_program, "luminanceTexture");
    _chrominanceTextureAtt = glGetUniformLocation(_program, "chrominanceTexture");
    _colorConversionMatrixAtt = glGetUniformLocation(_program, "colorConversionMatrix");
    // 启动程序
    glUseProgram(_program);
}

08-创建纹理对象

纹理

采集的是一张一张的图片，可以把图片转换为OpenGL中的纹理，然后再把纹理画到OpenGL的上下文中
什么是纹理？一个纹理其实就是一幅图像。
纹理映射,我们可以把这幅图像的整体或部分贴到我们先前用顶点勾画出的物体上去.
比如绘制一面砖墙，就可以用一幅真实的砖墙图像或照片作为纹理贴到一个矩形上，这样，一面逼真的砖墙就画好了。如果不用纹理映射的方法，则墙上的每一块砖都必须作为一个独立的多边形来画。另外，纹理映射能够保证在变换多边形时，多边形上的纹理图案也随之变化。
纹理映射是一个相当复杂的过程，基本步骤如下：
- 1）激活纹理单元、2）创建纹理、3）绑定纹理、4）设置滤波
注意：纹理映射只能在RGBA方式下执行

函数glTexParameter

1
2
3
void glTexParameter{if}[v](GLenum target,GLenum pname,TYPE param);
{if}:表示可能是否i,f
[v]:表示v可有可无

控制滤波，滤波就是去除没用的信息，保留有用的信息
一般来说，纹理图像为正方形或长方形。但当它映射到一个多边形或曲面上并变换到屏幕坐标时，纹理的单个纹素很少对应于屏幕图像上的像素。根据所用变换和所用纹理映射，屏幕上单个象素可以对应于一个纹素的一小部分（即放大）或一大批纹素（即缩小）
固定写法

1
2
3
/* 控制滤波 */  
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);  
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);

函数glPixelStorei

1
void glPixelStorei(GLenum pname, GLint param);

设置像素存储方式
pname：像素存储方式名
一种是GL_PACK_ALIGNMENT，用于将像素数据打包,一般用于压缩。
另一种是GL_UNPACK_ALIGNMENT，用于将像素数据解包，一般生成纹理对象，就需要用到解包.
param：用于指定存储器中每个像素行有多少个字节对齐。这个数值一般是1、2、4或8，
一般填1，一个像素对应一个字节;

函数CVOpenGLESTextureCacheCreateTextureFromImage

1
CVOpenGLESTextureCacheCreateTextureFromImage(CFAllocatorRef  _Nullable allocator, CVOpenGLESTextureCacheRef  _Nonnull textureCache, CVImageBufferRef  _Nonnull sourceImage, CFDictionaryRef  _Nullable textureAttributes, GLenum target, GLint internalFormat, GLsizei width, GLsizei height, GLenum format, GLenum type, size_t planeIndex, CVOpenGLESTextureRef  _Nullable * _Nonnull textureOut)

根据图片生成纹理
参数allocator kCFAllocatorDefault,默认分配内存
参数textureCache 纹理缓存
参数sourceImage 图片
参数textureAttributes NULL
参数target , GL_TEXTURE_2D(创建2维纹理对象)
参数internalFormat GL_LUMINANCE，亮度格式
参数width 图片宽
参数height 图片高
参数format GL_LUMINANCE 亮度格式
参数type 图片类型 GL_UNSIGNED_BYTE
参数planeIndex 0,切面角标，表示第0个切面

参数textureOut 输出的纹理对象

1
2
3
4
5
6
fotmat格式                    描述
GL_ALPHA            按照ALPHA值存储纹理单元
GL_LUMINANCE        按照亮度值存储纹理单元
GL_LUMINANCE_ALPHA    按照亮度和alpha值存储纹理单元
GL_RGB                按照RGB成分存储纹理单元
GL_RGBA                按照RGBA成分存储纹理单元

实战代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#pragma mark - 7、创建纹理对象，渲染采集图片到屏幕
- (void)setupTexture:(CMSampleBufferRef)sampleBuffer
{
    // 获取图片信息
    CVImageBufferRef imageBufferRef = CMSampleBufferGetImageBuffer(sampleBuffer);
    // 获取图片宽度
    GLsizei bufferWidth = (GLsizei)CVPixelBufferGetWidth(imageBufferRef);
    _bufferWidth = bufferWidth;
    GLsizei bufferHeight = (GLsizei)CVPixelBufferGetHeight(imageBufferRef);
    _bufferHeight = bufferHeight;
    // 创建亮度纹理
    // 激活纹理单元0, 不激活，创建纹理会失败
    glActiveTexture(GL_TEXTURE0);
    // 创建纹理对象
    CVReturn err;
    err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault, _textureCacheRef, imageBufferRef, NULL, GL_TEXTURE_2D, GL_LUMINANCE, bufferWidth, bufferHeight, GL_LUMINANCE, GL_UNSIGNED_BYTE, 0, &_luminanceTextureRef);
    if (err) {
        NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", err);
    }
    // 获取纹理对象
    _luminanceTexture = CVOpenGLESTextureGetName(_luminanceTextureRef);
    // 绑定纹理
    glBindTexture(GL_TEXTURE_2D, _luminanceTexture);
    // 设置纹理滤波
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    // 激活单元1
    glActiveTexture(GL_TEXTURE1);
    // 创建色度纹理
    err = CVOpenGLESTextureCacheCreateTextureFromImage(kCFAllocatorDefault, _textureCacheRef, imageBufferRef, NULL, GL_TEXTURE_2D, GL_LUMINANCE_ALPHA, bufferWidth / 2, bufferHeight / 2, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, 1, &_chrominanceTextureRef);
    if (err) {
        NSLog(@"Error at CVOpenGLESTextureCacheCreateTextureFromImage %d", err);
    }
    // 获取纹理对象
    _chrominanceTexture = CVOpenGLESTextureGetName(_chrominanceTextureRef);
    // 绑定纹理
    glBindTexture(GL_TEXTURE_2D, _chrominanceTexture);
    // 设置纹理滤波
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
}

09-YUV转RGB绘制纹理

纹理映射只能在RGBA方式下执行
而采集的是YUV，所以需要把YUV 转换为 RGBA，
本质其实就是改下矩阵结构
注意点（熬夜凌晨的bug）：glDrawArrays如果要绘制着色器上的点和片段，必须和着色器赋值代码放在一个代码块中，否则找不到绘制的信息，就绘制不上去，造成屏幕黑屏
之前是把glDrawArrays和YUV转RGB方法分开，就一直黑屏.

函数glUniform1i

1
glUniform1i(GLint location, GLint x)

指定着色器中亮度纹理对应哪一层纹理单元
参数location:着色器中纹理坐标
参数x：指定那一层纹理

函数glEnableVertexAttribArray

1
glEnableVertexAttribArray(GLuint index)

开启顶点属性数组,只有开启顶点属性，才能给顶点属性信息赋值

函数glVertexAttribPointer

1
glVertexAttribPointer(GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid *ptr)

设置顶点着色器属性，描述属性的基本信息
参数indx：属性ID，给哪个属性描述信息
参数size：顶点属性由几个值组成，这个值必须位1，2，3或4；
参数type：表示属性的数据类型
参数normalized:GL_FALSE表示不要将数据类型标准化
参数stride 表示数组中每个元素的长度；
参数ptr 表示数组的首地址

函数glBindAttribLocation

1
glBindAttribLocation(GLuint program, GLuint index, const GLchar *name)

给属性绑定ID，通过ID获取属性,方便以后使用
参数program 程序
参数index 属性ID
参数name 属性名称

函数glDrawArrays

1
glDrawArrays(GLenum mode, GLint first, GLsizei count)

作用：使用当前激活的顶点着色器的顶点数据和片段着色器数据来绘制基本图形
mode：绘制方式一般使用GL_TRIANGLE_STRIP，三角形绘制法
first：从数组中哪个顶点开始绘制，一般为0
count:数组中顶点数量，在定义顶点着色器的时候，就定义过了，比如vec4,表示4个顶点
注意点,如果要绘制着色器上的点和片段，必须和着色器赋值代码放在一个代码块中，否则找不到绘制的信息，就绘制不上去，造成屏幕黑屏。

实战代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// YUV 转 RGB，里面的顶点和片段都要转换
- (void)convertYUVToRGBOutput
{
    // 在创建纹理之前，有激活过纹理单元，就是那个数字.GL_TEXTURE0,GL_TEXTURE1
    // 指定着色器中亮度纹理对应哪一层纹理单元
    // 这样就会把亮度纹理，往着色器上贴
    glUniform1i(_luminanceTextureAtt, 0);
    // 指定着色器中色度纹理对应哪一层纹理单元
    glUniform1i(_chrominanceTextureAtt, 1);
    // YUV转RGB矩阵
    glUniformMatrix3fv(_colorConversionMatrixAtt, 1, GL_FALSE, _preferredConversion);
    // 计算顶点数据结构
    CGRect vertexSamplingRect = AVMakeRectWithAspectRatioInsideRect(CGSizeMake(self.bounds.size.width, self.bounds.size.height), self.layer.bounds);
    CGSize normalizedSamplingSize = CGSizeMake(0.0, 0.0);
    CGSize cropScaleAmount = CGSizeMake(vertexSamplingRect.size.width/self.layer.bounds.size.width, vertexSamplingRect.size.height/self.layer.bounds.size.height);
    if (cropScaleAmount.width > cropScaleAmount.height) {
        normalizedSamplingSize.width = 1.0;
        normalizedSamplingSize.height = cropScaleAmount.height/cropScaleAmount.width;
    }
    else {
        normalizedSamplingSize.width = 1.0;
        normalizedSamplingSize.height = cropScaleAmount.width/cropScaleAmount.height;
    }
    // 确定顶点数据结构
    GLfloat quadVertexData [] = {
        -1 * normalizedSamplingSize.width, -1 * normalizedSamplingSize.height,
        normalizedSamplingSize.width, -1 * normalizedSamplingSize.height,
        -1 * normalizedSamplingSize.width, normalizedSamplingSize.height,
        normalizedSamplingSize.width, normalizedSamplingSize.height,
    };
    // 确定纹理数据结构
    GLfloat quadTextureData[] =  { // 正常坐标
        0, 0,
        1, 0,
        0, 1,
        1, 1
    };
    // 激活ATTRIB_POSITION顶点数组
    glEnableVertexAttribArray(ATTRIB_POSITION);
    // 给ATTRIB_POSITION顶点数组赋值
    glVertexAttribPointer(ATTRIB_POSITION, 2, GL_FLOAT, 0, 0, quadVertexData);
    // 激活ATTRIB_TEXCOORD顶点数组
    glVertexAttribPointer(ATTRIB_TEXCOORD, 2, GL_FLOAT, 0, 0, quadTextureData);
    // 给ATTRIB_TEXCOORD顶点数组赋值
    glEnableVertexAttribArray(ATTRIB_TEXCOORD);
    // 渲染纹理数据,注意一定要和纹理代码放一起
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}

10-渲染缓冲区到屏幕

注意点：必须设置窗口尺寸glViewport
注意点：渲染代码必须调用[EAGLContext setCurrentContext:_context]
原因：因为是多线程，每一个线程都有一个上下文，只要在一个上下文绘制就好，设置线程的上下文为我们自己的上下文,就能绘制在一起了，否则会黑屏.
注意点：每次创建纹理前，先把之前的纹理引用清空[self cleanUpTextures]，否则卡顿
函数glViewport
1
glViewport(GLint x, GLint y, GLsizei width, GLsizei height)
设置OpenGL渲染窗口的尺寸大小,一般跟图层尺寸一样.

注意：在我们绘制之前还有一件重要的事情要做，我们必须告诉OpenGL渲染窗口的尺寸大小

方法presentRenderbuffer

1
- (BOOL)presentRenderbuffer:(NSUInteger)target

是将指定renderbuffer呈现在屏幕上

实战代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#pragma mark - 10.渲染帧缓存
- (void)displayFramebuffer:(CMSampleBufferRef)sampleBuffer
{
    // 因为是多线程，每一个线程都有一个上下文，只要在一个上下文绘制就好，设置线程的上下文为我们自己的上下文,就能绘制在一起了，否则会黑屏.
    if ([EAGLContext currentContext] != _context) {
        [EAGLContext setCurrentContext:_context];
    }
    // 清空之前的纹理，要不然每次都创建新的纹理，耗费资源，造成界面卡顿
    [self cleanUpTextures];
    // 创建纹理对象
    [self setupTexture:sampleBuffer];
    // YUV 转 RGB
    [self convertYUVToRGBOutput];
    // 设置窗口尺寸
    glViewport(0, 0, self.bounds.size.width, self.bounds.size.height);
    // 把上下文的东西渲染到屏幕上
    [_context presentRenderbuffer:GL_RENDERBUFFER];
}

11-清理内存

注意：只要有Ref结尾的，都需要自己手动管理，清空

函数glClearColor

1
glClearColor (GLclampf red, GLclampf green, GLclampf blue, GLclampfalpha)

设置一个RGB颜色和透明度，接下来会用这个颜色涂满全屏.

函数glClear

1
glClear (GLbitfieldmask)

用来指定要用清屏颜色来清除由mask指定的buffer，mask可以是 GL_COLOR_BUFFER_BIT，GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT的自由组合。
在这里我们只使用到 color buffer，所以清除的就是 clolor buffer。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#pragma mark - 11.清理内存
- (void)dealloc
{
    // 清空缓存
    [self destoryRenderAndFrameBuffer];
    // 清空纹理
    [self cleanUpTextures];
}
#pragma mark - 销毁渲染和帧缓存
- (void)destoryRenderAndFrameBuffer
{
    glDeleteRenderbuffers(1, &_colorRenderBuffer);
    _colorRenderBuffer = 0;
    glDeleteBuffers(1, &_framebuffers);
    _framebuffers = 0;
}
// 清空纹理
- (void)cleanUpTextures
{
    // 清空亮度引用
    if (_luminanceTextureRef) {
        CFRelease(_luminanceTextureRef);
        _luminanceTextureRef = NULL;
    }
    // 清空色度引用
    if (_chrominanceTextureRef) {
        CFRelease(_chrominanceTextureRef);
        _chrominanceTextureRef = NULL;
    }
    // 清空纹理缓存
    CVOpenGLESTextureCacheFlush(_textureCacheRef, 0);
}

GPUImage工作原理

GPUImage最关键在于GPUImageFramebuffer这个类，这个类会保存当前处理好的图片信息。
GPUImage是通过一个链条处理图片，每个链条通过target连接,每个target处理完图片后，会生成一个GPUImageFramebuffer对象，并且把图片信息保存到GPUImageFramebuffer。
这样比如targetA处理好，要处理targetB,就会先取出targetA的图片，然后targetB在targetA的图片基础上在进行处理.

https://www.dkcj.cn/info/15800.html

构建之法阅读笔记02

在这次的阅读过程中我了解到了如何给别人提意见，给我最大的启发是乔布斯对其下属提意见的小故事，当其下属把iphone的图标都设计成了矩形的时候，乔布斯建议他把图标设计成带圆角的正方形，而其下属一开始却并没有接受乔的意见&#…

编程日记2024/08/25 11:00:01

Windows Server 2008 R2 配置笔记，密码设置为任意长度，远程桌面终端连接数的设置...

图片显示不完全时，可在新标签页打开。 Windows Server 2008 R2 配置{ 安装企业版(Enterprise Editon)，因为企业版功能全面，并且比数据中心版更容易配置{ 各版本功能概述在版本概览页面。详细参数对比在版本概览页面右边有链接&…

编程日记2024/08/25 10:50:00

html5图片灰度显示,HTML5 组件Canvas实现图像灰度化

HTML5发布已经有很长一段时间了，一直以来从来没有仔细的看过，过年刚来随便看看发现HTML5中的Canvas组件功能是如此的强大，不怪很多牛人预言Flash已死，死不死不是我要关心的，我关心的Canvas可以很轻松在网页中实现简单相…

编程日记2024/08/25 10:40:00

访问数据库： View Code using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using Syst…

编程日记2024/08/25 10:30:00

视频编解码之理论概述和即时通信

前言即时通讯应用中的实时音视频技术，几乎是IM开发中的最后一道高墙。原因在于：实时音视频技术音视频处理技术网络传输技术的横向技术应用集合体，而公共互联网不是为了实时通信设计的。有关实时音视频开发时的技术难题请参见《音视频云…

编程日记2024/08/25 10:20:00

图论：关于二分图的总结(转载)

二分图是这样一个图，它的顶点可以分类两个集合X和Y，所有的边关联在两个顶点中，恰好一个属于集合Ｘ，另一个属于集合Ｙ。最大匹配：图中包含边数最多的匹配称为图的最大匹配。完美匹配：…

编程日记2024/08/25 10:10:00

动态加载的html没有js效果,JS利用html5实现loadding动态加载效果代码实例

51前端window.οnlοadfunction(){var Loading function (canvas, options) {this.canvas document.getElementById(canvas);this.options options;};Loading.prototype{constructor: Loading,show: function(){var canvas this.canvas,begin this.options.begin,old thi…

编程日记2024/08/25 10:00:00

iOS 自动布局框架 – Masonry 详解

来源：伯乐在线 - 刘小壮如有好文章投稿，请点击 → 这里了解详情如需转载，发送「转载」二字查看说明目前iOS开发中大多数页面都已经开始使用Interface Builder的方式进行UI开发了，但是在一些变化比较复杂的页面，还是…

编程日记2024/08/25 09:50:01

GDC2016 Epic Games【Bullet Train】新风格的VR-FPS的制作方法

追求“舒适”和“快感”的VR游戏设计方法http://game.watch.impress.co.jp/docs/news/20160318_749016.html【Bullet Train】演讲的状况在游戏的创造历史上，有那种决定性的创新，以及高完成度的作品，对于FPS风格来说，【DOOM】就是这…

编程日记2024/08/25 09:40:00

例4-1和例4-2和例4-3

public class ComputerCircleArea{ public static void main(String args[]){ double radius; double area; radius163.16; area3.14*radius*radius; System.out.printf("半径是%5.3f的圆的面积:\n%5.3f\n",radius,area); }} class Circle{ double radius; doubl…

编程日记2024/08/25 09:30:00

html中的两种标记,如何在html选项标记中实现两种不同的对齐?

下面是一个单空间js解决方案,与scott everden的jquery示例一起使用。我只在firefox中测试过,但这应该足够开始了。javascriptvar MIN_SPACES_BETWEEN_VALS 3;function mkOption(left, right, total){var str left;var spaces total - left.length - right.length;for(x 0;x…

编程日记2024/08/25 09:20:00

html标签(2)--有序列表与无序列表

有一些内容形式，用div来实现非常麻烦，也不适合例如一些表格形式无序列表 ul 代表列表 li 代表列表中的项 list-style 控制列表的样式有序列表 ol 代表列表 li 代表列表中的项 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN…

编程日记2024/08/25 09:10:00

Swift3实现的绘制股票K线库, FastImageCache提升图片的加载和渲染速度,Chameleon颜色框架

代码1:用Swift3实现的绘制股票K线库 for iOS & macOS代码地址：网页链接代码2:FastImageCache是Path团队开发的一个开源库，用于提升图片的加载和渲染速度，让基于图片的列表滑动起来更顺畅。代码地址：网页链接代码3：…

编程日记2024/08/25 09:00:00

传智播客还收费兄弟会都是免费的

【传智播客还收费兄弟会都是免费的兄弟连兄弟会it开发培训 www.itxdh.net 企鹅群：499956522 高端人才培养就到【兄弟连兄弟会it开发培训】纯免费的高端IT人才培养】传智播客，一个多么具有戏剧性的词眼，以前张孝祥老师建校的初衷就是为了让…

编程日记2024/08/25 08:50:00

用计算机的英语造句process,process的用法总结大全

process的意思n. 过程,工序,做事方法,工艺流程vt. 加工,处理,审阅,审核vi. 列队行进adj. 经过特殊加工(或处理)的变形：过去式: processed； 现在分词：processing； 过去分词：processed；process用法process可以…

编程日记2024/08/25 08:40:00

iOS进阶之页面性能优化

作者: hi_xgb 地址: http://www.jianshu.com/p/1b5cbf155b31 前言在软件开发领域里经常能听到这样一句话，“过早的优化是万恶之源”，不要过早优化或者过度优化。我认为在编码过程中时刻注意性能影响是有必要的，但凡事都有个度，不…

编程日记2024/08/25 08:30:00

LabelMe图像数据集下载

Download MATLAB Toolbox for the LabelMe Image Database 利用Matlab Toolbox工具箱下载图像库一、下载Matlab Toolbox工具箱 1. Github repository We maintain the latest version of the toolbox on github. To pull the latest version, make sure that "git" …

编程日记2024/08/25 08:20:00

win8计算机管理没有用户组,Win8右键计算机管理提示“该文件没有与之关联的程序”怎么办？...

最近有Win8用户反映，右键计算机管理的时候，出现提示“该文件没有与之关联的程序来执行该操作”，这让用户非常苦恼。那么，Win8右键计算机管理提示“该文件没有与之关联的程序”怎么办呢？下面，我们就一起往下…

编程日记2024/08/25 08:10:00

Objective-C 自动生成文档工具:appledoc

来源：iOS_小松哥 www.jianshu.com/p/fd4d8d6b6177 如有好文章投稿，请点击 → 这里了解详情由于最近琐事比较多，所以好久没有写文章了。今天我们聊一聊Objective-C自动生成文档。做项目的人多了，就需要文档了。手工写文档是一件…

编程日记2024/08/25 08:00:00

linux命令--提升

查看系统进程：top 查看磁盘空间： df -h 查询系统负载: uptime , 以下显示输入uptime的信息： 04:03:58 up 10 days, 13:19, 1 user, load average: 0.54, 0.40, 0.20 1.当前时间 04:03:58 2.系统已运行的时间 10 days, 13:19 3.前在线用户…

编程日记2024/08/25 07:50:00

git 从远程主服务器当中创建新分支

现有版本; h20, h28，h26,i8 h28，h26,i8是从H20下面创建的。需求: 从H28下面创建新分支继续开发。思路： 所有代码均是放置到H20上仓库当中，首先下载H20完整仓库，也就是.git文件夹当中内容，其本质是一个ZIP…

编程日记2024/08/25 07:40:00

涉密计算机用户账号设置审批表,北京邮电大学涉密计算机配置审批表.PDF

北京邮电大学涉密计算机配置审批表北京邮电大学涉密计算机配置审批表使用部门品牌型号涉密计算机类型 ?台式机 ?便携机资产编号用途 ?科研 ?办公 ?其他配置日期硬盘序列号中央处理器硬盘容量CPU基本配置内存显示器品牌型号MAC 地址操作系统版本操作系统安装时间放置…

编程日记2024/08/25 07:30:00

Oracle 正则表达式

ORACLE中的支持正则表达式的函数主要有下面四个：1，REGEXP_LIKE ：与LIKE的功能相似2，REGEXP_INSTR ：与INSTR的功能相似3，REGEXP_SUBSTR ：与SUBSTR的功能相似4，REGEXP_REPLACE &#x…

编程日记2024/08/25 07:20:00

制作 Swift 和 Objective-C Mixed 的 Pod

来源：南栀倾寒 www.jianshu.com/p/c7623c31d77b 如有好文章投稿，请点击 → 这里了解详情知识背景 What is CocoaPods（https://guides.cocoapods.org/using/getting-started.html） What did CocoaPods do？&#x…

编程日记2024/08/25 07:10:00

SearchRequestBuilder常用方法说明

SearchRequestBuilder常用方法说明 (1) setIndices(String... indices)：上文中描述过，参数可为一个或多个字符串，表示要进行检索的index；(2) setTypes(String... types)：参数可为一个或多个字符串，表示要进…

编程日记2024/08/25 07:00:00

计算机知识课后反思,计算机硬件和软件知识课后反思

计算机硬件和软件知识课后反思《计算机系统组成》—计算机硬件和软件知识一课是七年级信息技术中《信息技术基础》里的知识。在学习这之前，学生虽然都使用过计算机，但对于计算机的系统组成、主机内的硬件知识基本知之甚少。但是对这些知识学生又充满了好…

编程日记2024/08/25 06:50:00

iOS超全开源框架、项目和学习资料汇总：UI篇

2017-01-30 iOS巍 CocoaChina原文上下拉刷新控件 1. MJRefresh --仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。（推荐） 2. SVPullToRefresh --下拉刷新控件4500star，…

编程日记2024/08/25 06:40:00

NYOJ 90 —— 求正整数n划分为若干个正整数的划分个数

整数划分时间限制：3000 ms | 内存限制：65535 KB描述将正整数n表示成一系列正整数之和：nn1n2…nk， 其中n1≥n2≥…≥nk≥1，k≥1。正整数n的这种表示称为正整数n的划分。求正整数n的不同划分个数。例如正整数6有如…

编程日记2024/08/25 06:30:00

调整命令行的列数和行数 mode con: cols=100 lines=10000

mode con: cols100 lines10000转载于:https://www.cnblogs.com/passer1991/archive/2013/03/25/2980285.html

编程日记2024/08/25 06:20:00

写一个 iOS 复杂表单的正确姿势

前言这几天项目的新需求中有个复杂的表单界面，在做的过程中发现要比想象中复杂很多，有好多问题需要处理。有很多东西值得写下来好好梳理下。需求分析： 6创建网店1.png上图便是UI根据需求给的高保真， 我们先根据这张图片来描述一…

编程日记2024/08/25 06:10:04

二、GPUImageVideoCamera

三、自定义OpenGLView渲染视频

四、利用OpenGL渲染帧数据并显示

01-自定义图层类型

02-初始化CAEAGLLayer图层属性

03-创建EAGLContext

04-创建渲染缓冲区

函数glGenRenderbuffers

函数glBindRenderbuffer

函数renderbufferStorage

实战代码

05-创建帧缓冲区

函数glFramebufferRenderbuffer

06-创建着色器

着色器

着色器代码

实战代码

07-创建着色器程序

08-创建纹理对象

纹理

函数glTexParameter

函数glPixelStorei

函数CVOpenGLESTextureCacheCreateTextureFromImage

实战代码

09-YUV转RGB绘制纹理

函数glUniform1i

函数glEnableVertexAttribArray

函数glVertexAttribPointer

函数glBindAttribLocation

函数glDrawArrays

实战代码

10-渲染缓冲区到屏幕

函数glViewport

方法presentRenderbuffer

实战代码

11-清理内存

函数glClearColor

函数glClear

GPUImage工作原理

相关文章：