著色器-絢麗多彩的世界，從你開始衰抑！

在Hello,OpenGL World文章中薄辅，我們并未過多的提及著色器，只是叫讀者將頂點著色器抠璃、片段著色器的相關代碼進行復制使用站楚。雖然我們通過它們繪制出了三角形，但我們并不知道其中代碼的任何含義搏嗡。那么這篇文章我們便來講講這著色器窿春。
著色器是運行在GPU上的把輸入轉(zhuǎn)化為輸出的獨立的小程序。書寫著色器的語言我們叫做GLSL采盒，GLSL是一種類C語言寫成的旧乞。我們通過Hello,OpenGL World中使用的頂點著色器和片段著色器對相關知識進行說明。

// 頂點著色器
#version 300 es
layout (location = 0) in vec4 vPosition;
out vec4 vertexColor;
void main() {
    gl_Position = vPosition;
    vertexColor = vec4(1, 0.8, 0.0, 1.0);
}
// 片段著色器
#version 300 es                               
precision mediump float;
in vec4 vertexColor;
out vec4 fragColor; 
void main() {
    fragColor = vertexColor;
}

從以上代碼我們可看出頂點著色器與片段著色器有許多的相似之處也有不同之處磅氨。

版本聲明

聲明了es的著色語言版本尺栖，用于檢查著色器語言語法，一般來說每個著色器起始于一個版本說明烦租，但是如果著色器不聲明版本號延赌，那么該著色器就會被認定為使用OpenGL ES著色語言1.00的版本除盏，著色器語言的1.00版本適用于OpenGL ES 2.0。我們使用OpenGL ES 3.0版本挫以，所以我們一般聲明其版本為300即可者蠕。（比如GLSL 420版本對應于OpenGL 4.2）

變量和變量類型

在計算機圖形中，兩個基本的數(shù)據(jù)類型組成了變換的基礎：向量和矩陣屡贺。著色器語言包含標量蠢棱、向量和矩陣的數(shù)據(jù)類型。
a.標量
標量包含了C語言中集中基本的數(shù)據(jù)類型甩栈。float泻仙、int、bool量没、uint玉转、double
b.向量
向量包含了由標量組成四種向量類型。vecn殴蹄、ivecn究抓、bvecn、uvecn袭灯，dvecn其中n表示的分量個數(shù)刺下，例如在上面的頂點著色器中聲明的vec4 vertexColor即表示vertexColor是有4個分量的基于浮點的向量類型。

變量構(gòu)造器

OpenGL ES著色器在類型轉(zhuǎn)換方面有非常嚴格的規(guī)則稽荧，變量的賦值橘茉、計算都只能是相同類型的變量，在著色器語言中不允許隱含類型轉(zhuǎn)換姨丈。（類似于Swift）

a.使用構(gòu)造器初始化和轉(zhuǎn)換標量值

float myFloat = 1.0;
float myFloat = 1; // 錯誤畅卓， 類型不正確
bool myBool = true;
int myInt = 1;
int myInt1 = 1.0; // 錯誤， 類型不正確

myFloat = float(myBool); // 將bool類型轉(zhuǎn)為float類型
myFloat = float(myInt); // 將int類型轉(zhuǎn)為float類型

b.構(gòu)造器初始化蟋恬、轉(zhuǎn)換向量數(shù)據(jù)類型

向量構(gòu)造器參數(shù)的傳遞有兩種基本方法：
1.只為向量構(gòu)造器提供一個標量參數(shù)翁潘，則該值用于設置向量所有分量的值。
2.提供多個標量或者向量參數(shù)歼争，向量的值從左至右使用這些參數(shù)設置拜马，因此向量中必須有至少和參數(shù)中一樣多的分量。

vec4 myVec4 = vec4(1.0); // myVec4 = {1.0, 1.0, 1.0, 1.0};

