WebGL（Web圖形庫(kù)）是一個(gè)JavaScript API，可在任何兼容的Web瀏覽器中渲染高性能的交互式3D和2D圖形，而無(wú)需使用插件。WebGL通過(guò)引入一個(gè)與OpenGL ES 2.0非常一致的API來(lái)做到這一點(diǎn)，該API可以在HTML5
<canvas>元素可被用來(lái)通過(guò)JavaScript（Canvas API 或 WebGL API）繪制圖形及圖形動(dòng)畫(huà)。")元素中使用。 這種一致性使API可以利用用戶設(shè)備提供的硬件圖形加速。
（PS: 引用來(lái)源于mdn官方文檔）
WebGL可以簡(jiǎn)單理解為主要是對(duì)3D繪制在網(wǎng)頁(yè)端的圖形規(guī)范，只需支持的瀏覽器即可進(jìn)行訪問(wèn)體驗(yàn)，無(wú)需額外的插件or本地應(yīng)用程序。
基礎(chǔ)概念
- 三維坐標(biāo)系（x/y/z軸）；頂點(diǎn)→多邊形→網(wǎng)格/模型；紋理映射（位圖）、材質(zhì)（凹凸效果、輝光效果等）、光源；變換（模型縮放、旋轉(zhuǎn)、位移等）通過(guò)矩陣；相機(jī)、透視、視口、投影（三維需要投射成二維展示）；著色器。
- 使用WebGL把圖形渲染到頁(yè)面中，至少需要執(zhí)行以下步驟
- 創(chuàng)建一個(gè)畫(huà)布元素（canvas）；
- 獲取畫(huà)布的上下文(content)；
- 初始化視口；
- 創(chuàng)建一個(gè)或者多個(gè)包含渲染數(shù)據(jù)的數(shù)組（通常是頂定數(shù)組）；
- 創(chuàng)建一個(gè)或者多個(gè)矩陣，將頂點(diǎn)數(shù)組變換到屏幕空間中；
- 創(chuàng)建一個(gè)或者多個(gè)著色器來(lái)實(shí)現(xiàn)繪制算法；
- 繪制。
參考書(shū)目
- 《WebGL入門(mén)指南》
