電腦遊戲製作開發設計論壇 首頁 電腦遊戲製作開發設計論壇
任何可以在PC上跑的遊戲都可以討論，主要以遊戲之製作開發為主軸，希望讓台灣的遊戲人有個討論、交流、教學、經驗傳承的園地
 
 常見問題常見問題   搜尋搜尋   會員列表會員列表   會員群組會員群組   會員註冊會員註冊 
 個人資料個人資料   登入檢查您的私人訊息登入檢查您的私人訊息   登入登入 

Google
GLSL&GLUT 從環境設定開始的基礎教學(06) - Frame Buffer Object(FBO)

 
發表新主題   回覆主題    電腦遊戲製作開發設計論壇 首頁 -> 遊戲程式高級班：DirectX、OpenGL及各種圖型函式庫
上一篇主題 :: 下一篇主題  
發表人 內容
Director
偶而上來逛逛的過客


註冊時間: 2013-11-04
文章: 13

381.66 果凍幣
發表發表於: 2013-12-16, PM 2:37 星期一    文章主題: GLSL&GLUT 從環境設定開始的基礎教學(06) - Frame Buffer Object(FBO) 引言回覆
引言回覆:

　※2015/7/5補充：
　　其實已經過很久了，GLee似乎已經沒再繼續更新，我在寫了這篇教學不久後也改用了GLEW取代Glee，它們的功能及函式名稱其實是幾乎一樣的，安裝方式同其他函式庫
　　所以只需要將glee.h及glee.lib改為glew.h及glew.lib就好，這是下載的地方，抓Binaries那個http://glew.sourceforge.net/。
　　lib用 lib\Release\Win32 裡面的。



　前陣子忙著做繪圖引擎的光影和FXAA的優化，這篇稍晚了些 Confused

　我們這次要做的東西是這個!


　這樣可能看不出是什麼東西，實際上這個正方形裡面畫的是一個周圍場景的動畫(程式中是一直旋轉)，你可以想像是一個攝影機那樣，而正方形裡就是攝影機傳來的畫面。

　這個運用可以拿來做出遊戲中監視器的效果，它叫做Frame Buffer Object，下稱FBO。

　當然它可以做的事情絕不只是這個，像是影片剪輯軟體中的濾鏡功能、遊戲裡的反鋸齒、全景泛光等等，大都可以透過這個搭配特定Shader來實現，是個很實用的好東西。

　關於Frame Buffer我不會提太多，畢竟我這系列是想以實作的觀點來跟大家研究GLSL，請多見諒 Very Happy

引言回覆:

　那我們來簡單談談FBO，我們都知道畫面中的每一禎都是資訊經過計算後，送到Frame Buffer Processor，再送到畫面上來的。

　而FBO最經常被拿來用的做法就是，把Frame Buffer Processor裡的資料截下來，然後存成材質再來做演算。

　什麼意思呢?

　大家可以想像成，在vertex的資料處理完之後，畫出來的圖，在把他們搬到螢幕上之前，我們還有機會針對整個畫面調整。

　像是把畫面弄模糊、變清晰等等，各式各樣的濾鏡功能都是在這樣情形下運作的，當然大家熟悉的抗鋸齒AA(anti-aliasing)也是這樣實作的。

　又或者結合我上一篇說的cubemap，他可以從反射物體的位置，取到動態的cubemap材質，從而做出可以反射移動中物體畫面的反射物。

　它的用途非常非常多，像我自己就做過3D遊戲中的控制面板、監視器、全景泛光、抗鋸齒等等運用，有機會的話我今後會多紀錄一些，但還是推薦大家上原文網站查找，資料量真的不可比擬。

　那今天我們就來做個簡易攝影機和屏幕吧!



　那麼簡單說明下步驟：
　　Step1: 創建兩張全新的材質，一個深度一個色彩(用來儲存從Frame Buffer Processor拿到的資料)
　　Step2: 創建一個新的FBO，然後將剛剛創建的材質綁上去
　　Step3: 布置環境，把想要的畫面渲染到FBO的材質上
　　Step4: 把每一禎渲染出的材質貼在一個方形上，done!

　開始看程式碼吧 Very Happy

引言回覆:
Step1


　首先要做的是創建新材質，如何創建呢? 我們寫個函式來製作吧!

