目錄
- FBO基本知識(shí)
- FBO實(shí)現(xiàn)渲染到紋理的流程
- 實(shí)踐
- 遇到的問(wèn)題
- 資料
- 收獲
在之前的學(xué)習(xí)實(shí)踐中我們把圖片畸肆、視頻、圖形等渲染到屏幕時(shí)雨让，采用的是直接屏幕上即默認(rèn)的幀緩沖區(qū)嚷堡，如果我們?cè)阡秩緯r(shí)不想直接渲染到屏幕，而是把一些列的filter處理好之后鲁森，在渲染到屏幕上祟滴，
比如，繪制一個(gè)圖形歌溉，然后給這個(gè)圖形/片依次做特效1垄懂、特效2… 然后在渲染到屏幕上。
再比如痛垛，從camera采集到的視頻數(shù)據(jù)草慧，不直接渲染到屏幕上，而是經(jīng)過(guò)美顏匙头、濾鏡漫谷、特效等處理后再在屏幕上渲染
這時(shí)我們就需要用FBO的技術(shù)，先把素材渲染到紋理蹂析，然后針對(duì)紋理鏈?zhǔn)降囊来芜M(jìn)行離屏渲染舔示，最終再把數(shù)據(jù)copy到屏幕緩沖區(qū)進(jìn)行渲染顯示。
首先我們來(lái)了解下FBO的基礎(chǔ)知識(shí)电抚。
一惕稻、基本知識(shí)
OpenGL在圖元光柵化，得到的是fragment蝙叛，fragment不是最后的像素?cái)?shù)據(jù)俺祠，但和像素對(duì)應(yīng)；fragment需要經(jīng)過(guò)一系列處理，blend蜘渣，texture淌铐，lighting...，才會(huì)得到最后的像素蔫缸。用來(lái)緩存fragment數(shù)據(jù)的緩沖區(qū)腿准，就是frame buffer。frame buffer包含color buffer捂龄，stencil buffer释涛，depth buffer等若干buffer。只有color buffer用于最后的像素顯示倦沧，其他的都是用來(lái)輔助fragment的處理唇撬。
屏幕渲染的過(guò)程中把上述的colorBuffer等渲染到屏幕上，處理直接渲染之外展融，OpenGL ES也提供一種被廣泛使用的離屏渲染方案窖认，即把渲染目標(biāo)重定向到非屏幕的其他存儲(chǔ)空間，比如將渲染目標(biāo)重定向到紋理空間告希，實(shí)現(xiàn)渲染到紋理功能（Render to Texture）扑浸，針對(duì)這個(gè)紋理可以做各種filter處理。還有一個(gè)特點(diǎn)就是圖片屏幕的限制燕偶。不論是直接渲染到屏幕還是進(jìn)行離屏渲染喝噪，都需要?jiǎng)?chuàng)建震緩沖區(qū)對(duì)象即FBO，只不過(guò)直接渲染到屏幕的FBO的GL_FRAMEBUFFER_BINDING為0指么。渲染到其他存儲(chǔ)空間的frambuffer的id大于0.
FBO（Frame Buffer Object）幀緩沖對(duì)象提供了與顏色緩沖區(qū)（color buffer）酝惧、深度緩沖區(qū)（depth buffer）和模版緩沖區(qū)（stencil buffer） ，但并不會(huì)直接為這些緩沖區(qū)分配空間伯诬，而只是為這些緩沖區(qū)提供一個(gè)或多個(gè)掛接點(diǎn)晚唇。我們需要分別為各個(gè)緩沖區(qū)創(chuàng)建對(duì)象，申請(qǐng)空間盗似，然后掛接到相應(yīng)的掛接點(diǎn)上哩陕。FBO提供的掛接點(diǎn)如下圖所示
圖片來(lái)自：OpenGL Frame Buffer Object (FBO)
能夠與FBO掛接的對(duì)象有兩種，一種是紋理對(duì)象（texture object）赫舒，另一種是渲染緩沖區(qū)對(duì)象（renderbuffer object）
二悍及、使用FBO實(shí)現(xiàn)渲染到紋理的流程
我們根據(jù)掛在FBO上的掛載的不同對(duì)象來(lái)分別看下流程（類似）
紋理對(duì)象
首先通過(guò)調(diào)用glGenFrameBuffers（）分配一個(gè)程序創(chuàng)建未使用的幀緩存對(duì)象標(biāo)示
// C function void glGenFramebuffers ( GLsizei n, GLuint *framebuffers )
public static native void glGenFramebuffers(
int n,//分配多少個(gè)未使用的幀緩存對(duì)象
int[] framebuffers,//分配的幀緩存對(duì)象id存放在數(shù)組中
int offset//偏移
);
然后通過(guò)glBindFramebuffer（）綁定FBO，并初始化
// C function void glBindFramebuffer ( GLenum target, GLuint framebuffer )
public static native void glBindFramebuffer(
int target,
int framebuffer
);
參數(shù)說(shuō)明：
target 可以為GLES20.GL_FRAMEBUFFER接癌，在OpenGLES3.0后 GL_READ_FRAMEBUFFER 和 GL_DRAW_FRAMEBUFFER兩種 只讀或者只寫(xiě)的framebuffer類型
framebuffer 為 glGenFramebuffers分配到幀緩存id
使用glBindFramebuffer()進(jìn)行離屏渲染時(shí)心赶，Opengl的渲染和讀取都是通過(guò)attached的紋理對(duì)幀緩存進(jìn)行操作的，不再是對(duì)windows系統(tǒng)提供的默認(rèn)幀緩存進(jìn)行操作扔涧，所以我們見(jiàn)到的屏幕上顯示出來(lái)的圖像并不是一個(gè)可見(jiàn)的顏色緩存位面（visible color buffer bitplane），只不過(guò)是一個(gè)“離屏”的顏色紋理（"off-screen" color image attachment），所以雙緩存就不起作用了（即使調(diào)用swapbuffer(),像素也不會(huì)被渲染到前后緩存中）枯夜，所glReadBuffer(GL_FRONT)也就讀取不出像素出來(lái)弯汰。
幀緩存可以實(shí)現(xiàn)理屏渲染技術(shù)、紋理貼圖的更新湖雹、以及緩存乒乓技術(shù)（GPGPU用到的一種數(shù)據(jù)傳輸技術(shù)）的實(shí)現(xiàn)非常的有意義咏闪，但需要注意的是，應(yīng)用程序創(chuàng)建的幀緩存是不能與窗口系統(tǒng)的緩存關(guān)聯(lián)的摔吏，窗口系統(tǒng)有一套自己的緩存對(duì)象鸽嫂。
如果掛在的是顏色緩沖區(qū)（color buffer），采用紋理對(duì)象的形式進(jìn)行掛載征讲，對(duì)應(yīng)的掛載方法是glFramebufferTexture2D（）
// C function void glFramebufferTexture2D ( GLenum target, GLenum attachment, GLenum textarget, GLuint texture, GLint level )
public static native void glFramebufferTexture2D(
int target,
int attachment,
int textarget,
int texture,
int level
);
參數(shù)說(shuō)明：
attachment 必須為 GL_COLOR_ATTACHMENTi（i為0-15）或GL_DEPTH_ATTACHMENT 或GL_STENCIL_ATTACHMENT
textarget：需要掛載的紋理類型据某，這個(gè)方法對(duì)應(yīng)的值為GLES20.GL_TEXTURE_2D
texture：需要掛載的紋理id
而紋理的生成和綁定邏輯和普通紋理一樣,只不過(guò)glTexImage2D傳入的buffer為null，生成一份紋理地址空間诗箍，掛載到FBO上癣籽，紋理的內(nèi)容動(dòng)態(tài)的生成。
final int[] textureObjectIds = new int[1];
int texType =GLES20.GL_TEXTURE_2D;
GLES20.glGenTextures(1, textureObjectIds, 0);
GLES20.glBindTexture(texType, textureObjectIds[0]);
GLES20.glTexImage2D(texType, 0, GLES20.GL_RGBA, width, height,
0, texFormat, GLES20.GL_UNSIGNED_BYTE, null);
//設(shè)置縮小過(guò)濾為使用紋理中坐標(biāo)最接近的一個(gè)像素的顏色作為需要繪制的像素顏色
GLES20.glTexParameteri(texType, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
//設(shè)置放大過(guò)濾為使用紋理中坐標(biāo)最接近的若干個(gè)顏色滤祖，通過(guò)加權(quán)平均算法得到需要繪制的像素顏色
GLES20.glTexParameteri(texType, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
//設(shè)置環(huán)繞方向S筷狼，截取紋理坐標(biāo)到[1/2n,1-1/2n]。將導(dǎo)致永遠(yuǎn)不會(huì)與border融合
GLES20.glTexParameteri(texType, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
//設(shè)置環(huán)繞方向T匠童，截取紋理坐標(biāo)到[1/2n,1-1/2n]埂材。將導(dǎo)致永遠(yuǎn)不會(huì)與border融合
GLES20.glTexParameteri(texType, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);
獲取正在綁定的紋理 GL_FRAMEBUFFER_BINDING
// C function void glGetIntegerv ( GLenum pname, GLint *params )
public static native void glGetIntegerv(
int pname,
int[] params,
int offset
);
參數(shù) pname 傳GL_FRAMEBUFFER_BINDING
使用完之后調(diào)用glDeleteFramebuffers()刪除幀緩存對(duì)象
// C function void glDeleteFramebuffers ( GLsizei n, const GLuint *framebuffers )
public static native void glDeleteFramebuffers(
int n,
int[] framebuffers,
int offset
);
幀緩存對(duì)象完整性檢查glCheckFramebufferStatus
// C function GLenum glCheckFramebufferStatus ( GLenum target )
public static native int glCheckFramebufferStatus(
int target
);
參數(shù)說(shuō)明：
target 可以為GLES20.GL_FRAMEBUFFER，在OpenGLES3.0后 GL_READ_FRAMEBUFFER 和 GL_DRAW_FRAMEBUFFER兩種 只讀或者只寫(xiě)的framebuffer類型
如果有錯(cuò)誤發(fā)生汤求，返回0
渲染緩存對(duì)象
基本流程和掛載紋理對(duì)象一致俏险，也是要先glGenRenderbuffers，在glBindRenderbuffer
// C function void glGenRenderbuffers ( GLsizei n, GLuint *renderbuffers )
public static native void glGenRenderbuffers(
int n,
int[] renderbuffers,
int offset
);
// C function void glBindRenderbuffer ( GLenum target, GLuint renderbuffer )
public static native void glBindRenderbuffer(
int target,
int renderbuffer
);
這里的target的和掛載紋理對(duì)象時(shí)傳的GLES20.GL_TEXTURE_2D不同首昔，而是GLES20.GL_RENDERBUFFER
調(diào)用glBindRenderbuffer之后還沒(méi)有分配存儲(chǔ)空間來(lái)存儲(chǔ)圖像信息寡喝，只是創(chuàng)建了一個(gè)所有狀態(tài)都為默認(rèn)值的渲染緩存，需要使用glRenderbufferStorage來(lái)分配對(duì)應(yīng)存儲(chǔ)空間
// C function void glRenderbufferStorage ( GLenum target, GLenum internalformat, GLsizei width, GLsizei height )
public static native void glRenderbufferStorage(
int target,
int internalformat,
int width,
int height
);
參數(shù)說(shuō)明：
target 必須時(shí)GLES20.GL_RENDERBUFFER勒奇，
渲染緩存的類型可以是深度緩存预鬓、模版緩存，比如GLES20.GL_DEPTH_COMPONENT16赊颠，GL_STENCIL_INDEX8等
然后通過(guò)glFramebufferRenderbuffer對(duì)渲染緩存進(jìn)行掛載格二，類似于紋理對(duì)象的掛載方式glFramebufferTexture2D
// C function void glFramebufferRenderbuffer ( GLenum target, GLenum attachment, GLenum renderbuffertarget, GLuint renderbuffer )
public static native void glFramebufferRenderbuffer(
int target,
int attachment,
int renderbuffertarget,
int renderbuffer
);
參數(shù)說(shuō)明
target和renderbuffertarget為GLES20.GL_FRAMEBUFFER
attachment為渲染緩存的類型 例如深度緩存對(duì)象為GLES20.GL_DEPTH_ATTACHMENT
使用完之后對(duì)應(yīng)渲染緩存對(duì)象的刪除方法為glDeleteRenderbuffers
// C function void glDeleteRenderbuffers ( GLsizei n, const GLuint *renderbuffers )
public static native void glDeleteRenderbuffers(
int n,
int[] renderbuffers,
int offset
);
三、實(shí)踐
通過(guò)上面兩小節(jié)的學(xué)習(xí)竣蹦，我們知道了FBO的概念以及使用流程顶猜，下面我們通過(guò)對(duì)其實(shí)踐應(yīng)用加深理解。
實(shí)現(xiàn)目標(biāo)：畫(huà)一個(gè)三角形（但不直接顯示在屏幕上）痘括，然后進(jìn)行高斯模糊长窄，然后在渲染到屏幕上,
該實(shí)踐會(huì)涉及到高斯模糊滔吠，它的實(shí)現(xiàn)原理和具體實(shí)現(xiàn)方案我們?cè)谙乱黄薪Y(jié)合GPUImage源碼來(lái)一起解讀學(xué)習(xí)。歡迎關(guān)注公眾號(hào)“音視頻開(kāi)發(fā)之旅”挠日，一起學(xué)習(xí)成長(zhǎng)疮绷。
四、遇到的問(wèn)題
在實(shí)踐中遇到各種渲染不出來(lái)的問(wèn)題嚣潜，歸納了常見(jiàn)的場(chǎng)景和分析解決方案
- location的解析 名稱和glsl不對(duì)應(yīng)
- 渲染一直FBO上,即使解綁后也沒(méi)有在屏幕上渲染
- shader或者program加載出錯(cuò)
- 數(shù)據(jù)設(shè)置問(wèn)題
- FBO代碼順序書(shū)寫(xiě)問(wèn)題導(dǎo)致GL_FRAMEBUFFER_BINDING值不是主屏幕
- 在ondrawframe的時(shí)候沒(méi)有use當(dāng)前的program, 如果只有一個(gè)filter不會(huì)有這種問(wèn)題,但是鏈?zhǔn)絝ilter就會(huì)暴露該問(wèn)題.不設(shè)置使用的還是最初的program
-->分析過(guò)程
- 針對(duì)glsl進(jìn)行最小化,比如片元著色器直接指定顏色值
- GLES20.glGetProgramiv(program, GLES20.GL_LINK_STATUS, status, 0);
- 添加GLES20.glGetError()檢查
- 斷點(diǎn)調(diào)試program shader location vbo 等值
- 斷點(diǎn)分析出問(wèn)題的filter的ondrawframe
五冬骚、資料
《OpenGL ES 3.0編程指南》
《OpenGL 編程指南》
OpenGL Frame Buffer Object (FBO)
GPGPU計(jì)算觀念和基本思路總結(jié)
OpenGL中的FBO對(duì)象（含源碼）
OpenGL.FrameBuffer Object
OpenGL ES 幀緩沖對(duì)象（FBO）：Render to texture
OpenGL編程指南第十章：Framebuffer
glBindFramebuffer() 離屏渲染+雙緩存+讀取opengl像素 glReadPixels()
六、收獲
- 理解了FBO的基本知識(shí)和使用流程
- 實(shí)踐中遇到渲染不出的問(wèn)題解決
具體實(shí)踐會(huì)涉及到高斯模糊懂算，它的實(shí)現(xiàn)原理和具體實(shí)現(xiàn)方案我們?cè)谙乱黄薪Y(jié)合GPUImage源碼來(lái)一起學(xué)習(xí)
感謝你的閱讀
下一篇我們學(xué)習(xí)分析GPUImage的高斯模糊只冻，歡迎關(guān)注公眾號(hào)“音視頻開(kāi)發(fā)之旅”，一起學(xué)習(xí)成長(zhǎng)计技。
歡迎交流
