0 在上一期的內(nèi)容中，我們使用著色器（shader）和頂點對象（VAO, VBO）繪制了一個橘色的三角形。本期內(nèi)容將如下進(jìn)行展開：

（1）在頂點數(shù)組vertices中設(shè)置四個矩形角點，并使用元素緩沖數(shù)組對象(element buffer object, EBO)來重復(fù)使用這四個角點繪制一個矩形。

（2）繪制完單色矩形之后，我們將創(chuàng)建兩套渲染對象來實現(xiàn)兩種不同顏色的兩個矩形的繪制。

（3）最后我們再繪制一個顏色能隨著時間變化的矩形。

?

1 繪制一個純色的矩形。

1.0 一個矩形是由兩個三角形組成的，所以我們在VBO中的vertices數(shù)組中定義矩形的四個角點位置。

1.1 通過EBO設(shè)置以什么順序去索引VBO中角點的順序。

1.2 將VBO,VAO,EBO組合起來。

1.3 設(shè)置圖源繪制的方式是：線還是面。

1.4 在渲染循環(huán)中通過我們設(shè)置的EBO規(guī)則繪制矩形（也就是兩個連起來的三角形）。

1.5 得到矩形實體和矩形線框。

?2 繪制兩個顏色不同的矩形。

2.0 在第一節(jié)中我們通過設(shè)置包含4個頂點坐標(biāo)位置的buffer和一個橘色的shader程序共同繪制了橘色矩形。接下來我們將通過設(shè)置兩個不同位置的矩形和兩種不同顏色的shader程序，來繪制兩個顏色不同的矩形。

2.1 設(shè)置兩種顏色的片段著色器源碼。一種顏色設(shè)為橘黃色、一種顏色設(shè)為橙色。

2.2 設(shè)置兩個片段著色器對象分別編譯上面提到的兩個片段著色器源碼。

2.3 創(chuàng)建兩個著色器程序，分別鏈接兩個片段著色器對象和共用的頂點著色器對象。

2.4 生成兩個頂點數(shù)組對象和頂點緩沖對象（將VAO和VBO設(shè)置為unsigned int 數(shù)組）。其中第一個VBO的vertices四個頂點坐標(biāo)對應(yīng)的是左邊的矩形位置，第二個VBO的vertices四個頂點坐標(biāo)對應(yīng)的是右邊的矩形位置。

2.5 在渲染循環(huán)中，繪制兩個矩形。其中shaderProgram1激活之后顏色將被設(shè)置為橘黃色，然后再關(guān)聯(lián)第一個VAO（左邊位置的矩形對象），通過EBO的規(guī)則繪制矩形即可在屏幕左邊繪制一個橘黃色矩形。同理可得右邊的橙色矩形。

2.6 編譯通過后運行程序，可得到兩個顏色不同的矩形。

3 繪制完單一純色的三角形，我們再玩一點更花的。我們來創(chuàng)建一個顏色可以根據(jù)時間流逝而變化的矩形。

3.0 首先我們要修改一下片段著色器中的顏色。將之前定死的顏色用uniform vec4 ourColor來代替。這里的ourColor是一個在shader程序之外的由我們主程序來控制的vec4變量。

3.1 在渲染循環(huán)中我們獲取當(dāng)前的時間，將當(dāng)前的時間作為變量轉(zhuǎn)成正弦值的絕對值（0~1.0）之間。獲取著色器程序中的ourColor顏色變量后，將顏色值賦給它。

3.2 編譯運行程序得到一個顏色隨時間變化的矩形。

程序源碼：