S.No.	類型	描述
1	void	表示一個空值
2	bool	接受true或false
3	int	這是一個有符號整數(shù)數(shù)據(jù)類型
4	float	這是一個浮點標(biāo)量數(shù)據(jù)類型
5	vec2, vec3, vec4	正分量浮點矢量
6	bvec2, bvec3, bvec4	布爾矢量
7	ivec2, ivec3, ivec4	有符號整數(shù)矢量
8	mat2, mat3, mat4	2x2, 3x3, 4x4 浮點矩陣
9	sampler2D	訪問2D紋理
10	samplerCube	訪問立方體映射紋理

修飾符

在 OpenGL ES SL 有三大修飾符 -

S.No.	修飾符	描述
1	attribute	這個修飾符充當(dāng)每個頂點數(shù)據(jù)的頂點著色器和OpenGL ES之間的鏈接。此頂點著色器屬性的值在每次執(zhí)行時變化
2	uniform	這修飾符鏈接著色器程序及其WebGL的應(yīng)用程序。不同屬性修飾詞，制服(uniforms)的值不會改變。制服(uniforms)是只讀的; 可以用它們與任何基本數(shù)據(jù)類型來聲明一個變量。示例 - 統(tǒng)一 vec4 光的位置;
3	varying	這個修飾符形成頂點著色器的內(nèi)插數(shù)據(jù)和片段著色器之間的聯(lián)系。它可用于下列數(shù)據(jù)類型- float, vec2, vec3, vec4, mat2, mat3, mat4, 或數(shù)組。示例 - 改變VEC3正常;

頂點著色器

頂點著色器是一個程序代碼，這被稱為在每個頂點。它改變(移動)的幾何形狀(例如：三角形)從一個地方到另一個。它處理每個頂點的數(shù)據(jù)(每個頂點的數(shù)據(jù))，例如頂點坐標(biāo)，法線，色彩，和紋理坐標(biāo)。

在頂點著色器的ES GL代碼，程序員必須定義的屬性來處理數(shù)據(jù)。這些屬性指向一個頂點緩沖區(qū)對象是用JavaScript編寫的。下面的任務(wù)可以使用頂點著色器與頂點變換進行 -

頂點變換
正常轉(zhuǎn)化和正?；?
紋理坐標(biāo)生成
紋理坐標(biāo)變換
光線
彩色材料應(yīng)用

預(yù)定義變量

OpenGL ES SL提供了頂點著色器下面的預(yù)定義變量 -

S.No.	變量	描述
1	highp vec4 gl_Position;	保存頂點的位置
2	mediump float gl_PointSize;	保存變換點的大小。此變量的單位是像素

示例代碼

下面我們來看看頂點著色器的示例代碼。它處理一個三角形的頂點。

attribute vec2 coordinates;

void main(void) {
   gl_Position = vec4(coordinates, 0.0, 1.0);
};

如果你仔細觀察上面的代碼，我們已經(jīng)聲明屬性變量名稱坐標(biāo)。(此變量將使用getAttribLocation()方法, 屬性的坐標(biāo)被作為參數(shù)傳遞給該方法帶著色器程序?qū)ο蟮捻旤c緩存對象相關(guān)聯(lián)。)

在給定的頂點著色器程序的第二步驟，gl_position 變量被定義。

gl_Position

gl_Position 僅在頂點著色器程序的預(yù)定義變量。它包含的頂點位置。在上面的代碼，坐標(biāo)屬性是通過在一個載體形式。作為頂點著色器是一個每頂點操作，為每個頂點計算 gl_Position 值。

之后，gl_position 值用于由原始組件，剪裁，剔除，以及其他有關(guān)的原語操作后的頂點處理是通過固定的功能操作。

我們可以寫頂點著色器的所有可能的操作，我們將在本教程中單獨討論頂點著色器程序。

片段著色器

網(wǎng)狀由多個三角形形成，而每個三角形的表面被稱為一個片段。片段著色器是在每個片段上的每個像素上運行代碼。這是寫入計算并填補單個像素的顏色。下面的任務(wù)可以使用片段著色來進行-

在插值操作
紋理訪問
紋理應(yīng)用
灰蒙
顏色總和

預(yù)定義變量

OpenGL ES SL提供了片段著色器如下面的預(yù)定義變量-