vec3 myVec3 = vec3(1.0, 0.5, 0.0);
vec3 tempVec3 = vec3(myVec3);  // tempVec3 = {myVec3.x, myVec3.y, myVec3.z};
vec2 myVec2 = vec2(tempVec3);  // myVec2 = {tempVec3.x, tempVec3.y};
myVec4 = vec4(myVec2, tempVec3) // myVec4 = {myVec2.xy, tempVec3.xy};

c.輸入與輸出

前面我們已經(jīng)提到過沐绒，著色器是將輸入轉(zhuǎn)化為輸出的一段獨立的小程序來實現(xiàn)數(shù)據(jù)流的傳輸俩莽，恰好GLSL便定義了in和out關鍵字來實現(xiàn)改目的。每個著色器使用in和out來設定輸入和輸出的變量淮悼，只要輸出變量和下一個輸入變量的名稱類型相同咱筛，數(shù)據(jù)就能正常的往下傳遞。例如我們前文貼出的兩個著色器便可以很容易的找到對應的in和out烤黍。

out vec4 vertexColor; // 頂點著色器的輸出變量
in vec4 vertexColor;  // 片段著色器的輸入變量

頂點著色器可以直接在頂點數(shù)據(jù)中直接接收輸入。在前一章渲染三角形時碘裕，我們需要告訴OpenGL如何去解析頂點數(shù)據(jù)，為了定義頂點數(shù)據(jù)如何管理，我們使用location這一元數(shù)據(jù)指定輸入變量巷蚪，當然你也可以使用glGetAttribLocation函數(shù)查詢屬性位置，但為了更好地理解和減少OpenGL的工作量濒翻，我們直接在著色器中設置它們屁柏。
在片段著色器中，我們有一個顏色輸出變量fragColor有送，因為片段著色器需要生成一個最終輸出的顏色淌喻，如果在片段著色其中沒有定義輸出顏色，OpenGL會把你定義的物體渲染成黑色雀摘。因此要實現(xiàn)從一個著色器傳遞數(shù)據(jù)至另一個著色器裸删，在發(fā)送方必須要聲明輸出，在接收方聲明輸入阵赠。

d.Uniform

Uniform是CPU中的應用向GPU中的著色器發(fā)送數(shù)據(jù)的方式涯塔，它聲明的變量是一個全局的變量，也就是說該變量會保存其最新數(shù)據(jù)清蚀，并可被著色器程序的任意著色器在任意階段訪問匕荸。我們適當修改一下繪制三角形所用到的片段著色器，使用Uniform來設置三角形的顏色枷邪。

#version 300 es
precision mediump float;
out vec4 fragColor;
uniform vec4 ourColor;

void main() {
    fragColor = ourColor;
}

需要注意的是榛搔，更新一個Uniform需要在調(diào)用glUseProgram之后，因此齿风，我們可以如下設置Uniform聲明的變量药薯。

int vertexColorLoaction = glGetUniformLocation(self.program, "ourColor");
glUniform4f(vertexColorLoaction, 0.4, 0.3, 0.6, 1);

glUniform函數(shù)有特定的后綴，用于標識設定的Uniform類型救斑。在這里我們是為了設置一個RGBA的顏色童本，所以我們使用glUniform4f函數(shù)。glGetUniformLocation函數(shù)是用于查詢Uniform變量ourColor的位置值脸候，當返回的數(shù)值為-1時穷娱，便代表沒有找到這個位置值，所以為了安全起見运沦，我們可以在此多做一個判斷并打印相關錯誤泵额，為我們調(diào)試提供更多的信息。該案例在Learn_OpenGLES_Demo中的TwoTriangles中携添。

e.main函數(shù)

main函數(shù)是每一個著色器的入口點嫁盲，在這個函數(shù)中處理所有的輸入變量，并將結(jié)果輸出到輸出變量中烈掠。（可聯(lián)想C語言的main函數(shù)）

多屬性的頂點數(shù)據(jù)

