什么是WebGL？
WebGL是一項使用JavaScript實現3D繪圖的技術，瀏覽器無需插件支持，Web開發者就能借助系統顯卡（GPU）進行編寫代碼從而呈現3D場景和對象。
WebGL基於OpenGL ES 2.0，OpenGL ES 是 OpenGL 三維圖形 API 的子集，針對手機、平板電腦和游戲主機等嵌入式設備而設計。瀏覽器內核通過對OpenGL API的封裝，實現了通過JavaScript調用3D的能力。WebGL 內容作為 HTML5 中的Canvas標簽的特殊上下文實現在瀏覽器中。
WebGL標准由科納斯組織（Khronos Group）開發和維護，Google、Mozilla、Opera和Apple 等瀏覽器廠商都是其中的成員，為這一標准做出了顯著貢獻。
WebGL支持現狀
目前所有的主流桌面瀏覽器都已經支持WebGL，但手機端的瀏覽器只有部分最新版支持。
桌面瀏覽器
- Mozilla Firefox 4+
- Google Chrome 8+
- Internet Explorer 11+
- Safari 5.1+
- Opera 12+
移動瀏覽器
- Firefox 25+
- Google Chrome 31+
- Opera Mobile 12+
- Android Browser 暫不支持
- iOS Safari暫不支持
- IE Mobile 暫不支持
3D圖形學
在真正開始學習WlebGL之前，我們還要改了解下3D圖形學，有助於接下來的3D圖形編程。
3D坐標系
笛卡兒坐標系相比大家都很熟悉，即數學中常見的直角坐標系，由兩條互相垂直的坐標軸組成，通常標記為x軸和y軸。這種坐標系可以用於定義頁面中元素的坐標位置。
而在繪制3D圖形時，除了x軸和y軸，我們還需要一個z軸，用於表示深度，即3D物體距離屏幕的距離。
點、線、面和網格
3D空間內的所有物體都是由點、線及面組成。一個點由3個值組成 - x、y、z，表示3D空間內的唯一位置。2個點可以連成一條線，3個點我們就可以形成一個平面。多個面相互拼接就組成了網格。
我們常見的球體看起來很圓滑，其實是由很多個點、線、面組合而成的。
紋理貼圖及材質
網格本身是沒有紋理和材質的。
紋理可以定義一個網格表面的外觀，可以是純色或者是填充位圖，甚至更加復雜。
材質就是網格表面的特性，模型外表是否透明、是否會反射等都是通過網格的材質所定義的。
變換和矩陣
3D網格的形狀由頂點位置決定。模型變換就是利用矩陣對模型的大小、位移、旋轉等進行操作。如果你不了解矩陣也無須擔心，許多WebGL庫都能幫助我們完成相應的操作。
攝像機、視口和投影
我們在Canvas上看到的3D空間並非一個真實的3D空間，而是用數學算法將模擬的3D空間投射到2D視口的圖像而已。投影就是將模擬的三維空間內的物體映射到屏幕上生成一個二維圖像的過程。投影分為正交投影和透視投影，這也就是攝像機的實現原理。
攝像機是用戶觀察場景的眼睛，攝像機的視野決定了透視關系和我們在Canvas上看到的內容。
着色器
為了最終的渲染模型，開發者必須精確的定義定點、變換、材質和相機之間的關系。這就是由着色器來完成的。着色器包含了將模型投射到屏幕上的算法，通常是由類C語言編寫，編譯並運行在圖形處理單元(GPU)中。