0 上一章講到如何生成一個(gè)彩色的矩形。這一章我們將主要引入紋理這個(gè)概念。并且編寫(xiě)三件關(guān)于紋理圖像的例子：

（1）設(shè)置單一紋理的矩形。

（2）設(shè)置多紋理混合的矩形。

（3）探索放大\縮小時(shí)的紋理過(guò)濾方式。

1 設(shè)置單一紋理的矩形

1.0 使用開(kāi)源庫(kù)stb_image（https://github.com/nothings/stb/blob/master/stb_image.h）。將stb_image的頭文件添加進(jìn)我們的項(xiàng)目中。

1.1 在main.cpp的頂部添加宏和stb_image.h的包含。其中宏的作用是將stb_image.h轉(zhuǎn)為cpp來(lái)調(diào)用。

1.2 生成一個(gè)紋理對(duì)象，設(shè)置該紋理對(duì)象的環(huán)繞方式和過(guò)濾方式。使用stb_image的接口加載紋理圖片（一張墻壁的紋理圖紙），并將紋理圖片的信息附加到紋理對(duì)象上。（記得及時(shí)釋放掉圖片信息的資源）

1.3 在頂點(diǎn)著色器源碼中添加一個(gè)location為2的2維向量來(lái)表示紋理坐標(biāo)信息。并將紋理坐標(biāo)信息輸出給片段著色器。

1.4 在片段著色器源碼中我們通過(guò)傳入的紋理坐標(biāo)和使用uniform設(shè)置的采樣器紋理變量共同生成一個(gè)紋理色彩傳給FragColor。

1.5 我們?cè)趍ain()里的vertices后面添加紋理坐標(biāo)信息。紋理坐標(biāo)信息的范圍在0到1.0之間，坐標(biāo)原點(diǎn)在左下角，如果超過(guò)1.0，則會(huì)對(duì)紋理圖像進(jìn)行特殊處理（后面會(huì)講到）。

1.6 重新解釋vertices數(shù)組中的數(shù)據(jù)排列的步長(zhǎng)和偏移量。

1.7 將紋理單元綁定到0號(hào)位。（沒(méi)有特意的去將片段著色器中的OurTexture設(shè)置為0號(hào)位，因?yàn)榇藭r(shí)只有一個(gè)紋理信息，OpenGL默認(rèn)將其設(shè)置為了0號(hào)位）

1.8 編譯運(yùn)行后得到一個(gè)帶有墻壁紋理的矩形圖像。

1.9 如果我們不滿足單調(diào)的紋理，我們可以在紋理的基礎(chǔ)上再添加其他的顏色。在片段著色器源碼中，在紋理顏色的基礎(chǔ)上再乘一個(gè)顏色值。

1.10 編譯運(yùn)行后可得到一個(gè)帶有附加顏色的紋理矩形。

2 設(shè)置多紋理混合的矩形

2.0 在片段著色器中添加兩個(gè)紋理采樣變量，將FragColor的顏色設(shè)置為由兩個(gè)紋理圖像融合的顏色。（其中0.2這個(gè)融合比例值表示紋理1的顏色占用80%，紋理2的顏色占用20%）

2.1 在main()的第一紋理對(duì)象后面再添加第二個(gè)紋理對(duì)象。將第二張圖片（一個(gè)賤賤的笑臉）加載到第二個(gè)紋理對(duì)象中。

2.2 由于此時(shí)程序中有兩個(gè)紋理對(duì)象需要設(shè)置，所以不能跟之前一樣讓OpenGL自己默認(rèn)設(shè)置片段著色器中紋理采樣變量的位置值了。需要手動(dòng)地對(duì)紋理采用變量設(shè)置其對(duì)應(yīng)的位置值。

2.3 將兩個(gè)紋理對(duì)應(yīng)綁定到紋理采用位置中。

2.4 編譯運(yùn)行后可得到一個(gè)倒轉(zhuǎn)的笑臉融合墻壁紋理的矩形。

2.5 由于stb_image傳入的圖片其y軸與OpenGL的y軸正好相反，所以使用stb_image的接口反轉(zhuǎn)圖片的y軸后，得到正確方向的紋理圖像。

?3 探索放大\縮小時(shí)的紋理過(guò)濾方式

3.0 之前在vertices中設(shè)置的紋理坐標(biāo)范圍控制在了0到1.0之間?，F(xiàn)在我們將紋理坐標(biāo)值擴(kuò)大到2.0。

3.1 編譯運(yùn)行程序，此時(shí)會(huì)出現(xiàn)矩形的面積大于紋理圖像的情況。且紋理重復(fù)的方式為”重復(fù)圖像”。

3.2 我們可以將第一個(gè)紋理對(duì)象的紋理環(huán)繞方式改為延伸像素邊緣。此時(shí)得到的圖像將不再是兩個(gè)紋理均為重復(fù)，而是第一個(gè)紋理為邊緣延伸，第二個(gè)紋理為重復(fù)。

3.3 剛剛我們將紋理坐標(biāo)擴(kuò)大到了2.0，現(xiàn)在我們?cè)僭囋嚳磳⒓y理坐標(biāo)縮小到0.45-0.55看看會(huì)是什么效果。

3.4 可以看到在矩形范圍內(nèi)，我們只加載了面積非常小的一塊紋理圖像被加載了。（此時(shí)紋理過(guò)濾方式為線性插值）

3.5 將紋理過(guò)濾方式從線性插值改為取最近點(diǎn)。圖像的像素塊會(huì)更明顯。

4 最后我們實(shí)現(xiàn)一個(gè)通過(guò)鍵盤(pán)上下兩個(gè)鍵，動(dòng)態(tài)調(diào)整兩個(gè)紋理圖像混合比例的功能。

4.0首先在main()前設(shè)置一個(gè)全局的控制混合比例的參數(shù)。

4.1 然后在鍵盤(pán)觸發(fā)響應(yīng)的回調(diào)函數(shù)中設(shè)置混合比例參數(shù)的調(diào)整。

4.2 在片段著色器中添加一個(gè)紋理混合比例參數(shù)。

4.3 在渲染循環(huán)中，動(dòng)態(tài)的設(shè)置紋理混合比例參數(shù)。

4.4 編譯運(yùn)行程序，可以得到一個(gè)可以通過(guò)上下鍵控制紋理混合比例的矩形圖像。