WebGL著色器

數據類型

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

修飾符

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

頂點著色器

• 頂點變換
• 正常轉化和正常化
• 紋理座標生成
• 紋理座標變換
• 光線
• 彩色材料應用

預定義變數

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);
};

gl_Position

片段著色器

• 在插值操作
• 紋理訪問
• 紋理應用
• 灰蒙
• 顏色總和

預定義變數

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);
}

存儲和編譯著色器程式

var vertCode =
   'attribute vec2 coordinates;' +

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

編譯著色器

• 創建Shader對象
• 所述源代碼以創建著色器對象
• 編譯程序

創建頂點著色器

Object createShader (enum type)

• gl.VERTEX_SHADER創建頂點著色器

• gl.FRAGMENT_SHADER 創建片段著色器。

附加源到Shader

void shaderSource(Object shader, string source)

• shader − 必須創建Shader對象傳遞作為一個參數。

• Source − 必須以字串格式傳入著色器程式代碼。

編譯程序

compileShader(Object shader)

// 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);

合併程式

• 創建一個程式對象
• 附加兩個著色器
• 連接兩個著色器
• 使用程式

創建一個程式對象

createProgram();

附加著色器

attachShader(Object program, Object shader);

• Program − 通過創建空的程式對象作為一個參數

• Shader − 傳遞的著色器編譯程序中的一個(頂點著色器，片段著色器)

鏈接著色器

linkProgram(shaderProgram);

使用程式

useProgram(shaderProgram);

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

上一篇： WebGL幾何體 下一篇： WebGL關聯屬性和緩沖區對象