教程 27

公告牌技術(shù)與幾何著色器

原文： http://ogldev.atspace.co.uk/www/tutorial27/tutorial27.html

CSDN完整版專欄： https://blog.csdn.net/cordova/article/category/9266966

---

背景

從最初的一系列教程我們已經(jīng)應(yīng)用過了頂點著色器和片段著色器，但事實上我們還忽略了一個非常重要的著色階段，叫做幾何著色器（GS）。幾何著色器在微軟的DirectX 10之后被引入，之后也加入到了核心的OpenGL 3.2中。頂點著色器中是按照頂點一個一個執(zhí)行的，片段著色器則是一個像素一個像素執(zhí)行，而幾何著色器是以圖元為單位執(zhí)行，這意味著在我們繪制三角形時，每次調(diào)用幾何著色器接收到的就是一個三角形，而繪制直線每次調(diào)用收到的就是一條直線，等等。這就給幾何著色器提供了一個看待模型的獨特的角度，開發(fā)者可以知道頂點和頂點之間拓?fù)潢P(guān)系，從而可以基于此開發(fā)一些新的技術(shù)。

頂點著色器總是以一個頂點作為輸入，并對應(yīng)一個頂點作輸出（不可以自行增加或減少頂點），而幾何著色器卻有著特殊的功能，它可以改變經(jīng)過它的圖元，這種改變包括：

• 改變新傳遞進(jìn)來的圖元的拓?fù)浣Y(jié)構(gòu)。幾何著色器可以接收任何拓?fù)漕愋偷膱D元，但只能輸出頂點列表（point lists）、折線（line strip）和三角帶（triangle strips）；
• 幾何著色器接受一個圖元作為輸入，在處理過程中它可以將這個圖元全部丟棄或者輸出一個或更多的圖元（也就是說它可以產(chǎn)生比它得到的更多或更少的頂點）。這個能力被叫做幾何增長（growing geometry）。這一章我們將會利用幾何著色器的這種能力。

幾何著色器是可選擇的。如果我們編譯程序的時候不使用幾何著色器，圖元會直接的從頂點著色器進(jìn)入片元著色器。這就是為什么我們之前并沒有使用頂點著色器，卻可以直接跳過該階段正常繪制出圖形。

三角形列表中的三角形圖元是以每三個頂點一組構(gòu)建的，例如，0-2前三個頂點構(gòu)建起第一個三角形，3-5三個頂點構(gòu)建起第二個三角形，以此類推。為了計算已有頂點所組成的三角形個數(shù)，只要用頂點數(shù)除以3即可（多余的頂點直接拋棄）。但事實上，使用三角形帶構(gòu)建更有效，不需要每個三角形都用專門的三個頂點構(gòu)建，而是在使用三個頂點將第一個三角形構(gòu)建完成后，重復(fù)利用其中的兩個頂點，然后再添加一個頂點即可構(gòu)建第二個三角形。例如0-2三個頂點構(gòu)建起一個三角形后，再添加一個頂點3，1-3三個頂點構(gòu)成第二個三角形，這樣0-3四個頂點即可緊密拼接構(gòu)建起兩個三角形，以此類推，再添加頂點4，2-4三個頂點又構(gòu)成一個三角形等等。也就是說，在第一個三角形使用三個頂點構(gòu)建完成后，每天添加一個頂點即可再構(gòu)成一個三角形。這里有一個例子如下圖：

可以看到，三角帶中7個三角形只用了9個頂點，要是在三角形列表中，9個頂點就只能構(gòu)建3個三角形。

三角帶有一個有關(guān)三角形內(nèi)部環(huán)繞順序的重要性質(zhì)：奇數(shù)三角形的環(huán)繞順序是反向的。這就意味著如下的順序：[0,1,2]，[1,3,2]， [2,3,4]， [3,5,4]，以此類推。下面的圖片顯示了這個順序：

