要使用
WebGL進行繪圖就必須使用著色器。在代碼中粱挡，著色器程序是以字符串的形式“嵌入”在JavaScript文件中的酱讶，在程序真正開始運行前就已經(jīng)設(shè)置好了唤衫。
WebGL需要兩種著色器：頂點著色器和片元著色器。
- 頂點著色器
用來描述頂點的位置铐殃、顏色等特性海洼。頂點是指二維或三維空間中的一個點，比如二維或三維圖形的端點或交點富腊。
- 片元著色器
進行逐片元處理過程如光照的程序坏逢。片元是一個WebGL術(shù)語，你可以將其理解為像素赘被。
- GLES中的數(shù)據(jù)類型
| 類型 | 描述 |
|---|---|
| float | 表示浮點數(shù) |
| vec4 | 表示由四個浮點數(shù)組成的矢量 |
- 片元著色器的內(nèi)置變量
| 類型和變量名 | 描述 |
|---|---|
| vec4 gl_FragColor | 指定片元顏色（RGBA格式） |
// Vertex shader program
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0;\n' + // Set the point size
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // Set the point color
'}\n';
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw a point
gl.drawArrays(gl.POINTS, 0, 1);
}
- gl.drawArrays()
gl.drawArrays(gl.POINTS, 0, 1);
gl.drawArrays()是一個強大的函數(shù)是整，它可以用來繪制各種圖形。因為我們繪制的是單獨的點民假，所以設(shè)置第1個參數(shù)為gl.POINTS浮入；設(shè)置第2個參數(shù)為0，表示從第1個頂點開始畫起羊异；第3個參數(shù)count為1事秀，表示在這個簡單的程序中僅繪制了1個點。
當(dāng)程序調(diào)用gl.drawArrays()時野舶，頂點著色器將被執(zhí)行count次易迹，每次處理一個頂點。
WebGL程序包括運行在瀏覽器中的JavaScirpt和運行在WebGL系統(tǒng)的著色器程序這兩部分平道。
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
gl.vertexAttrib3f()是一系列同族函數(shù)中的一個睹欲，該系列函數(shù)的任務(wù)就是從JavaScript向頂點著色器中的attribute變量傳值。gl.vertexAttrib1f()傳輸1個單精度值(v0)一屋，gl.vertexAttrib2f()傳輸2個值(v0和v1)窘疮，而gl.vertexAttrib4f()傳輸4個值(v0、v1陆淀、v2和v3)
3f中的3代表參數(shù)個數(shù)考余，f表示浮點數(shù)，如果是i則表示整數(shù)轧苫。如果函數(shù)名后面跟著一個v,就表示函數(shù)也可以接收數(shù)組作為參數(shù)楚堤。在這種情況下疫蔓，函數(shù)名中的數(shù)字表示數(shù)組中的元素個數(shù)。
var positions = new Float32Array([1.0,2.0,3.0,1.0])
gl.vertexAttrib4fv(a_Position, positions)
