1. 概述
在上一篇教程《WebGL簡易教程(一)：第一個簡單示例》中，通過一個繪制點的例子，對WebGL中的可編程渲染管線有了個基本的認識。在之前繪制點的例子中，點的位置，點的大小，點的顏色，都是固定寫在着色器中的，這樣的程序是缺乏可擴展性的。
比如我想繪制一張地形（DEM），平時地形數據是保存在地形文件之中的。被程序加載之后，數據信息首先要被讀取到內存，然后傳遞給顯存，最后由顯卡進行繪制。渲染管線之所以靈活強大，正是由於可以向負責繪制工作的着色器傳遞數據。
2. 示例：繪制一個點(改進版)
在上一篇繪制點例子之上進行改進，改進后的HelloPoint1.js代碼如下：
// 頂點着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // attribute variable
'void main() {\n' +
' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' + // uniform変數
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' + // Set the point color
'}\n';
function main() {
// 獲取 <canvas> 元素
var canvas = document.getElementById('webgl');
// 獲取WebGL渲染上下文
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// 初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// 獲取attribute變量的存儲位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
// 將頂點位置傳輸給attribute變量
gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0);
//獲取u_FragColor變量的存儲地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
//將點的顏色傳入到u_FragColor變量中
gl.uniform4f(u_FragColor, 0.0, 0.8, 0.0, 1.0);
// 指定清空<canvas>的顏色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// 繪制一個點
gl.drawArrays(gl.POINTS, 0, 1);
}
1) attribute變量
在頂點着色器中，可以看到聲明了一個attribute的全局變量a_Position，並且將這其賦值給gl_Position：
// 頂點着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' + // attribute variable
'void main() {\n' +
' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
attribute是glsl中三種變量聲明之一，代表的是與頂點相關的數據，只能用在頂點着色器中。這個變量存儲了從外部傳輸進頂點着色器的數據。
在shader中定義好attribute變量之后，還需要通過JS與shader進行交互。通過WebGL的渲染上下文變量gl，可以得到獲取attribute變量的存儲地址的方法getAttribLocation（），其定義如下：
通過這個函數，獲取着色器中attribute變量的位置：
// 獲取attribute變量的存儲位置
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
獲取地址之后，就可以向attribute變量傳送數據了。通過使用gl. vertexAttrib3f()函數來向着色器傳入值。這里將想要繪制點的位置傳送給頂點着色器。
// 將頂點位置傳輸給attribute變量
gl.vertexAttrib3f(a_Position, 0.5, 0.5, 0.0);
其函數定義如下：
注意這個函數是有一系列的同族函數，都是以基礎函數名+參數個數+參數類型來命名的，以應付傳輸不同的數據。具體可以查閱WebGL的API。
2) uniform變量
同樣的，在片元着色器中，聲明了一個全局的uniform變量u_FragColor，並將其賦值給gl_FragColor：
// 片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' + // uniform変數
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' + // Set the point color
'}\n';
uniform是glsl中另外一種變量聲明，表示的是JavaScript程序向頂點着色器和片元着色器傳輸的一致的(不變的)數據；也就是是說這種變量既可以用在頂點着色器也可以用於片元着色器。
與attribute變量類似，uniform變量也是先獲取其地址，然后向其傳值。這里將想要繪制的顏色傳送給片元着色器：
//獲取u_FragColor變量的存儲地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
//將點的顏色傳入到u_FragColor變量中
gl.uniform4f(u_FragColor, 0.0, 0.8, 0.0, 1.0);
可以看到uniform變量是通過gl.getUniformLocation（）函數獲取地址，gl.uniform4f()變量傳送數據的。它們的函數定義如下：
3) varying變量
除了attribute變量和uniform變量之外，還有一種varying變量，它表示的是從頂點着色器流向片元着色器可變的變量。這一點會在以后講到。如下所示為向着色器傳輸數據的方式：
3. 結果
再次打開HelloPoint1.html，其顯示結果如下：
可以看到點的位置發生了變化，同時顏色也從紅色變成了綠色。位置信息和顏色信息不再是硬編碼在着色器中，而是從外部傳入的。
4. 參考
本來部分代碼和插圖來自《WebGL編程指南》。