了解了幾何著色器之后，現(xiàn)在看如何利用幾何著色器來實現(xiàn)一種非常有用的熱門技術(shù)：公告板技術(shù)（billboarding）。公告板是一個始終朝向相機(jī)的四邊形，當(dāng)相機(jī)在場景中轉(zhuǎn)動的時候，公告板也會隨著相機(jī)轉(zhuǎn)動保證相機(jī)方向向量始終垂直于公告板的正面。這個和現(xiàn)實中公路邊的公告板類似，公告板的放置方向會讓盡可能多路過的開車司機(jī)看到。有了這種面向相機(jī)的四邊形之后，我們就很容易將怪物角色、樹木等任何場景中重復(fù)性高、數(shù)量多的物體以紋理貼圖的形式直接貼到四邊形公告板上（而不需要復(fù)雜的計算和渲染實際的3d模型），始終朝向相機(jī)。公告板常常用來創(chuàng)建需要大量樹木的森林效果，由于公告板始終朝向相機(jī)，玩家會誤以為看到的物體是有實際深度的，而事實上單純就是個平面而已。每一個公告板只需要4個頂點，因此比起使用大量實際的3d模型代價就小得多了。

在這個教程中，我們創(chuàng)建一個頂點緩沖器，并為公告板存放頂點的世界空間坐標(biāo)，每一個坐標(biāo)就是一個單獨的3維坐標(biāo)點。我們會將這些頂點坐標(biāo)傳送到幾何著色器，然后構(gòu)建相應(yīng)的四邊形作為公告板。這意味著幾何著色器會輸入頂點列表，然后輸出三角形帶。利用三角帶的優(yōu)點我們可以使用四個頂點創(chuàng)建出一個四邊形。

幾何著色器會負(fù)責(zé)調(diào)整四邊形始終朝向相機(jī)，并為每一個輸出的頂點附加紋理坐標(biāo)，這樣片段著色器只需要直接從紋理上采樣就可以得到最終的顏色信息。

現(xiàn)在看怎樣讓公告板總是朝向相機(jī)。在下圖中黑點表示相機(jī)，紅點表示公告板的位置。雖然圖中位置看上去好像在一個平面上，但實際兩個點都在世界空間下，世界空間中任意兩個點都是可能的。

這里創(chuàng)建一個從公告板到相機(jī)的向量：

然后添加一個向量(0,1,0):

對這兩個向量做叉乘，結(jié)果得到一個垂直于這兩個向量所在平面的向量，然后就要沿著這個結(jié)果向量的方向來擴(kuò)展創(chuàng)建我們的四邊形，保證四邊形平面和相機(jī)朝向垂直，這樣才符合我們想要的結(jié)果。同樣的場景下我們可以得到下面這樣（黃色向量是叉乘的結(jié)果向量）：

一個容易讓開發(fā)者疑惑的事情是關(guān)于向量做叉積的順序問題（A叉積B，還是B叉積A？），兩種情況會得到兩個反向的結(jié)果向量。事先知道具體的結(jié)果向量是很關(guān)鍵的，因為我們要這樣輸出頂點，使從相機(jī)的視角看時三角形組成的四邊形呈順時針方向。這里要用到左手法則了：

如果站在公告板的位置（紅點），食指指向相機(jī)，中指指向上方的天空，然后你的大拇指將會沿著“食指”和“中指”叉乘的結(jié)果的方向（這里剩下的兩個手指保持握緊）。此教程中，我們將叉乘的結(jié)果稱為“右”向量，因為從相機(jī)位置看我們的手，‘右’向量是指向右側(cè)的。反過來，“中指”叉乘“食指”又可以產(chǎn)生一個反向的“左”向量。（這里我們使用左手定則的原因是因為我們使用的是左手坐標(biāo)系（Z軸指向屏幕內(nèi)））。在右手坐標(biāo)系中情況就相反了，那樣就該選用右手坐標(biāo)系了。

源代碼詳解

(billboard_list.h:27)

class BillboardList { public:BillboardList();~BillboardList();bool Init(const std::string& TexFilename);void Render(const Matrix4f& VP, const Vector3f& CameraPos);private:void CreatePositionBuffer();GLuint m_VB;Texture* m_pTexture;BillboardTechnique m_technique; };

BillboardList類封裝了創(chuàng)建公告板需要的所有東西，初始化函數(shù)Init()的參數(shù)為一個文件名，文件就是那個作為紋理貼圖貼到公告板上的圖像。Render()渲染函數(shù)在主渲染循環(huán)中被調(diào)用，負(fù)責(zé)設(shè)置狀態(tài)和渲染公告板。這個函數(shù)需要兩個參數(shù)：一個是視圖和投影組合矩陣，一個是相機(jī)的世界坐標(biāo)位置。由于公告板的位置也是定義在世界空間中的，所以我們才直接到了視圖和投影階段，跳過世界空間變換的部分。這個類有三個私有屬性：一個存儲公告板位置的頂點緩沖器，一個指向公告板紋理貼圖的指針，和一個包含相關(guān)著色器的BillboardTechnique公告板類。

