WebGL介紹

目錄

• 什麼是WebGL🤔
• WebGL和canvas比較👊
• WebGL的原理☀️
• WebGL是簡單的😁
• WebGL是複雜的😭

什麼是WebGL

• WebGL（全寫Web Graphics Library）是一種3D繪圖標準
• WebGL在電腦的GPU中運行
• WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染

舉個例子

示例

性能

當執行大量繪製任務時，WebGL的性能約是canvas的3~5倍😲(數據供參考)

WebGL的原理☀️

program（着色程序）= 頂點着色器 + 片段着色器

• WebGL在GPU中運行。所以須要使用可以在GPU上運行的代碼。這樣的代碼須要提供成對的方法。每一對組合起來稱做一個program
• 頂點着色器：計算頂點的位置，
• 片段着色器：計算出當前繪製圖元中每一個像素的顏色值

舉個例子

示例

圖例

矩陣變換

局部座標 –(模型變換)-> 世界座標 –(視圖變換)-> 視圖座標 –(投影變換)–> CCV 座標

以(0,1,0)爲例，它的齊次向量爲(0,0,1,1)，變化過程以下：

參考

• 計算機圖形學
• 變換矩陣@維基百科
• 透視投影詳解

深度檢測

當兩個表面重疊時，前面的模型會擋住後面的模型

紋理

爲每一個頂點指定一個紋理座標(在(0,0)與(1,1,)的正方形中)，而後傳入紋理對象。片元着色器拿到的是對應片元的內插後的紋理座標，就利用這個紋理座標去紋理對象上取顏色，再畫到片元上。

混合與蒙版

混合機制與深度檢測相似，也發生在試圖向某個已填充的像素填充顏色時。深度檢測經過比較z值來肯定像素的顏色，而混合機制會將兩種顏色混合

---

光照

WebGL 沒有爲光照提供任何內置的方法，須要開發者在着色器中實現光照算法 光是有顏色的，模型也是有顏色的。在光照下，最終物體呈現的顏色是二者共同做用的結果。

複雜模型

複雜模型可能有包括子模型，子模型可能與父模型有相對運動。

WebGL是簡單的

它作的是一件簡單的事，它僅僅運行用戶提供的兩個方法，一個頂點着色器和一個片段着色器，去繪製點，線和三角形。

WebGL是複雜的

作複雜的三維效果，須要複雜的「着色器」。全部空間座標計算，着色器的設計，都須要程序本身作複雜的算法處理。

WebGL庫

目前最流行的 WebGL庫 ThreeJs

調試工具

比較成熟的 WebGL 調試工具是WebGL Inspector

總結

WebGL常常被當成3D API，人們總想「我可使用WebGL和一些神奇的東西作出炫酷的3D做品」。 事實上WebGL僅僅是一個光柵化引擎，它能夠根據你的代碼繪製出點，線和三角形。想要利用WebGL完成更復雜任務，取決於你可否提供合適的代碼，組合使用點，線和三角形代替實現。

爲何沒有在平常開發中大規模的應用呢❓

• WebGL是直接調用底層的OpenGL，這使得WebGL的接口十分晦澀，對於通常的Web開發人員來講，門檻比較高。
• WebGL的兼容性並很差

參考資料

• webglfundamentals.org/webgl/lesso…
• threejs.org/
• taobaofed.org/blog/2015/1…