教程
OpenGL ES實踐教程1-Demo01-AVPlayer
OpenGL ES實踐教程2-Demo02-攝像頭采集數據和渲染
OpenGL ES實踐教程3-Demo03-Mirror
OpenGL ES實踐教程4-Demo04-VR全景視頻播放
OpenGL ES實踐教程5-Demo05-多重紋理實現圖像混合
OpenGL ES實踐教程6-Demo06-全景視頻獲取焦點
其他教程請移步OpenGL ES文集。
前言
有朋友問我有關實現濾鏡的疊加問題，濾鏡有飽和度和色溫。
已經實現兩個濾鏡一起顯示的效果，但是兩個濾鏡處理都寫在同一個shader里面，是否能否分開寫在不同的shader？
我建議開個新幀緩存先處理飽和度，把輸出的紋理作為色溫的輸入，關鍵函數是glFramebufferTexture2D。
不過朋友并沒有解決這問題，卡在了幀緩存這一步，然后把demo整理發給我。
demo的shader寫得很棒，但是幀緩存的配置和紋理選擇存在較大問題；花時間整理工程后，有了這篇文章。
核心思路
定義兩個GLProgram，來處理飽和度與色溫的Shader，每個Shader都有對應的轉換矩陣和紋理；
激活紋理單元1，上傳初始圖像；
配置一個新的幀緩存，以紋理單元1作為輸入，以紋理單元0作為幀緩存的顏色輸出(glFramebufferTexture2D函數)；
配置一個新的幀緩存，以紋理單元0作為輸入，以CAEAGLLayer作為顏色輸出(通過前后幀交換后顯示到屏幕);
效果預覽
具體步驟
1、初始化OpenGL ES配置
初始化數據->設置CAEAGLLayer->選擇OpenGL ES上下文->初始化幀緩存->編譯shader->配置頂點數組信息。
這一部分和前面的文章有較大的重復，具體看代碼代碼即可，我們重點關注飽和度Shader相關的幀緩存配置部分：
- (void)setupTemp {
glGenFramebuffers(1, &_tempFramebuffer);
glActiveTexture(GL_TEXTURE0);
glGenTextures(1, &_tempTexture);
glBindTexture(GL_TEXTURE_2D, _tempTexture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, self.frame.size.width * self.contentScaleFactor, self.frame.size.height * self.contentScaleFactor, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glBindFramebuffer(GL_FRAMEBUFFER, _tempFramebuffer);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _tempTexture, 0);
}
glActiveTexture是激活紋理單元，這里選擇紋理單元0作為輸出，glFramebufferTexture2D是把幀緩存的顏色輸出定位到紋理中，這樣shader的繪制結果就會成為紋理；
2、濾鏡渲染
濾鏡渲染分為兩部分，第一部分是飽和度渲染，第二部分是色溫渲染；
- 飽和度渲染：
先綁定事先配置好的_tempFramebuffer并使用飽和度的shader；
這里同樣需要用glViewport設置視口大小；
初始化變量，注意選擇紋理單元1作為輸入紋理；
最后開始繪制。
// 繪制第一個濾鏡
glUseProgram(_tempProgramHandle);
glBindFramebuffer(GL_FRAMEBUFFER, _tempFramebuffer);
glViewport(0, 0, self.frame.size.width * self.contentScaleFactor, self.frame.size.height * self.contentScaleFactor);
glClearColor(0, 0, 1, 1);
glClear(GL_COLOR_BUFFER_BIT);
glUniform1i(glViewUniforms[TEMP_UNIFORM_INPUT_IMAGE_TEXTURE], 1);
glUniform1f(glViewUniforms[UNIFORM_SATURATION], _saturation);
glVertexAttribPointer(glViewAttributes[TEMP_ATTRIBUTE_POSITION], 4, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), 0);
glVertexAttribPointer(glViewAttributes[TEMP_ATTRIBUTE_INPUT_TEXTURE_COORDINATE], 2, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), (GLvoid *)(sizeof(float) * 4));
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
- 色溫渲染：
先使用色溫的shader并綁定GL_FRAMEBUFFER和GL_RENDERBUFFER；
glViewport設置視口大小同樣需要；（雖然兩個視口大小一致，設置一次即可，但是這里是應該設置的）
初始化變量，這次選擇紋理單元0（飽和度的輸出紋理）作為輸入紋理；
發送渲染指令，并用presentRenderbuffer:顯示到屏幕。
// 繪制第二個濾鏡
glUseProgram(_programHandle);
glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);
glBindRenderbuffer(GL_RENDERBUFFER, _renderbuffer);
glClearColor(1, 0, 0, 1);
glClear(GL_COLOR_BUFFER_BIT);
glViewport(0, 0, self.frame.size.width * self.contentScaleFactor, self.frame.size.height * self.contentScaleFactor);
glUniform1i(glViewUniforms[UNIFORM_INPUT_IMAGE_TEXTURE], 0);
glUniform1f(glViewUniforms[UNIFORM_TEMPERATURE], _temperature);
glVertexAttribPointer(glViewAttributes[ATTRIBUTE_POSITION], 4, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), 0);
glVertexAttribPointer(glViewAttributes[ATTRIBUTE_INPUT_TEXTURE_COORDINATE], 2, GL_FLOAT, GL_FALSE, sizeof(CustomVertex), (GLvoid *)(sizeof(float) * 4));
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
[_context presentRenderbuffer:GL_RENDERBUFFER];
遇到的問題
GPU Frame Capture沒有返回
在OpenGL ES的渲染指令沒有得到想到的結果時，看看GPU的渲染指令和上下文，能非常快定位問題所在；但是昨天又遇到一直卡在Capturing的界面，并且在結束進程后才能得到不完整的結果。
仔細看了一遍蘋果的文檔，以為是GLKit沒有導入的問題；嘗試把ViewController的父類從UIViewController改成GLKitViewController，但是依舊沒有返回；
Google上的答案，大多數問的是Metal下GPU Frame Capture的問題；
仔細翻了幾頁，so給了兩個解決方案：
1、glInsertEventMarkerEXT(0, "com.apple.GPUTools.event.debug-frame");
2、用instrucment的GPU Driver；
嘗試后都無效，懷疑是XCode工程設置問題，新建工程帶入代碼測試，無效；
最后終于發現問題所在：
GPU Frame Capture執行后，需要調用渲染；但是demo的并沒有用CADisplayLink管理幀刷新。
于是每次Capture之后，需要手動觸發一下渲染。
大部分時間的消耗在這個問題。
渲染結果不一致（黑屏）
現象是黑屏，原因未知，這個問題是demo打開就存在的。
簡單查看代碼流程，沒有問題；
之后嘗試用GPU Frame Capture，就遇到前面的問題，但是Capture并沒有很快解決。
在用instrucment的OpenGL ES Analysis時發現幀緩存的設置有問題；
回來檢查幀緩存的初始化代碼，發現是glFramebufferTexture2D的第一個參數被設置成_tempFramebuffer！
修改掉這個處比較明顯的bug后，仍舊是黑屏；
嘗試二分代碼，把飽和度去掉，把色溫的輸入紋理設置為紋理單元1，可以顯示；
嘗試保留飽和度，去掉色溫的shader，直接把飽和度的處理結果顯示到屏幕，正常；
但是把兩個處理結果串聯起來就會黑屏；
最后還是先回去解決GPU Frame Capture，在Capture問題解決后，馬上發現問題：
飽和度渲染結果是空；
飽和度的輸入紋理是正常的，紋理單元、紋理對象、轉換矩陣的設置也是正常的；
最后嘗試一行行代碼的看，終于發現是glFramebufferTexture2D函數調用前，沒有調用glBindFramebuffer函數。
添加后，顯示結果終于正常。
總結
代碼不多，但是調試起來挺麻煩；特別是當結果只能顯示在屏幕時，二分代碼進行BUG定位是常見的。
GPU Frame Capture一定要會用，不然會浪費更多的時間。
代碼地址
有什么好玩的想法、demo，歡迎來私信探討。
如果覺得文章有所幫助或者有點意思，麻煩點個喜歡。