(billboard_list.cpp:80)

void BillboardList::Render(const Matrix4f& VP, const Vector3f& CameraPos) {m_technique.Enable();m_technique.SetVP(VP);m_technique.SetCameraPosition(CameraPos);m_pTexture->Bind(COLOR_TEXTURE_UNIT);glEnableVertexAttribArray(0);glBindBuffer(GL_ARRAY_BUFFER, m_VB);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, sizeof(Vector3f), 0); // position glDrawArrays(GL_POINTS, 0, NUM_ROWS * NUM_COLUMNS);glDisableVertexAttribArray(0); }

這個函數(shù)啟用了BillboardTechnique公告板類，并設(shè)置了OpenGL中一些必要的狀態(tài)，繪制頂點且這些頂點之后會在幾何著色器階段轉(zhuǎn)化成四邊形面。在這個Demo中，公告板位置是按照嚴(yán)格的行列順序排列的，因此我們可以行列數(shù)相乘得到頂點的數(shù)量。需要注意，我們在繪制的時候使用的繪制模式為點模式（GL_POINTS），在幾何著色器中要與其對應(yīng)。

(billboard_technique.h:24)

class BillboardTechnique : public Technique { public:BillboardTechnique();virtual bool Init();void SetVP(const Matrix4f& VP);void SetCameraPosition(const Vector3f& Pos);void SetColorTextureUnit(unsigned int TextureUnit);private:GLuint m_VPLocation;GLuint m_cameraPosLocation;GLuint m_colorMapLocation; };

這里是BillboardTechnique的類接口，它只需要三個參數(shù)來完成下面的任務(wù)：視圖和投影組合矩陣、相機(jī)世界空間位置和與公告板綁定的紋理單元的數(shù)量。

(billboard.vs)

#version 330

layout (location = 0) in vec3 Position;void main() {gl_Position = vec4(Position, 1.0); }

這是公告板類的頂點著色器，由于主要工作都將在幾何著色器中完成，因此在這里頂點著色器就不要太簡單了哈哈。頂點緩沖器只包含頂點坐標(biāo)向量，而且這些坐標(biāo)已經(jīng)在世界空間中定義了，所以可以直接將它們傳給幾何著色器，即可。

(billboard.gs:1)

#version 330layout (points) in; layout (triangle_strip) out; layout (max_vertices = 4) out;

公告板技術(shù)的核心就在幾何著色器了，我們分解開一步步來看。開始我們先使用‘layout’關(guān)鍵字聲明一些全局緩沖器。我們要先告訴渲染管線輸入來的參數(shù)結(jié)構(gòu)是點列表，輸出的是三角帶，并且說明輸出的頂點個數(shù)最多為4個。這些關(guān)鍵詞也會提示圖形驅(qū)動器從幾何著色器輸出頂點的最大個數(shù)，提前知道頂點個數(shù)上限可以給驅(qū)動器機(jī)會來優(yōu)化幾何著色器在某些特定情況下的動作。我們知道對于每一個輸入的頂點要輸出的是一個擴(kuò)展的四邊形，因此我們設(shè)置最大頂點數(shù)為4。

(billboard.gs:7)

uniform mat4 gVP; uniform vec3 gCameraPos;out vec2 TexCoord;

幾何著色器得到了世界空間坐標(biāo)，因此他只需要一個視圖和投影組合變換矩陣即可。另外還需要知道相機(jī)的位置來計算如何讓公告板始終朝向它。幾何著色器為片段著色器創(chuàng)建出了紋理坐標(biāo)，因此我們也要聲明紋理坐標(biāo)變量。

(billboard.gs:12)

