WebGL關於着色器傳值的幾種方式總結

最近兩週都在看WebGL，至於爲什麼要看WebGL？？?我是想看Cesium源碼，發現要想看懂Cesium的源碼。需要WebGL知識儲備，因爲Cesium是基於WebGL開發的三維api封裝，但是如果想完全弄懂Cesium,僅靠學習WebGL是無法做到的，需要了解OpenGL、計算機圖形學、數字地球等。關於webgis發展認爲未來三維GIS應該比較火，二維方面的發展已經相當成熟了，雖然三維現在發展也不錯。但是和二維的比還差點意思，說的有點多了，關於WebGL我推薦《WebGL編程指南》這本書，對於入門WebGL這本書可以說做的非常。每個函數參數都給你解釋的明明白白，其中也穿插一些GLSLES、線性代數、向量一些知識，可以說我覺得WebGL初級必備。下面講單個值傳入和多個值的傳值：

一、三個變量限定詞的概念
1、Attribute
用途：傳輸那些和頂點數據有關的數據（例如，頂點位置、法向量、頂點顏色<每個頂點都對應一個顏色>）
2、uniform
用途：傳輸那些對於所有頂點都相同（或者與頂點無關數據）=》例如：旋轉、平移、縮放的矩陣，每個頂點位置都要用到同樣的矩陣來獲取變換的位置，對於每一個頂點該矩陣都一樣，或者光線的顏色，壓根和頂點沒有關係
3、varying
用途：從頂點着色器，像片源着色器傳遞數據 。例如：紋理座標等，一般通過attribute傳給varying
以上三個變量限定詞都是全局屬性。
二、單值傳入（分別以頂點、入射光顏色）
（attribute 傳值）
1、聲明變量

//頂點着色器代碼
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\n' + // attribute variable
  'void main() {\n' +
  '  gl_Position = a_Position;\n' +
  '  gl_PointSize = 10.0;\n' +
  '}\n

2、獲取attribute變量存儲地址

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

3、將頂點傳給attribute變量（vertexAttrib3f爲組函數）

gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

(uniform 傳值)
1、聲明變量

'uniform vec3 u_LightColor;\n'

2、獲取uniform變量存儲地址

var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');

3、將入射光顏色傳給uniform（這裏uniform3f也是組函數）

gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0);

（varying 傳值）

三、多值傳入
（attribute 傳值）
1、聲明變量

'attribute vec4 a_Position;\n' 

2、創建緩衝區對象

var vertexBuffer = gl.createBuffer();

3、綁定緩衝區對象

 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

4、將數據寫入緩衝區對象

gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

5、獲取attribute變量存儲地址

 var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

6、將緩衝區對象分配給attribute變量

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

7、開啓attribute變量

gl.enableVertexAttribArray(a_Position);

(uniform 傳值)
將第六步改成下面代碼，第七步去掉即可

 gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements);