iOS视觉-- (07) OpenGL ES+GLSL实现多滤镜

作者: 桀骜不驯的搬砖者 | 来源:发表于2022-08-24 11:35 被阅读0次

上一篇我们学习了对图片进行灰色滤镜处理，现在这篇我们将进行学习多滤镜处理。那么多滤镜的处理原理是什么呢？我们先简单的来回顾一下 OpenGL 的工作流程

渲染流程图

简化版
根据流程图我们很容易想到对一张图片进行两种滤镜的步骤就像下面这个图一样：

假想图
但是作为开发者都知道这样行不通的，为什么？

我们使用OpenGL ES来处理图片的原因最直接的一个原因是因为：使用GPU处理图片的速度远超CPU。而整个过程除了一些不可避免的预处理，比如CPU向GPU传递纹理数据，uniform类型的值，我们可以使用CPU以外，应该尽量避免使用CPU。

正确的处理方法

GLFramebuffer本身如果不挂载任何东西的时候是不能工作的。那么，如果想要使framebuffer正常工作，有一个必要条件。就是必须挂载一个renderbuffer或者texture。

1、绑定 renderbuffer
glFramebufferRenderbuffer(GLenum(GL_FRAMEBUFFER), GLenum(GL_COLOR_ATTACHMENT0), GLenum(GL_RENDERBUFFER), renderBuffer)

2、绑定 texture
glFramebufferTexture2D(GLenum(GL_FRAMEBUFFER), GLenum(GL_COLOR_ATTACHMENT0), GLenum(GL_TEXTURE_2D), tempTexture, 0)

图片来自网络

那么如果我们用这个挂载着GL_TEXTURE_2D的framerBuffer来渲染图片的话。整个GPU渲染流程就变成了最后渲染的结果并不是到了屏幕上，到哪了呢？
注意⚠️这句代码：

//将图片载入纹理
/*
glTexImage2D (GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels)
参数列表:
1.target,目标纹理
2.level,一般设置为0
3.internalformat,纹理中颜色组件
4.width,纹理图像的宽度
5.height,纹理图像的高度
6.border,边框的宽度
7.format,像素数据的颜色格式
8.type,像素数据数据类型
9.pixels,内存中指向图像数据的指针
*/
glTexImage2D(GLenum(GL_TEXTURE_2D), 0, GL_RGBA, GLsizei(self.frame.size.width * self.contentScaleFactor), GLsizei(self.frame.size.height * self.contentScaleFactor), 0, GLenum(GL_RGBA), GLenum(GL_UNSIGNED_BYTE), nil)

最后一个参数是nil，也就是说在这里我们只是声明了一个空的纹理，里面并没有填充任何数据。
这种挂载着纹理的framebuffer，最终会把GPU管线处理的结果渲染到这个空的纹理上，鉴于之前这个纹理的id是我们自己声明的，所以我们自然可以使用这个渲染之后的纹理了。

那么整个流程就变成这样：如下图

流程图

流程解析：

原理：纹理（图片）经过一个渲染流程，然后保存到一个临时的帧缓冲区中，然后作为下一个渲染流程的输入，详情请看理解GPUImage2中Pipeline核心原理

我们需要调节一个图片的色温和饱和度，最后渲染到屏幕上，那么我们总共需要以下东西

2个 framebuffer：1个 framebuffer 挂载 texture，最后一个纹理挂载 renderbuffer 用来渲染到屏幕上。

2个 glProgram：1个 glProgram 装载的是顶点着色器和色温片元着色器；另外1个 glProgram 装载的是顶点着色器和饱和度片元着色器

部分核心代码实现：

private func render() {
        //绘制第一个滤镜
        //使用色温着色器
        glUseProgram(temperatureProgram)
        //绑定frameBuffer
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), tempFrameBuffer)
        //设置清屏颜色
        glClearColor(0.0, 1.0, 0.0, 1.0)
        //清除屏幕
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
        
        //1.设置视口大小
        glViewport(0, 0, GLsizei(self.frame.size.width * self.contentScaleFactor), GLsizei(self.frame.size.height * self.contentScaleFactor))

