教程
OpenGL ES實踐教程1-Demo01-AVPlayer
OpenGL ES實踐教程2-Demo02-攝像頭采集數(shù)據(jù)和渲染
OpenGL ES實踐教程3-Demo03-Mirror
OpenGL ES實踐教程4-Demo04-VR全景視頻播放
OpenGL ES實踐教程5-Demo05-多重紋理實現(xiàn)圖像混合
OpenGL ES實踐教程6-Demo06-全景視頻獲取焦點(diǎn)
其他教程請移步OpenGL ES文集副签。
前言
有朋友問我有關(guān)實現(xiàn)濾鏡的疊加問題史辙，濾鏡有飽和度和色溫。
已經(jīng)實現(xiàn)兩個濾鏡一起顯示的效果，但是兩個濾鏡處理都寫在同一個shader里面，是否能否分開寫在不同的shader？
我建議開個新幀緩存先處理飽和度酌伊，把輸出的紋理作為色溫的輸入，關(guān)鍵函數(shù)是glFramebufferTexture2D缀踪。
不過朋友并沒有解決這問題居砖，卡在了幀緩存這一步，然后把demo整理發(fā)給我驴娃。
demo的shader寫得很棒奏候，但是幀緩存的配置和紋理選擇存在較大問題；花時間整理工程后唇敞，有了這篇文章蔗草。
核心思路
定義兩個GLProgram，來處理飽和度與色溫的Shader疆柔，每個Shader都有對應(yīng)的轉(zhuǎn)換矩陣和紋理咒精；
激活紋理單元1，上傳初始圖像旷档；
配置一個新的幀緩存狠轻，以紋理單元1作為輸入，以紋理單元0作為幀緩存的顏色輸出(glFramebufferTexture2D函數(shù))彬犯；
配置一個新的幀緩存向楼，以紋理單元0作為輸入，以CAEAGLLayer作為顏色輸出(通過前后幀交換后顯示到屏幕);
效果預(yù)覽
具體步驟
1谐区、初始化OpenGL ES配置
初始化數(shù)據(jù)->設(shè)置CAEAGLLayer->選擇OpenGL ES上下文->初始化幀緩存->編譯shader->配置頂點(diǎn)數(shù)組信息湖蜕。
這一部分和前面的文章有較大的重復(fù)，具體看代碼代碼即可宋列，我們重點(diǎn)關(guān)注飽和度Shader相關(guān)的幀緩存配置部分：
- (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的繪制結(jié)果就會成為紋理灭返；
2盗迟、濾鏡渲染
濾鏡渲染分為兩部分，第一部分是飽和度渲染熙含，第二部分是色溫渲染罚缕；
- 飽和度渲染：
先綁定事先配置好的_tempFramebuffer并使用飽和度的shader；
這里同樣需要用glViewport設(shè)置視口大性蹙病邮弹；
初始化變量，注意選擇紋理單元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設(shè)置視口大小同樣需要夜牡；（雖然兩個視口大小一致与纽，設(shè)置一次即可，但是這里是應(yīng)該設(shè)置的）
初始化變量塘装，這次選擇紋理單元0（飽和度的輸出紋理）作為輸入紋理急迂；
發(fā)送渲染指令，并用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的渲染指令沒有得到想到的結(jié)果時，看看GPU的渲染指令和上下文型檀，能非橙哂龋快定位問題所在；但是昨天又遇到一直卡在Capturing的界面胀溺，并且在結(jié)束進(jìn)程后才能得到不完整的結(jié)果裂七。
仔細(xì)看了一遍蘋果的文檔，以為是GLKit沒有導(dǎo)入的問題仓坞；嘗試把ViewController的父類從UIViewController改成GLKitViewController背零，但是依舊沒有返回；
Google上的答案无埃，大多數(shù)問的是Metal下GPU Frame Capture的問題徙瓶；
仔細(xì)翻了幾頁，so給了兩個解決方案：
1嫉称、glInsertEventMarkerEXT(0, "com.apple.GPUTools.event.debug-frame");
2侦镇、用instrucment的GPU Driver；
嘗試后都無效织阅，懷疑是XCode工程設(shè)置問題壳繁，新建工程帶入代碼測試，無效；
最后終于發(fā)現(xiàn)問題所在：
GPU Frame Capture執(zhí)行后闹炉，需要調(diào)用渲染蒿赢；但是demo的并沒有用CADisplayLink管理幀刷新。
于是每次Capture之后渣触，需要手動觸發(fā)一下渲染羡棵。
大部分時間的消耗在這個問題。
渲染結(jié)果不一致（黑屏）
現(xiàn)象是黑屏昵观，原因未知晾腔，這個問題是demo打開就存在的。
簡單查看代碼流程啊犬，沒有問題灼擂；
之后嘗試用GPU Frame Capture，就遇到前面的問題觉至，但是Capture并沒有很快解決剔应。
在用instrucment的OpenGL ES Analysis時發(fā)現(xiàn)幀緩存的設(shè)置有問題；
回來檢查幀緩存的初始化代碼语御，發(fā)現(xiàn)是glFramebufferTexture2D的第一個參數(shù)被設(shè)置成_tempFramebuffer峻贮！
修改掉這個處比較明顯的bug后，仍舊是黑屏应闯；
嘗試二分代碼纤控，把飽和度去掉，把色溫的輸入紋理設(shè)置為紋理單元1碉纺，可以顯示船万；
嘗試保留飽和度，去掉色溫的shader骨田，直接把飽和度的處理結(jié)果顯示到屏幕耿导，正常；
但是把兩個處理結(jié)果串聯(lián)起來就會黑屏态贤；
最后還是先回去解決GPU Frame Capture舱呻，在Capture問題解決后，馬上發(fā)現(xiàn)問題：
飽和度渲染結(jié)果是空悠汽；
飽和度的輸入紋理是正常的箱吕，紋理單元、紋理對象柿冲、轉(zhuǎn)換矩陣的設(shè)置也是正常的殖氏；
最后嘗試一行行代碼的看，終于發(fā)現(xiàn)是glFramebufferTexture2D函數(shù)調(diào)用前姻采，沒有調(diào)用glBindFramebuffer函數(shù)雅采。
添加后爵憎，顯示結(jié)果終于正常。
總結(jié)
代碼不多婚瓜，但是調(diào)試起來挺麻煩宝鼓；特別是當(dāng)結(jié)果只能顯示在屏幕時，二分代碼進(jìn)行BUG定位是常見的巴刻。
GPU Frame Capture一定要會用愚铡，不然會浪費(fèi)更多的時間。
代碼地址
有什么好玩的想法胡陪、demo沥寥，歡迎來私信探討。
如果覺得文章有所幫助或者有點(diǎn)意思柠座，麻煩點(diǎn)個喜歡邑雅。
