從0開始的OpenGL學習(三)-元素緩存對象

本文主要解決以下兩個問題:

1、如何使用元素緩存對象來顯示一個矩形?
2、如何用不同的方式顯示兩個三角形?

首先,對之前一章中顯示三角形的方式搞了一些科學研究_

前一章中,指定頂點屬性的格式是用這樣的方式:

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);

3sizeof(float)表示了數組兩個元素之間的跨度,而函數說明上寫著,如果元素是緊密排列的,也可以使用0來做參數,達到一樣的效果。因吹斯汀,馬上把3 sizeof(float)改成0。編譯運行,果然如此。

再來!第二個參數3表示了每個頂點需要更新的分量數目,現在用的是三維頂點格式,但最后一維置成了0。那么是不是可以使用二維的頂點格式,將第二個參數設置為2,第五個參數設置為0,把頂點數組中的z坐標去掉呢?理論可行,馬上動手修改。嗯,果然顯示效果還是一樣的。

一、元素緩存對象(Element Buffer Object,簡稱EBO)

如果你學過DX的話,那么你一定知道頂點索引這東西,用來標識頂點在頂點數組中的位置的。元素緩存對象也是起的同樣的作用,在數組中標識出位置,使用位置來繪制圖形,避免了大量存儲重復數據。舉個例子,想象一下如何在OpenGL中顯示一個矩形?使用三角形圖元的話,就需要將矩形分為兩個三角形,這兩個三角形擁有兩個相同的頂點。但是,這樣一來,我的頂點數組中就需要6個頂點數據,這樣太浪費了,3D顯示本來就非常耗資源,再弄點冗余的數據無異于雪上加霜。于是,元素緩存對象橫空出世,解決了冗余數據的問題。

使用EBO的方式和使用VBO的方式一樣,先生成一個唯一ID,然后綁定到OpenGL,再然后將定義好的索引數組保存到EBO中去,最后進行繪制。好,理清思路,開始動手。

1、定義頂點數組和索引數組

4個頂點,6個索引,像這樣:

float rectVertices[] = {
0.5f, 0.5f, 0.0f,   //右上角
0.5f, -0.5f, 0.0f,  //右下角
-0.5f, -0.5f, 0.0f, //左下角
-0.5f, 0.5f, 0.0f   //左上角
};
unsigned int indices[] = {
0, 1, 3,    //第一個三角形
1, 2, 3 //第二個三角形
};

2、獲取唯一ID

還是用glGenBuffers函數,像這樣

unsignedintEBO;
glGenBuffers(1, &EBO);

3、綁定到OpenGL

綁定VBO用的參數是GL_ARRAY_BUFFER,綁定EBO需要的是GL_ELEMENT_ARRAY_BUFFER,像這樣:

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

4、復制索引數據到EBO中去

還是使用glBufferData,不過復制的時候需要指明是EBO,所以,要用GL_ELEMENT_ARRAY_BUFFER參數,像這樣:

glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

5、繪制

繪制VBO使用glDrawArrays函數,繪制EBO就要使用glDrawElements函數,像這樣:

glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_INT,0);

聲明要繪制的東西是三角形(GL_TRIANGLES),索引數量是6個(6),索引的數據類型是無符號整型數(GL_UNSIGNED_INT),索引已經在EBO中,沒有外部的位置指示(0)。

搞出來之后,應該是這個樣子滴:

使用元素緩存對象繪制矩形

做一下總結:

圖片資源來源于:www.learningopengl.com

可以看到,VAO中保存的是繪制所需要的所有的數據,包括VBO和EBO,所以在繪制的時候只需要綁定響應的VAO就可以繪制相應的東西了。而想要將數據保存到VAO里,就必須把它綁定到當前的OpenGL環境,綁定之后,所有的操作就會保存到當前的VAO中,這也就是為什么總是會看到那么多的綁定函數的原因了。

產生的VAO和VBO唯一ID

從OpenGL環境中獲取的VAO和VBO的值都是從1開始的,這就有問題了,0去哪里了?不過轉念一想也是,OpenGL不需要任何的輸入就可以運行起來,說明它本身就已經有一個完整的環境在里面了,這個環境里的VAO和VBO的編號應該就是0了(大膽假設)。

二、用不同的方式顯示兩個三角形

1、顯示兩個三角形

這太簡單了,只要再頂點數組中定義3個頂點,然后繪制的時候將頂點數量改成6就可以了。

效果如下:

繪制兩個三角形

2、使用不同的VAO和VBO繪制兩個三角形

在創建一個VAO和VBO,然后用前面一樣的方式來分配ID,復制數據。復制數據的時候通過制定大小和起始偏移的方式來使用同一個數組中的數據。

第一個VBO這樣復制數據:glBufferData(GL_ARRAY_BUFFER, sizeof(vertices) / 2/*sizeof(rectVertices)*/, vertices/*rectVertices*/, GL_STATIC_DRAW);
第二個VBO就這樣復制:glBufferData(GL_ARRAY_BUFFER, sizeof(vertices) / 2, vertices + 9, GL_STATIC_DRAW);

使用的是同一個數組。編譯運行,效果跟上面一毛一樣。

3、繪制兩個不同顏色的三角形

再弄一個片元著色器,編譯進另一個著色器程序之中,使用一個著色器程序繪制之后馬上選用另一個著色器再繪制一個。

先搞一個黃色的片元著色器:

const char* fragmentShaderSource1 = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
"   FragColor = vec4(1.0f, 1.0f, 0.1f, 1.0f);\n"
"}\0";  //千萬別忘記這個\0

再編譯這個著色器:

int fragmentShader1 = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader1, 1, &fragmentShaderSource1, NULL);
glCompileShader(fragmentShader1);

再放到著色器程序中:

int shaderProgram1 = glCreateProgram();
glAttachShader(shaderProgram1, vertexShader);
glAttachShader(shaderProgram1, fragmentShader1);
glLinkProgram(shaderProgram1);

最后顯示:

glUseProgram(shaderProgram1);
glBindVertexArray(VAO1);
glDrawArrays(GL_TRIANGLES, 0, 3);

嗯,效果完美:

繪制不同顏色的三角形

下一篇
目錄
上一篇

參考資料:

1、www.learningopengl.com(推薦學習站點)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評論 6 538
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,034評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,165評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,559評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,781評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,327評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,084評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,278評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,495評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,010評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,241評論 2 375

推薦閱讀更多精彩內容