代碼:
unsigned int createTexture( int w, int h, bool isDepth )
{
   unsigned int textureID;

   glGenTextures( 1, &textureID );      // 向OpenGL登錄一張材質
   glBindTexture( GL_TEXTURE_2D, textureID );      // 下面開始做材質設定
   glTexImage2D( GL_TEXTURE_2D, 0,      // 首參數是你要什麼樣的材質(GL_TEXTURE_2D), 第二參數level可以不管
      isDepth ? GL_DEPTH_COMPONENT : GL_RGBA8,   // 再來是根據引數進來的isDepth來判斷我們要深度還是色彩材質
      w, h, 0,                  // 材質長寬, border可以不管
      isDepth ? GL_DEPTH_COMPONENT : GL_RGBA,      // 同上, 但有區別, 可參考, http://www.opengl.org/sdk/docs/man/xhtml/glTexImage2D.xml
      GL_FLOAT, NULL );            // 色彩資料存在float格式中, 最後我們不是導入image檔, 沒有圖像資料所以田NULL

   // 材質設定算是OpenGL初學的知識我就不提了
   glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST );
   glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST );

   glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_BORDER );
   glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER );

   // 簡易的錯誤回報
   int error;
   error = glGetError();
   if( glGetError() != 0 ){
      std::cout << "Error happened while loading the texture: " << gluErrorString(error) << std::endl;
   }
   glBindTexture( GL_TEXTURE_2D, 0 );

   // 最後回傳生成好的材質ID
   return textureID;
}


　大多都如註解 Very Happy

　再來就是宣告兩張新材質囉。
代碼:
GLuint renderTex, depthTex;

void Initialize()
{
   ...
   ...

   renderTex = createTexture( WINDOW_SIZE_W, WINDOW_SIZE_H, false );
   depthTex = createTexture( WINDOW_SIZE_W, WINDOW_SIZE_H, true );

   ...
   ...
}


　第一步就到這邊。




引言回覆:
Step2


　OK! 那我們再來看要如何建立一個新的FBO。
代碼:
GLuint FBO;

void Initialize()
{
   ...
   ...

   glGenFramebuffers( 1, &FBO );   // 登錄一個Frame Buffer Object
   glBindFramebuffer( GL_FRAMEBUFFER, FBO );   // 然後使用它, 下面選擇要存資料的材質
   // GL_COLOR_ATTACHMENT0, 表示用來存色彩資料
   // GL_TEXTURE_2D, 就是材質的性質(剛剛創建的是2D材質)
   // level可以不管
   glFramebufferTexture2D( GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, renderTex, 0 );
   // GL_DEPTH_ATTACHMENT, 表是用來存深度資料
   glFramebufferTexture2D( GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, depthTex, 0 );
   glBindFramebuffer( GL_FRAMEBUFFER, 0 );      // 一般來說, FBO不使用的時候就會使用"0"來關閉

   ...
   ...
}


　FBO的建立沒什麼困難的，也沒有太多參數可以提 Very Happy



引言回覆:
Step3


　很快的我們就跳到的渲染的階段了，這邊要有的概念很簡單，被包在：
代碼:
glBindFramebuffer( GL_FRAMEBUFFER, FBO );

　以及
代碼:
glBindFramebuffer( GL_FRAMEBUFFER, 0 );

　之間的所有畫面，都會渲染到剛剛綁的那兩張材質上面!

　你想要讓攝影機顯現出什麼畫面，你就先把你的視野移動到那個畫面，記下那時候的攝影機狀態(view matrix)，然後到FBO下面完整的畫一遍那個畫面，這樣畫面就會存到renderTex了!

　以我的例子，我設定了一個新的camera，並且讓它每一禎旋轉1度，最後把這個camera看的到畫面畫到正方形上面，我再從別的camera來看這塊正方形，這就是攝影機了!

　於是首先要做的就是佈置場景，調整你想要在螢幕上看到的視野(view matrix)
代碼:
float angle = 0.0f;

