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

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

Canvas是什么

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

著色器是什么

WebGL需要兩種著色器

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

初始化著色器

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

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

         圖2  initShaders()的行為

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

頂點(diǎn)著色器

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 頂點(diǎn)著色器的內(nèi)置變量

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

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

片元著色器

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

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

繪制操作

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