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

修飾符

在 OpenGL ES SL 有三大修飾符 -

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

頂點(diǎn)著色器

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

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

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

預(yù)定義變量

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

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

示例代碼

下面我們來(lái)看看頂點(diǎn)著色器的示例代碼。它處理一個(gè)三角形的頂點(diǎn)。

attribute vec2 coordinates;

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

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

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

gl_Position

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

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

我們可以寫(xiě)頂點(diǎn)著色器的所有可能的操作，我們將在本教程中單獨(dú)討論頂點(diǎn)著色器程序。

片段著色器

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

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

預(yù)定義變量

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

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

示例代碼

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

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

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

存儲(chǔ)和編譯著色器程序

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

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

編譯著色器

編譯包括以下三個(gè)步驟： -

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

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

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

Object createShader (enum type)

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

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

附加源到Shader

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

void shaderSource(Object shader, string source)

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

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

編譯程序

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

compileShader(Object shader)

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

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

// 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)建和編譯兩個(gè)著色器程序后，你需要?jiǎng)?chuàng)建一個(gè)合并的程序同時(shí)包含著色器(頂點(diǎn)和片段)。下面的步驟必須遵循 -

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

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

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

createProgram();

附加著色器

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

attachShader(Object program, Object shader);

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

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

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

鏈接著色器

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

linkProgram(shaderProgram);

使用程序

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

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介紹

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

WebGL著色器

數(shù)據(jù)類(lèi)型

修飾符

頂點(diǎn)著色器

預(yù)定義變量

示例代碼

gl_Position

片段著色器

預(yù)定義變量

示例代碼

存儲(chǔ)和編譯著色器程序

編譯著色器

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

附加源到Shader

編譯程序

合并程序

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

附加著色器

鏈接著色器

使用程序