上一篇我們學(xué)習(xí)了對圖片進(jìn)行灰色濾鏡處理，現(xiàn)在這篇我們將進(jìn)行學(xué)習(xí)多濾鏡處理。那么多濾鏡的處理原理是什么呢？我們先簡單的來回顧一下 OpenGL 的工作流程
根據(jù)流程圖我們很容易想到對一張圖片進(jìn)行兩種濾鏡的步驟就像下面這個圖一樣：
但是作為開發(fā)者都知道這樣行不通的，為什么？
我們使用OpenGL ES來處理圖片的原因最直接的一個原因是因為：使用GPU處理圖片的速度遠(yuǎn)超CPU。而整個過程除了一些不可避免的預(yù)處理，比如CPU向GPU傳遞紋理數(shù)據(jù)，uniform類型的值，我們可以使用CPU以外，應(yīng)該盡量避免使用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)
圖片來自網(wǎng)絡(luò)
那么如果我們用這個掛載著GL_TEXTURE_2D的framerBuffer來渲染圖片的話。整個GPU渲染流程就變成了最后渲染的結(jié)果并不是到了屏幕上，到哪了呢？
注意??這句代碼：
//將圖片載入紋理
/*
glTexImage2D (GLenum target, GLint level, GLint internalformat, GLsizei width, GLsizei height, GLint border, GLenum format, GLenum type, const GLvoid *pixels)
參數(shù)列表:
1.target,目標(biāo)紋理
2.level,一般設(shè)置為0
3.internalformat,紋理中顏色組件
4.width,紋理圖像的寬度
5.height,紋理圖像的高度
6.border,邊框的寬度
7.format,像素數(shù)據(jù)的顏色格式
8.type,像素數(shù)據(jù)數(shù)據(jù)類型
9.pixels,內(nèi)存中指向圖像數(shù)據(jù)的指針
*/
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)最后一個參數(shù)是nil，也就是說在這里我們只是聲明了一個空的紋理，里面并沒有填充任何數(shù)據(jù)。
這種掛載著紋理的framebuffer，最終會把GPU管線處理的結(jié)果渲染到這個空的紋理上，鑒于之前這個紋理的id是我們自己聲明的，所以我們自然可以使用這個渲染之后的紋理了。
那么整個流程就變成這樣：如下圖
流程解析：
原理：紋理（圖片）經(jīng)過一個渲染流程，然后保存到一個臨時的幀緩沖區(qū)中，然后作為下一個渲染流程的輸入，詳情請看理解GPUImage2中Pipeline核心原理
我們需要調(diào)節(jié)一個圖片的色溫和飽和度，最后渲染到屏幕上，那么我們總共需要以下東西
- 2個 framebuffer：1個 framebuffer 掛載 texture， 最后一個紋理掛載 renderbuffer 用來渲染到屏幕上。
- 2個 glProgram：1個 glProgram 裝載的是頂點著色器和色溫片元著色器；另外1個 glProgram 裝載的是頂點著色器和飽和度片元著色器
- 部分核心代碼實現(xiàn)：
private func render() {
//繪制第一個濾鏡
//使用色溫著色器
glUseProgram(temperatureProgram)
//綁定frameBuffer
glBindFramebuffer(GLenum(GL_FRAMEBUFFER), tempFrameBuffer)
//設(shè)置清屏顏色
glClearColor(0.0, 1.0, 0.0, 1.0)
//清除屏幕
glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
//1.設(shè)置視口大小
glViewport(0, 0, GLsizei(self.frame.size.width * self.contentScaleFactor), GLsizei(self.frame.size.height * self.contentScaleFactor))
#warning("注意??：想要獲取shader里面的變量，這里要記住要在glLinkProgram后面、后面、后面")
//----處理頂點數(shù)據(jù)-------
//將頂點數(shù)據(jù)通過myPrograme中的傳遞到頂點著色程序的position
/*1.glGetAttribLocation,用來獲取vertex attribute的入口的.
2.告訴OpenGL ES,通過glEnableVertexAttribArray，
3.最后數(shù)據(jù)是通過glVertexAttribPointer傳遞過去的。
*/
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：position保持一致
//設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(GLuint(glGetAttribLocation(temperatureProgram, "position")))
//設(shè)置讀取方式
//參數(shù)1：index,頂點數(shù)據(jù)的索引
//參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認(rèn)為0；
//參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認(rèn)為0
glVertexAttribPointer(GLuint(glGetAttribLocation(temperatureProgram, "position")), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
//----處理紋理數(shù)據(jù)-------
//1.glGetAttribLocation,用來獲取vertex attribute的入口的.
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
//設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(GLuint(glGetAttribLocation(temperatureProgram, "inputTextureCoordinate")))
//3.設(shè)置讀取方式
//參數(shù)1：index,頂點數(shù)據(jù)的索引
//參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認(rèn)為0；
//參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認(rèn)為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)
//設(shè)置清屏顏色
glClearColor(0.0, 1.0, 0.0, 1.0)
//清除屏幕
glClear(GLbitfield(GL_COLOR_BUFFER_BIT))
//1.設(shè)置視口大小
glViewport(0, 0, GLsizei(self.frame.size.width * self.contentScaleFactor), GLsizei(self.frame.size.height * self.contentScaleFactor))
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：position保持一致
//設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(GLuint(glGetAttribLocation(saturationProgram, "position")))
//設(shè)置讀取方式
//參數(shù)1：index,頂點數(shù)據(jù)的索引
//參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認(rèn)為0；
//參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認(rèn)為0
glVertexAttribPointer(GLuint(glGetAttribLocation(saturationProgram, "position")), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<GLfloat>.size * 5), UnsafeRawPointer(bitPattern: MemoryLayout<GLfloat>.size * 0))
//----處理紋理數(shù)據(jù)-------
//1.glGetAttribLocation,用來獲取vertex attribute的入口的.
//注意：第二參數(shù)字符串必須和shaderv.vsh中的輸入變量：textCoordinate保持一致
//設(shè)置合適的格式從buffer里面讀取數(shù)據(jù)
glEnableVertexAttribArray(GLuint(glGetAttribLocation(saturationProgram, "inputTextureCoordinate")))
//3.設(shè)置讀取方式
//參數(shù)1：index,頂點數(shù)據(jù)的索引
//參數(shù)2：size,每個頂點屬性的組件數(shù)量，1，2，3，或者4.默認(rèn)初始值是4.
//參數(shù)3：type,數(shù)據(jù)中的每個組件的類型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默認(rèn)初始值為GL_FLOAT
//參數(shù)4：normalized,固定點數(shù)據(jù)值是否應(yīng)該歸一化，或者直接轉(zhuǎn)換為固定值。（GL_FALSE）
//參數(shù)5：stride,連續(xù)頂點屬性之間的偏移量，默認(rèn)為0；
//參數(shù)6：指定一個指針，指向數(shù)組中的第一個頂點屬性的第一個組件。默認(rèn)為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
這次比上一次使用到比較多的知識點：
uniform sampler2D colorMap; //紋理
這里聲明的sampler2D變量是個uniform，我們卻沒有用 glUniform 給它賦值，一般來講我們需要用void glUniform1i(GLint location, GLint x)函數(shù)進(jìn)行將紋理對象（數(shù)據(jù)）從CPU中傳入GPU中的著色器。之所以使用 glUniform1i 函數(shù)，是因為只需要給紋理采樣器傳入一個索引值(位置)即可，這樣我們就能夠在一個片元著色器中設(shè)置多個紋理。
那么這個索引值就是我們接下來要介紹的紋理單元：
一個紋理的位置值通常稱為一個紋理單元(Texture Unit)。一個紋理的默認(rèn)紋理單元是0，它是默認(rèn)的激活紋理單元。紋理單元的主要目的是讓我們在著色器中可以使用多于一個的紋理。
如果我們只傳入一個紋理對象，那么倒是不用考慮紋理單元的問題。但是當(dāng)有多個紋理對象要傳入的時候，我們必須指定紋理對象，然后在主函數(shù)用 glUniform1i 函數(shù)將紋理對象一個一個綁定到著色器內(nèi)部。
通過把紋理單元賦值給采樣器，我們可以一次綁定多個紋理，只要我們首先激活對應(yīng)的紋理單元。就像 glBindTexture 一樣，我們可以使用管理 glActiveTexture 激活紋理單元，傳入我們需要使用的紋理單元。
//綁定紋理之前,激活紋理
glActiveTexture(GLenum(GL_TEXTURE0))
//申請紋理標(biāo)記
glGenTextures(1, &tempTexture)
//綁定紋理
glBindTexture(GLenum(GL_TEXTURE_2D), tempTexture)
激活紋理單元之后，接下來的 glBindTexture 函數(shù)調(diào)用會綁定這個紋理到當(dāng)前激活的紋理單元，紋理單元 GL_TEXTURE0 默認(rèn)總是被激活.
重點：glUniform1i 的第二個參數(shù)是和 glActiveTexture 的第一個參數(shù)是對應(yīng)的，前者使用的是 0，那么后者就是對應(yīng) GL_TEXTURE0 【0~31，共32個】，依此類推
其實，使用glUniform1i函數(shù)作為著色器內(nèi)部和程序來進(jìn)行傳入值，嚴(yán)格來講傳入數(shù)據(jù)本身也不是這個函數(shù)做的，這個函數(shù)只是告訴著色器哪個紋理對象對應(yīng)哪個采樣器對象。
參考博客：
從0打造一個GPUImage(6)-GPUImage的多濾鏡處理邏輯
理解GPUImage2中Pipeline核心原理