void Display()
{
   angle += 1.0f;
   if( angle >= 360 )
      angle -= 360;

   glMatrixMode( GL_MODELVIEW );
   glLoadIdentity();

   glBindFramebuffer( GL_FRAMEBUFFER, FBO );   // 使用FBO
   // 綁定色彩資料材質
   glFramebufferTexture2D( GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, renderTex, 0 );
   // 綁定深度資料材質
   glFramebufferTexture2D( GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_TEXTURE_2D, depthTex, 0 );
   // 我不想讓keyboard影響到攝影機的視野, 所以傳了一個假的keyboard狀態給newCamera
   bool tmpKB[256] = {false};
   newCamera.lookAt( newCamera.getPitch(), angle );
   newCamera.Control( tmpKB, CAM_NO_MOUSE_INPUT );
   // 畫點東西
   drawSkybox();
   glClear( GL_DEPTH_BUFFER_BIT );

   newCamera.UpdateCamera();
   // 然後結束FBO
   glBindFramebuffer( GL_FRAMEBUFFER, 0 );


　到這裡為止，我就完成了我想要看到的畫面，就是一個一直旋轉的攝影機看到的東西。



引言回覆:
Step4


　然後最後一步，你只要向平常一樣把renderTex當作一張材質貼上正方形就好!

代碼:
   // 要來畫新的東西, 記得重置視野的matrix
   glLoadIdentity();

   MainCamera.Control( stateKeyboard, CAM_NO_MOUSE_INPUT );

   drawSkybox();
   glClear( GL_DEPTH_BUFFER_BIT );

   MainCamera.UpdateCamera();

   glm::mat4 modelViewMatrix =
      glm::rotate( -MainCamera.getPitch(), 1.0f, 0.0f, 0.0f ) *
      glm::rotate( -MainCamera.getYaw(), 0.0f, 1.0f, 0.0f ) *
      glm::translate( MainCamera.getLocation().x, MainCamera.getLocation().y, MainCamera.getLocation().z );
   glm::vec4 worldLightPosition = modelViewMatrix * glm::vec4( lightPosition.x, lightPosition.y, lightPosition.z, 1.0f );

   mainShader->useShader();
   glActiveTexture( GL_TEXTURE0 );
   // 全部跟上一章一樣, 有改的只有這邊, 貼上剛剛渲染的renderTex
   glBindTexture( GL_TEXTURE_2D, renderTex );
   glUniform1i( glGetUniformLocation( mainShader->getProgramID(), "tex" ), 0 );
   glUniform3f( glGetUniformLocation( mainShader->getProgramID(), "lightPosition" ), worldLightPosition.x, worldLightPosition.y, worldLightPosition.z );
   glUniform4f( glGetUniformLocation( mainShader->getProgramID(), "lambient" ), 0.4, 0.4, 0.4, 1.0 );
   glUniform4f( glGetUniformLocation( mainShader->getProgramID(), "ldiffuse" ), 0.7, 0.7, 0.7, 1.0 );
   glUniform4f( glGetUniformLocation( mainShader->getProgramID(), "lspecular" ), 1.0, 1.0, 1.0, 1.0 );   

   glBegin(GL_QUADS);
   glNormal3f( 0, 0, 1 );
   glTexCoord2f( 1, 1 );
   glVertex3f(1, 1, -5);
   glTexCoord2f( 0, 1 );
   glVertex3f(-1, 1, -5);
   glTexCoord2f( 0, 0 );
   glVertex3f(-1, -1, -5);
   glTexCoord2f( 1, 0 );
   glVertex3f(1, -1, -5);
   glEnd();
   mainShader->delShader();   

   glutSwapBuffers();
}


　只要把myTex改成renderTex你就可以把剛剛FBO截下的材質貼到正方形上!

　之後若有機會提到濾鏡的實作，概念就是把這張renderTex經過Shader處理過後再貼上，很簡單的道理，之後有機會再談囉 Very Happy



　最後留下本章範例程式碼。

ch6.rar
 描述:
本章節範例程式碼

下載
 檔名:  ch6.rar
 附件大小:  106.71 KB
 下載次數:  共 1236 次
回頂端
檢視會員個人資料 發送私人訊息 發送電子郵件 參觀發表人的個人網站
JeffreyMt
稍嫌羞澀的路人


註冊時間: 2015-08-13
文章: 1
來自: France
7.08 果凍幣
發表發表於: 2015-9-10, PM 11:37 星期四    文章主題: GLSLLUT 06 Frame Buffer ObjectFBO 引言回覆
I am trying to modify the animation of Skeleton.Nif, but when I try to export, I get this error.

Error in Anim Buffer: Frame Out of Range 31 not in 1,20

anu clue of its meaning and how to workaround it?
回頂端
檢視會員個人資料 發送私人訊息 發送電子郵件 參觀發表人的個人網站 AIM Address 雅虎訊息通
Takenaka
稍嫌羞澀的路人


註冊時間: 2016-01-04
文章: 1

7.58 果凍幣
發表發表於: 2016-1-4, PM 9:34 星期一    文章主題: 引言回覆
感謝樓主,本人是今年開始才學習OPENGL的新人....

我只有基本的java知識,還有真的是微不足道C++知識(我同時只學習了C++大約3星期...)

因為自己不能明白學校的教學內容,所以來此學習C++,請多指教!
回頂端
檢視會員個人資料 發送私人訊息
從之前的文章開始顯示:   
發表新主題   回覆主題    電腦遊戲製作開發設計論壇 首頁 -> 遊戲程式高級班：DirectX、OpenGL及各種圖型函式庫 所有的時間均為 台灣時間 (GMT + 8 小時)
第1頁(共1頁)

 
前往:  
您 無法 在這個版面發表文章
您 無法 在這個版面回覆文章
您 無法 在這個版面編輯文章
您 無法 在這個版面刪除文章
您 無法 在這個版面進行投票
您 可以 在這個版面附加檔案
您 可以 在這個版面下載檔案


Powered by phpBB © 2001, 2005 phpBB Group
正體中文語系由 phpbb-tw 維護製作