void main() {vec3 Pos = gl_in[0].gl_Position.xyz;

上面一行代碼是針對幾何著色器獨有的。由于在幾何著色器中執(zhí)行的是一個完整的圖元，因此事實上我們可以訪問組成圖元的每一個頂點，這個通過內(nèi)置的‘gl_in’變量實現(xiàn)。這個變量是一個結(jié)構(gòu)體數(shù)組，每個結(jié)構(gòu)體都包含了寫入到頂點著色器gl_Position中的位置信息。為了訪問頂點信息，我們可以使用要訪問的頂點在圖元中的索引找到。在這個特定的例子中，參數(shù)的輸入結(jié)構(gòu)為點列表，所以每個圖元只有一個可訪問的單獨的點，可以使用'gl_in[0]'獲取它。如果輸入結(jié)構(gòu)是個三角形，我們可能還會使用'gl_in[1]'和'gl_in[2]'來訪問其他點。我么只需要使用頂點位置向量的前三個xyz分量，通過本地變量'.xyz'提取。

vec3 toCamera = normalize(gCameraPos - Pos);vec3 up = vec3(0.0, 1.0, 0.0);vec3 right = cross(toCamera, up);

這里我們利用文章開始背景部分結(jié)尾的原理實現(xiàn)讓公告板朝向相機(jī)。我們將當(dāng)前公告板的位置點到相機(jī)位置的向量和垂直向上的方向向量做叉積，得到從相機(jī)看公告板視角的‘右’向量，然后我們要使用這個向量圍著公告板的位置擴(kuò)展一個四邊形面。

Pos -= (right * 0.5);gl_Position = gVP * vec4(Pos, 1.0);TexCoord = vec2(0.0, 0.0);EmitVertex();Pos.y += 1.0;gl_Position = gVP * vec4(Pos, 1.0);TexCoord = vec2(0.0, 1.0);EmitVertex();Pos.y -= 1.0;Pos += right;gl_Position = gVP * vec4(Pos, 1.0);TexCoord = vec2(1.0, 0.0);EmitVertex();Pos.y += 1.0;gl_Position = gVP * vec4(Pos, 1.0);TexCoord = vec2(1.0, 1.0);EmitVertex();EndPrimitive(); }

頂點緩沖器中的點可以被認(rèn)為是四邊形底邊的中點，我們要從中點創(chuàng)建兩個面朝相機(jī)的正面三角形。開始先用中點減去‘右’向量的一半，從而得到四邊形的左下角。然后通過乘以視圖和投影組合變換矩陣計算該點在裁剪空間的位置，并設(shè)置該點的紋理坐標(biāo)為（0，0），便于將整個紋理完整貼到這個平面上。為了將新產(chǎn)生的頂點傳遞到管線的下一個階段，我們需要調(diào)用內(nèi)置的EmitVertex()函數(shù)。這個函數(shù)調(diào)用后，我們之前寫入gl_Position的數(shù)據(jù)就無效了，因此我們要為其設(shè)置新值。和左下角點產(chǎn)生方法類似的，我們繼續(xù)創(chuàng)建出四邊形左上角和右下角的點，這樣三個點就構(gòu)建出了第一個正面三角形。由于幾何著色器的輸出是三角帶，之后我們只需要另外一個頂點即可構(gòu)建第二個三角形，使用前面三角形的后兩個頂點（四邊形的對角線）和新頂點構(gòu)建。第四個新頂點也是最后一個頂點，即四邊形的右上角。結(jié)束三角帶的構(gòu)建要調(diào)用內(nèi)置的EndPrimitive()函數(shù)。

(billboard.fs)

#version 330uniform sampler2D gColorMap;in vec2 TexCoord; out vec4 FragColor;void main() {FragColor = texture2D(gColorMap, TexCoord);if (FragColor.r == 0 && FragColor.g == 0 && FragColor.b == 0) {discard;} }

片段著色器很簡單，它的主要工作是使用幾何著色器創(chuàng)建的紋理坐標(biāo)進(jìn)行紋理采樣。這里有一個新特性：內(nèi)置的關(guān)鍵字'discard'用于在某些情況下將某些像素片元完全丟棄。這個教程中我們用了Doom中地獄騎士的圖片，展示黑色背景下的怪物場景，但是直接貼上整張圖片會有黑色的背景，就是說公告板內(nèi)容比怪物要大，怪物背景不是透明的，我們不希望這樣，因此我們可以檢測文素的顏色，如果是黑色就直接拋棄該像素，這樣就會只顯示怪物了。可以嘗試注釋掉'discard'語句看效果有什么不同。

總結(jié)

以上是生活随笔為你收集整理的opengl 纹理贴到对应的位置_一步步学OpenGL(27) -《公告牌技术与几何着色器》的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。