S.No.	變量	描述
1	mediump vec4 gl_FragCoord;	保存幀緩沖器中的片段位置
2	bool gl_FrontFacing;	存放屬于一個前置原語的片段
3	mediump vec2 gl_PointCoord;	存放在一個點(點僅光柵化)片段的位置
4	mediump vec4 gl_FragColor;	保存著色器的輸出片段的顏色值
5	mediump vec4 gl_FragData[n]	持有該片段顏色的色彩附件n

示例代碼

片段著色器的下面的代碼示例演示如何將著色到三角形的每一個像素。

void main(void) {
   gl_FragColor = vec4(0, 0.8, 0, 1);
}

在上面的代碼中，顏色值存儲在變量gl.FragColor。片段著色器程序傳遞的輸出以使用固定函數(shù)變量的管道; FragColor就是其中之一。這個變量保存了該模型的像素的顏色值。

存儲和編譯著色器程序

由于著色器是獨立的程序，我們可以把它們作為一個單獨的腳本，并在應(yīng)用程序中使用?；蛘咭部梢灾苯訉⑺鼈儽４嬖谧址袷剑缦聢D所示。

var vertCode =
   'attribute vec2 coordinates;' +
	
   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 0.0, 1.0);' +
   '}';

編譯著色器

編譯包括以下三個步驟： -

創(chuàng)建Shader對象
所述源代碼以創(chuàng)建著色器對象
編譯程序

創(chuàng)建頂點著色器

要創(chuàng)建一個空的著色器，WebGL提供了一個名為createShader()的方法。它創(chuàng)建并返回著色器對象。它的語法如下-

Object createShader (enum type)

如觀察到的語法，該方法接受預(yù)定義的枚舉值作為參數(shù)。我們有兩種選擇這一點 -

gl.VERTEX_SHADER創(chuàng)建頂點著色器
gl.FRAGMENT_SHADER 創(chuàng)建片段著色器。

附加源到Shader

可以使用Shader對象 shaderSource ()方法創(chuàng)建源代碼附加。它的語法如下 -

void shaderSource(Object shader, string source)

此方法接受兩個參數(shù) -

shader ? 必須創(chuàng)建Shader對象傳遞作為一個參數(shù)。
Source ? 必須以字符串格式傳入著色器程序代碼。

編譯程序

要編譯程序，必須使用 compileShader()方法。它的語法如下 -

compileShader(Object shader)

這個方法接受著色器程序?qū)ο笞鳛閰?shù)。創(chuàng)建著色器程序?qū)ο笾?，附加源代碼，將對象傳遞給該方法。

下面的代碼片段展示了如何創(chuàng)建和編譯一個頂點著色器和片段著色器來創(chuàng)建一個三角形。

// Vertex Shader
var vertCode =
   'attribute vec3 coordinates;' +
	
   'void main(void) {' +
      ' gl_Position = vec4(coordinates, 1.0);' +
   '}';
      
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
 
// Fragment Shader
var fragCode =
   'void main(void) {' +
      ' gl_FragColor = vec4(0, 0.8, 0, 1);' +
   '}';
      
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);

合并程序

創(chuàng)建和編譯兩個著色器程序后，你需要創(chuàng)建一個合并的程序同時包含著色器(頂點和片段)。下面的步驟必須遵循 -

創(chuàng)建一個程序?qū)ο?
附加兩個著色器
連接兩個著色器
使用程序

創(chuàng)建一個程序?qū)ο?

通過使用 createProgram()方法創(chuàng)建程序?qū)ο?。它會返回一個空的程序?qū)ο蟆Ｏ旅媸撬恼Z法-

createProgram();

附加著色器

附加的著色器的使用 attachShader()方法創(chuàng)建的程序?qū)ο?。它的語法如下-

attachShader(Object program, Object shader);

此方法接受兩個參數(shù) -

Program ? 通過創(chuàng)建空的程序?qū)ο笞鳛橐粋€參數(shù)
Shader ? 傳遞的著色器編譯程序中的一個(頂點著色器，片段著色器)

注 - 需要附加兩者都使用這種方法的著色器。

鏈接著色器

使用linkProgram()方法鏈接著色器。通過傳遞到所附加的著色器程序?qū)ο?。它的語法如下-

linkProgram(shaderProgram);

使用程序

WebGL提供了一個名為useProgram()方法。需要鏈接程序時向它傳遞。它的語法如下 -

useProgram(shaderProgram);

下面的代碼片段展示了如何創(chuàng)建，連接和使用組合著色器程序。

var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

上一篇：WebGL顏色下一篇：Html5 Canvas介紹