WebGL是一種3D繪圖標准，這種繪圖技術標准允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，提供硬件3D加速渲染，這樣Web開發人員就可以借助系統顯卡來在瀏覽器里更流暢地展示3D場景和模型了，還能創建復雜的導航和數據視覺化。顯然，WebGL技術標准免去了開發網頁專用渲染插件的麻煩，可被用於創建具有復雜3D結構的網站頁面，甚至可以用來設計3D網頁游戲等等。
渲染流水線設計如下：應用程序層 -> 硬件抽象層 -> 硬件層
為什么要選擇GPU
CPU: 它的優點在於調度、管理、協調能力強，計算能力則位於其次，對同一數據做許多事。
GPU：相當於一個接受CPU調度的“擁有大量計算能力”的員工，對大量數據做同一樣事，圖形處理，矩陣運算，機器學習
Webgl核心要素
- 頂點着色器，片元着色器
- 坐標轉換
- 申請緩存區 像素傳遞
- 光照（光源和反射）
- 紋理（坐標轉換和像素映射）
- 觀察者的視圖矩陣 透視矩陣與正射矩陣
- 圖形變換，平移，縮放，旋轉
- 模型
- 游戲引擎Babylon.js，3D渲染引擎three.js
兩大着色器
頂點着色器（Vertex shader）：描述頂點（像素）特性比如的大小和位置，
片段着色器（Fragment shader）：描述頂點點的顏色信息，處理像素點，使其顯示在屏幕上
坐標系
webgl坐標系：中心原點在canvas坐標系的中心，右手定則坐標，范圍從0到1，紋理坐標系：左下角為原點，范圍從0到1，
canvas坐標系：左上角為原點
本地坐標系：模型被設計時的坐標系
世界坐標系：模型被放入到場景中時，場景的坐標系
光照
每個物體的光照由兩個因素決定：
發出光線的光源的類型，平行光（太陽光）；點光源（人造燈）聚光燈
物體表面如何反射光線，漫反射和環境反射
三維圖形學術語着色：根據光照條件重建‘物體各表面明暗不一的效果’
視角投影
- 正射投影
也稱盒狀空間投影，物體看上去的大小與所在位置沒有關系，適用於建築模型等
- 透視投影
也稱金字塔可視投影。近大遠小，符合人眼觀察
圖形變換
縮放：gl_Position.w中的w值代表縮放比，齊次線性方程里的w
數學表達式：
平移：這個一個逐頂點操作，發生在頂點着色器上，用原始坐標的每個分量加上偏移量， 將聲明的Tx,Ty,Tz偏移數值賦值給gl_Position,
數學表達式：
旋轉：需要對頂點坐標進行三個步驟考慮：
旋轉軸：你要指明通過哪個軸進行旋轉；
旋轉方向：逆時針還是順時針旋轉；
旋轉的角度
利用數學的兩角和公式：
更科學的方式是使用變換矩陣
