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