沒有WebGL, js 只能在<canvas>繪制二維圖形，有了WebGL, 就可以在上面繪制三維圖形了

WebGL程序?qū)⒓哟謴?qiáng)調(diào)一些關(guān)鍵部分，包括：
WebGL如何獲取<canvas>元素
HTML文件如何引入 WebGL Js 文件
簡單的WebGL繪圖函數(shù)
WebGL中的著色器程序

Canvas是什么

canvas （譯為"畫布"）作為繪畫的地方， 類似地，<canvas>標(biāo)簽定義了網(wǎng)頁上的繪圖區(qū)域
有了<canvas> 就可以使用js(而不是畫筆和顏料)繪制任何你想畫的東西 <canvas>提供一些簡單的繪圖函數(shù)，用來繪制點、線、矩形、圓等等

著色器是什么

WebGL需要兩種著色器

頂點著色器：用來描述頂點特性(如位置、顏色等)的程序
頂點是指二維或三維空間中的一個點，比如二維或三維圖形的端點或交點
片元著色器：進(jìn)行逐片源處理過程如光照的程序
片元是一個WebGL術(shù)語，你可以將其理解為像素（圖像的單元）

初始化著色器

          圖1 WebGL程序的執(zhí)行過程

下圖顯示了輔助函數(shù)initShaders() 的執(zhí)行效果，我們將在第9章研究這個函數(shù)的內(nèi)部細(xì)節(jié)，現(xiàn)在，你只需要知道它在WebGL系統(tǒng)中初始化了著色器，供我們使用即可

         圖2  initShaders()的行為

圖2中的上方圖所示，WebGL系統(tǒng)由兩部分組成，即頂點著色器和片元著色器。在初始化著色器之前，頂點著色器和片元著色器都是空白的，我們需要將字符串形式的著色器代碼從js傳給WebGL系統(tǒng)，并建立著色器，這就是initShaders()所做的事情。注意，著色器運(yùn)行在WebGL系統(tǒng)中，而不是js程序中。
圖2中的下方圖展示了initShaders()執(zhí)行后的情形，著色器程序以字符串的形式傳給initShaders(), 然后在WebGL系統(tǒng)中, 著色器就建立好了并隨時可以使用。如圖所示，頂點著色器先執(zhí)行，它對gl_Position變量和gl_PointSize變量進(jìn)行復(fù)制，并將它們傳入片元著色器，然后片元著色器再執(zhí)行。實際上，片元著色器接收到的是經(jīng)過光柵化處理后的片元值。目前可以簡單理解為這兩個變量從頂點著色器中被傳入了片元著色器。
WebGL程序包括運(yùn)行在瀏覽器中的JavaScript和運(yùn)行在WebGL系統(tǒng)的著色器程序這兩個部分

頂點著色器

let VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0); \n' + //設(shè)置坐標(biāo)
' gl_PointSize = 10.0;\n' + //設(shè)置尺寸
'}\n';

表1 頂點著色器的內(nèi)置變量

和Js不同，GLSL ES是一種強(qiáng)類型的編程語言，也就是說，開發(fā)者需要明確指出某個變量是某種"類型"的，通過為變量指定類型，系統(tǒng)就能夠輕易理解變量中存儲的是何種數(shù)據(jù)，進(jìn)而優(yōu)化處理這些數(shù)據(jù)

表2 GLSE中的數(shù)據(jù)類型

片元著色器

頂點著色器控制點的位置和大小，片元著色器控制點的顏色
// 片元著色器程序
let FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //設(shè)置顏色
'}\n';

片元著色器將點的顏色賦值給gl_FragColor變量, 該變量是片元著色器唯一的內(nèi)置變量，它控制著像素在屏幕上的最終顏色

繪制操作

建立了著色器之后，我們就需要進(jìn)行繪制操作
在繪制之前，首先需要清空繪制區(qū)域，然后，我們使用gl.drawArrays()來進(jìn)行繪制