#warning("注意⚠️：想要获取shader里面的变量，这里要记住要在glLinkProgram后面、后面、后面")
        //----处理顶点数据-------
        //将顶点数据通过myPrograme中的传递到顶点着色程序的position
        /*1.glGetAttribLocation,用来获取vertex attribute的入口的.
          2.告诉OpenGL ES,通过glEnableVertexAttribArray，
          3.最后数据是通过glVertexAttribPointer传递过去的。
         */
        //注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
        //设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(GLuint(glGetAttribLocation(temperatureProgram, "position")))
        
        //设置读取方式
        //参数1：index,顶点数据的索引
        //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
        //参数5：stride,连续顶点属性之间的偏移量，默认为0；
        //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
        glVertexAttribPointer(GLuint(glGetAttribLocation(temperatureProgram, "position")), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))

        
        //----处理纹理数据-------
        //1.glGetAttribLocation,用来获取vertex attribute的入口的.
        //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
        //设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(GLuint(glGetAttribLocation(temperatureProgram, "inputTextureCoordinate")))
        
        //3.设置读取方式
        //参数1：index,顶点数据的索引
        //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
        //参数5：stride,连续顶点属性之间的偏移量，默认为0；
        //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
        glVertexAttribPointer(GLuint(glGetAttribLocation(temperatureProgram, "inputTextureCoordinate")), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))
        
        //纹理
        glUniform1i(glGetUniformLocation(temperatureProgram, "inputImageTexture"), 1)
        //色温
        glUniform1f(glGetUniformLocation(temperatureProgram, "temperature"), GLfloat(temperature))
        
        glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
        
        
        
        
        //绘制第二个滤镜
        //使用饱和度着色器
        glUseProgram(saturationProgram)
        //绑定frameBuffer
        glBindFramebuffer(GLenum(GL_FRAMEBUFFER), frameBuffer)
        //绑定RenderBuffer
        glBindRenderbuffer(GLenum(GL_RENDERBUFFER), renderbuffer)
        //设置清屏颜色
        glClearColor(0.0, 1.0, 0.0, 1.0)
        //清除屏幕
        glClear(GLbitfield(GL_COLOR_BUFFER_BIT))

        //1.设置视口大小
        glViewport(0, 0, GLsizei(self.frame.size.width * self.contentScaleFactor), GLsizei(self.frame.size.height * self.contentScaleFactor))
        //注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致

        //设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(GLuint(glGetAttribLocation(saturationProgram, "position")))

        //设置读取方式
        //参数1：index,顶点数据的索引
        //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
        //参数5：stride,连续顶点属性之间的偏移量，默认为0；
        //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
        glVertexAttribPointer(GLuint(glGetAttribLocation(saturationProgram, "position")), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))


        //----处理纹理数据-------
        //1.glGetAttribLocation,用来获取vertex attribute的入口的.
        //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
        //设置合适的格式从buffer里面读取数据
        glEnableVertexAttribArray(GLuint(glGetAttribLocation(saturationProgram, "inputTextureCoordinate")))

        //3.设置读取方式
        //参数1：index,顶点数据的索引
        //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
        //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
        //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
        //参数5：stride,连续顶点属性之间的偏移量，默认为0；
        //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
        glVertexAttribPointer(GLuint(glGetAttribLocation(saturationProgram, "inputTextureCoordinate")), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 3))

        //纹理
        glUniform1i(glGetUniformLocation(saturationProgram, "inputImageTexture"), 0)
        
        //饱和度
        glUniform1f(glGetUniformLocation(saturationProgram, "saturation"), GLfloat(saturation))

        glDrawArrays(GLenum(GL_TRIANGLES), 0, 6)
        
        mContext?.presentRenderbuffer(Int(GL_RENDERBUFFER))
    }

效果图：Demo

多滤镜.gif

这次比上一次使用到比较多的知识点：

uniform sampler2D colorMap; //纹理

这里声明的sampler2D变量是个uniform，我们却没有用 glUniform 给它赋值，一般来讲我们需要用void glUniform1i(GLint location, GLint x)函数进行将纹理对象（数据）从CPU中传入GPU中的着色器。之所以使用 glUniform1i 函数，是因为只需要给纹理采样器传入一个索引值(位置)即可，这样我们就能够在一个片元着色器中设置多个纹理。

那么这个索引值就是我们接下来要介绍的纹理单元：

一个纹理的位置值通常称为一个纹理单元(Texture Unit)。一个纹理的默认纹理单元是0，它是默认的激活纹理单元。纹理单元的主要目的是让我们在着色器中可以使用多于一个的纹理。

如果我们只传入一个纹理对象，那么倒是不用考虑纹理单元的问题。但是当有多个纹理对象要传入的时候，我们必须指定纹理对象，然后在主函数用 glUniform1i 函数将纹理对象一个一个绑定到着色器内部。
通过把纹理单元赋值给采样器，我们可以一次绑定多个纹理，只要我们首先激活对应的纹理单元。就像 glBindTexture 一样，我们可以使用管理 glActiveTexture 激活纹理单元，传入我们需要使用的纹理单元。

//绑定纹理之前,激活纹理
glActiveTexture(GLenum(GL_TEXTURE0))
//申请纹理标记
glGenTextures(1, &tempTexture)
//绑定纹理
glBindTexture(GLenum(GL_TEXTURE_2D), tempTexture)

激活纹理单元之后，接下来的 glBindTexture 函数调用会绑定这个纹理到当前激活的纹理单元，纹理单元 GL_TEXTURE0 默认总是被激活.
重点：glUniform1i 的第二个参数是和 glActiveTexture 的第一个参数是对应的，前者使用的是 0，那么后者就是对应 GL_TEXTURE0 【0~31，共32个】，依此类推

其实，使用glUniform1i函数作为着色器内部和程序来进行传入值，严格来讲传入数据本身也不是这个函数做的，这个函数只是告诉着色器哪个纹理对象对应哪个采样器对象。

参考博客：
从0打造一个GPUImage(6)-GPUImage的多滤镜处理逻辑
 理解GPUImage2中Pipeline核心原理

iOS视觉-- (07) OpenGL ES+GLSL实现多滤镜

正确的处理方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读