http://huangwei.pro/2015-08/modern-opengl2/
在本文中，我們將給三角形加一個(gè)貼圖，這需要在頂點(diǎn)和片段著色器中加入一些新變量，創(chuàng)建和使用貼圖對(duì)象，并且學(xué)習(xí)一點(diǎn)貼圖單元和貼圖坐標(biāo)的知識(shí)。
本文會(huì)使用兩個(gè)新的類到tdogl命名空間中：tdogl:Bitmap和tdogl:Texture。這些類允許我們將jpg，png或bmp圖片上傳到顯存并用于著色器。tdogl:Program類也增加一些相關(guān)接口。
獲取代碼
所有例子代碼的zip打包可以從這里獲取：https://github.com/tomdalling/opengl-series/archive/master.zip。
這一系列文章中所使用的代碼都存放在：https://github.com/tomdalling/opengl-series。你可以在頁面中下載zip，加入你會(huì)git的話，也可以復(fù)制該倉(cāng)庫(kù)。
本文代碼你可以在source/02_textures目錄里找到。使用OS X系統(tǒng)的，可以打開根目錄里的opengl-series.xcodeproj，選擇本文工程。使用Windows系統(tǒng)的，可以在Visual Studio 2013里打開opengl-series.sln，選擇相應(yīng)工程。
工程里已包含所有依賴，所以你不需要再安裝或者配置額外的東西。如果有任何編譯或運(yùn)行上的問題，請(qǐng)聯(lián)系我。
著色器變量Uniform與Attribute
教程一里的著色器變量都是attribute，本文介紹另外一種類型的變量：uniform變量。
著色器變量有兩種類型：uniform和attribute。attribute變量可以在每個(gè)頂點(diǎn)上有不同值。而uniform變量在多個(gè)頂點(diǎn)上保持相同值。比如，你想要給一個(gè)三角形設(shè)置一種顏色，那你應(yīng)該使用uniform變量，如果你希望每個(gè)三角形頂點(diǎn)有不同顏色，你應(yīng)該使用attribute變量。從這開始，我稱呼他們?yōu)?#8220;uniforms”和“attributes”。
Uniforms能被任意著色器訪問，但是Attributes必須先進(jìn)入頂點(diǎn)著色器，而非片段著色器。頂點(diǎn)著色器在需要時(shí)會(huì)將該值傳給片段著色器。這因?yàn)閁niforms像常量-它們不會(huì)被任何著色器更改。然而，Attributes不是常量。頂點(diǎn)著色器會(huì)改變Attribute變量的值，在片段著色器獲取之前。就是說，頂點(diǎn)著色器的輸出就是片段著色器的輸入。
為了設(shè)置Uniform的值，我們可以調(diào)用glUniform*系列函數(shù)。而設(shè)置Attribute的值，我們需要在VBO中保存，并且和VAO一起發(fā)送給著色器，就像前一篇教程里的glVertexAttribPointer。加入你不想把值存在VBO里，你也可以使用glVertexAttrib*系列函數(shù)來設(shè)置Attribute值。
貼圖
貼圖，大體上來說就是你應(yīng)用在3D物體上的2D圖像。它有其它用途，但顯示2D圖像在3D幾何上是最常用的。有1D，2D，3D貼圖，但本文只講2D貼圖。更深入閱讀，請(qǐng)參見Learning Modern 3D Graphics Programming書中的Textures are not Pictures章節(jié)。
貼圖是存放在顯存里的。那就是說，你需要在使用之前上傳你的貼圖數(shù)據(jù)給顯卡。這類似VBO在前文的作用-VBO也是在使用之前需要存放到顯存上。
貼圖的高和寬需要是2的冪次方。比如16，32，64，128，256，512。本文中使用的是256*256的圖像作為貼圖，如下圖所示。
我們使用tdogl:Bitmap來加載“hazard.png”的原始像素?cái)?shù)據(jù)到內(nèi)存中，參見stb_image幫助文檔。然后我們使用tdogl:Texture上傳原始像素?cái)?shù)據(jù)給OpenGL貼圖對(duì)象。幸運(yùn)的是OpenGL中的貼圖創(chuàng)建方法從面世到現(xiàn)在都沒有實(shí)質(zhì)性的變化，所以網(wǎng)上有大量的創(chuàng)建貼圖的好文章。雖然貼圖坐標(biāo)的傳輸方式有變化，但創(chuàng)建貼圖還是跟以前一樣。
以下是tdogl:Texture的構(gòu)造函數(shù)，用于OpenGL貼圖創(chuàng)建。
Texture::Texture(const Bitmap& bitmap, GLint minMagFiler, GLint wrapMode) : _originalWidth((GLfloat)bitmap.width()), _originalHeight((GLfloat)bitmap.height()) { glGenTextures(1, &_object); glBindTexture(GL_TEXTURE_2D, _object); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, minMagFiler); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, minMagFiler); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrapMode); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrapMode); glTexImage2D(GL_TEXTURE_2D, 0, TextureFormatForBitmapFormat(bitmap.format()), (GLsizei)bitmap.width(), (GLsizei)bitmap.height(), 0, TextureFormatForBitmapFormat(bitmap.format()), GL_UNSIGNED_BYTE, bitmap.pixelBuffer()); glBindTexture(GL_TEXTURE_2D, 0); }
貼圖坐標(biāo)
毫無疑問，貼圖坐標(biāo)就是貼圖上的坐標(biāo)。關(guān)于貼圖坐標(biāo)比較奇特的是它們不是以像素為單位。它們范圍是從0到1，(0, 0)是左下角，(1, 1)是右上角。假如你上傳到OpenGL的圖像是顛倒的，那(0, 0)就是左上角，而非左下角。將像素坐標(biāo)轉(zhuǎn)換為貼圖坐標(biāo)，你必須除上貼圖的寬和高。比如，在256*256的圖像中，像素坐標(biāo)(128, 256)的貼圖坐標(biāo)是(0.5, 1)。
貼圖坐標(biāo)通常被稱為UV坐標(biāo)。你也可以叫它們是XY坐標(biāo)，但是XYZ通常被用來表示頂點(diǎn)，我們不希望將這兩者混淆。
貼圖圖像單元
貼圖圖像單元，亦或簡(jiǎn)稱“貼圖單元”，是在OpenGL中略怪異的一部分。你無法直接發(fā)送貼圖給著色器。首先，你要綁定貼圖到貼圖單元，然后呢要發(fā)送貼圖單元的索引給著色器
對(duì)于貼圖單元是有數(shù)量限制的。在低端硬件上，如手機(jī)，它們只有兩個(gè)貼圖單元。既然如此，即使我們有許多的貼圖，我們也只能同時(shí)使用兩個(gè)貼圖單元在著色器中。我們?cè)诒疚闹兄挥玫搅艘粋€(gè)貼圖，所以也只需要一個(gè)貼圖單元，但它可以在多個(gè)不同的著色器中混合。
實(shí)現(xiàn)貼圖
首先，讓我們創(chuàng)建一個(gè)新的全局貼圖。
tdogl::Texture* gTexture = NULL;
我們?yōu)榧虞d“hazard.png”圖片新增一個(gè)函數(shù)。該函數(shù)能被AppMain所調(diào)用。
static void LoadTexture() { tdogl::Bitmap bmp = tdogl::Bitmap::bitmapFromFile(ResourcePath("hazard.png")); bmp.flipVertically(); gTexture = new tdogl::Texture(bmp); }
下一步，我們給每個(gè)三角形的頂點(diǎn)一個(gè)貼圖坐標(biāo)。假如你跟上圖比較過UV坐標(biāo)，就可以看出按順序這個(gè)坐標(biāo)表示（中，上），（左，下）和（右，下）。
GLfloat vertexData[] = { // X Y Z U V 0.0f, 0.8f, 0.0f, 0.5f, 1.0f, -0.8f,-0.8f, 0.0f, 0.0f, 0.0f, 0.8f,-0.8f, 0.0f, 1.0f, 0.0f, };
現(xiàn)在我們需要修改片段著色器，使得它能使用貼圖和貼圖坐標(biāo)作為輸入。下面是新的片段著色器代碼：
#version 150 uniform sampler2D tex; //this is the texture in vec2 fragTexCoord; //this is the texture coord out vec4 finalColor; //this is the output color of the pixel void main() { finalColor = texture(tex, fragTexCoord); }
uniform關(guān)鍵字說明tex是uniform變量。貼圖是一致的，因?yàn)樗腥切雾旤c(diǎn)有相同的貼圖。sampler2D是變量類型，說明它包含一個(gè)2D貼圖。
fragTexCoord是attribute變量，因?yàn)槊總€(gè)三角形頂點(diǎn)是不同的貼圖坐標(biāo)。
texture函數(shù)是用來查找給定貼圖坐標(biāo)的像素顏色。在GLSL舊版本中，你應(yīng)該使用texture2D函數(shù)來實(shí)現(xiàn)該功能。
我們無法直接傳送attribute給判斷著色器，因?yàn)?em style="box-sizing: border-box;">attribute必須首先通過頂點(diǎn)著色器。這兒是修改過的頂點(diǎn)著色器：
#version 150 in vec3 vert; in vec2 vertTexCoord; out vec2 fragTexCoord; void main() { // Pass the tex coord straight through to the fragment shader fragTexCoord = vertTexCoord; gl_Position = vec4(vert, 1); }
頂點(diǎn)著色器使用vertTexCoord作為輸入，并且將它不經(jīng)修改，直接傳給名為fragTexCoord的attribute片段著色器變量。
著色器有兩個(gè)變量需要我們?cè)O(shè)置：vertTexCoordattribute變量和texuniform變量。讓我們從設(shè)置tex變量開始。打開main.cpp，找到Render()函數(shù)。我們?cè)诶L制三角形之前設(shè)置texuniform變量：
glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, gTexture->object()); gProgram->setUniform("tex", 0); //set to 0 because the texture is bound to GL_TEXTURE0
貼圖在沒有綁定到貼圖單元時(shí)，是無法使用的。glActiveTexture告訴OpenGL我們希望使用哪個(gè)貼圖單元。GL_TEXTURE0是第一個(gè)貼圖單元，我們就使用它。
下一本，我們使用glBindTexture來綁定我們的貼圖到激活的貼圖單元。
然后我們?cè)O(shè)置貼圖單元索引給texuniform著色器變量。我們使用0號(hào)貼圖單元，所以我們?cè)O(shè)置tex變量為整數(shù)0。setUniform方法只是調(diào)用了glUnifrom1i函數(shù)。
最后一步，獲取貼圖坐標(biāo)給vertTexCoordattribute變量。為了實(shí)現(xiàn)它，我們需要修改LoadTriangle()函數(shù)中的VAO。之前的代碼是這樣的：
// Put the three triangle vertices into the VBO GLfloat vertexData[] = { // X Y Z 0.0f, 0.8f, 0.0f, -0.8f,-0.8f, 0.0f, 0.8f,-0.8f, 0.0f }; // connect the xyz to the "vert" attribute of the vertex shader glEnableVertexAttribArray(gProgram->attrib("vert")); glVertexAttribPointer(gProgram->attrib("vert"), 3, GL_FLOAT, GL_FALSE, 0, NULL);
現(xiàn)在我們需要改成這樣：
// Put the three triangle vertices (XYZ) and texture coordinates (UV) into the VBO GLfloat vertexData[] = { // X Y Z U V 0.0f, 0.8f, 0.0f, 0.5f, 1.0f, -0.8f,-0.8f, 0.0f, 0.0f, 0.0f, 0.8f,-0.8f, 0.0f, 1.0f, 0.0f, }; // connect the xyz to the "vert" attribute of the vertex shader glEnableVertexAttribArray(gProgram->attrib("vert")); glVertexAttribPointer(gProgram->attrib("vert"), 3, GL_FLOAT, GL_FALSE, 5*sizeof(GLfloat), NULL); // connect the uv coords to the "vertTexCoord" attribute of the vertex shader glEnableVertexAttribArray(gProgram->attrib("vertTexCoord")); glVertexAttribPointer(gProgram->attrib("vertTexCoord"), 2, GL_FLOAT, GL_TRUE, 5*sizeof(GLfloat), (const GLvoid*)(3 * sizeof(GLfloat)));
我們第二次調(diào)用了glVertexAttribPointer，但我們也修改了第一個(gè)調(diào)用。最重要的是最后兩個(gè)參數(shù)。
兩個(gè)glVertexAttribPointer調(diào)用的倒數(shù)第二個(gè)參數(shù)都是5*sizeof(GLfloat)。這是“步長(zhǎng)”參數(shù)。該參數(shù)是表明每個(gè)值開始位置的間隔是多少字節(jié)，或者說是到下個(gè)值開始的字節(jié)數(shù)。在兩個(gè)調(diào)用中，每個(gè)值是5個(gè)GLFloat長(zhǎng)度。舉個(gè)例子，加入我們從“X”開始，往前數(shù)5個(gè)值，我們會(huì)落在下個(gè)“X”值上。從“U”開始也一樣，也是往前數(shù)5個(gè)。該參數(shù)是字節(jié)單位，不是浮點(diǎn)作為單位，所以我們必須乘上浮點(diǎn)類型所占字節(jié)數(shù)。
最后一個(gè)參數(shù)glVertexAttribPointer是一個(gè)“偏移”參數(shù)。該參數(shù)需要知道從開始到第一個(gè)值有多少字節(jié)。開始是XYZ，所以偏移設(shè)置為NULL表示“到開始的距離為0字節(jié)”。第一個(gè)UV不在最前面-中間有3個(gè)浮點(diǎn)的距離。再說一遍，參數(shù)是以字節(jié)為單位，而非浮點(diǎn)，所以我們必須乘上浮點(diǎn)類型所占字節(jié)數(shù)。并且我們必須將數(shù)值轉(zhuǎn)為const GLvoid*類型，因?yàn)樵谂f版本的OpenGL中該參數(shù)有別于現(xiàn)在的“偏移”。
現(xiàn)在，當(dāng)你運(yùn)行程序，你就能看到如本文最上方的那個(gè)三角形。
下篇預(yù)告
下一篇教程中我們會(huì)學(xué)一些矩陣相關(guān)的東西，使用矩陣來旋轉(zhuǎn)立方體，移動(dòng)相機(jī)，和添加透視投影。我們還會(huì)學(xué)習(xí)深度緩沖和基于時(shí)間更新的邏輯，比如動(dòng)畫。
更多OpenGL貼圖相關(guān)資源