在繪制三角形時羞秤，我們只在vertices數(shù)組中配置了位置坐標缸托，那么在這里，我們打算把各個頂點的顏色也配置在vertices數(shù)組中瘾蛋。

    float vertices[] = {
    // 位置              // 顏色
     0.0,  0.5, 0.0,  1.0, 0.0, 0.0,
    -0.5, -0.5, 0.0,  0.0, 1.0, 0.0,
     0.5, -0.5, 0.0,  0.0, 0.0, 1.0
    };

由于我們現(xiàn)在還有顏色的相關信息在頂點數(shù)據(jù)中俐镐，所以我們可以思考該如何書寫我們的頂點著色器。
按照前文的講述哺哼，一個著色器是由版本信息開始的佩抹，所以我們聲明對應的版本信息。

#version 300 es

并且片段著色器需要一個輸入來知道最終的顏色取董，所以在頂點著色器中理應包含一個輸入用于告知片段著色器繪制的最終顏色棍苹。為了更好地熟悉變量構(gòu)造器的相關知識點。我們這里使用vec3類型來聲明輸出的顏色茵汰。

out vec3 ourColor;

并且在前面我們也介紹過廊勃，頂點著色器與片段著色器的一些不同點，頂點著色器可以使用location來指定輸入變量经窖，因為我們的頂點數(shù)據(jù)的坐標包含三個分量坡垫，顏色也含有三個分量，所以我們使用vec3來聲明輸入的值画侣。但要注意的是我們需要設定一下location的值冰悠。

layout (location = 0) in vec3 aPos; // 聲明位置輸入，位置變量的屬性位置值為 0 
layout (location = 1) in vec3 aColor; // 聲明顏色輸入配乱，顏色變量的屬性位置為1

最后便是main函數(shù)溉卓，將處理完的輸入變量的結(jié)果輸出到輸出變量中。

gl_Position = vec4(aPos, 1);
ourColor = aColor;

到這里搬泥，我們自己書寫的一個頂點著色器就完成了桑寨，具體如下：

#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;

out vec3 ourColor;

void main() {
    gl_Position = vec4(aPos, 1);
    ourColor = aColor;
}

在片段著色器方面，因為最終物體繪制的顏色是通過頂點著色器傳入的忿檩，所以片段著色器必然有一個輸入用于接收頂點著色器的輸出尉尾。

in vec3 ourColor;

在此之前，我們還是一樣聲明版本并設置精度燥透。

#version 300 es
precision mediump float;

最后聲明一個輸出的變量沙咏，將接收到的ourColor的值賦值給輸出變量。

out vec4 fragColor;

最后實現(xiàn)main函數(shù)就完成了一個簡單地片段著色器班套。

void main() {
    fragColor = vec4(ourColor, 1.0);
}

在著色器書寫完成后肢藐，我們實現(xiàn)上下文的創(chuàng)建，著色器的創(chuàng)建吱韭，編譯吆豹，鏈接后，還需要告訴OpenGL如何解析頂點數(shù)據(jù)。

VBO內(nèi)存中的數(shù)據(jù)排列（圖片來源于LearnOpenGL CN）

所以調(diào)用頂點數(shù)組指針函數(shù)應該如下：

// 位置屬性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 顏色屬性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3* sizeof(float)));
glEnableVertexAttribArray(1);

小總結(jié)：將多個屬性寫入頂點數(shù)據(jù)中需要注意的是在告訴OpenGL如何解析頂點數(shù)據(jù)時的步進值以及偏差時痘煤，并在書寫頂點著色器時注意location的位置（也可通過函數(shù)獲仍）。
運行程序速勇，得到以下效果：

多個屬性的頂點數(shù)據(jù)

該案例的具體實現(xiàn)LearnShaders，SMLearnShader.fsh坎拐，
SMLearnShader.vsh
學習OpenGL的所有Demo均可在Github下載烦磁。

著色器-絢麗多彩的世界逻族，從你開始蜻底！

著色器-絢麗多彩的世界，從你開始聘鳞！