如果你對用程式碼繪圖感興趣，WebGL是最容易入手的一個切入口。一個瀏覽器、一個編輯器，再略懂一些前端開發的知識，就可以開始繪圖了。
使用WebGL把圖形渲染到頁面中，需要執行如下步驟：
建立一個畫布元素；
獲取畫布的上下文；
初始化視口；
建立一個或多個包含渲染資料的陣列（通常是頂點陣列）；
建立一個或多個矩陣，將頂點陣列變換到螢幕空間中；
建立一個或多個著色器來實現繪製演算法；
使用引數初始化著色器
繪製
畫布元素與繪製上下文
首先要建立一個canvas元素，獲取到canvas的DOM物件後，在使用WebGL的
getContext()
獲取上下文。
建立canvas元素、獲取上下文
初始化視口
設定視口，需要將WebGL的上下文和canvas物件作為引數傳入，
viewport(x,y,width,heigt)
方法有四個引數，分別表示：
x：視口的左下角水平座標。預設值：0。
y：視口的左下角垂直座標。預設值：0。
width：設定視口的寬度。預設值：canvas的寬度。
height：設定視口的高度。預設值：canvas的高度。
初始化視口
Buffer、ArrayBuffer和型別化陣列
WebGL的繪製是由圖元組成的，圖元的型別包括三角形（三角形陣列）、三角形帶、點和線。圖元使用的資料組稱為Buffer，它定義了頂點的位置。每個頂點的位置都包含x、y、z值。
三角形帶是一種基本的渲染圖元，它先使用前三個頂點畫出第一個三角形，再使用後兩個頂點與下一個頂點結合繪製一個三角形，以此類推。
建立頂點陣列
建立矩陣
在繪製正方形之前，先要建立兩個矩陣。首先，我們需要一個矩陣來定義正方形在3D座標系中相對於相機的位置。這個矩陣也被稱為模型檢視矩陣，它綜合了模型的變換和相機之間的關係。
第二個矩陣是投影矩陣，這個矩陣將被用於在著色器中將相機空間模型的3D座標轉換為繪製視口的2D座標。投影矩陣難以想象，幾乎沒有人會手動編寫計算投影矩陣的程式碼，而都是由框架來自動完成的。
模型檢視矩陣、投影矩陣
建立著色器
著色球定義瞭如何將3D物體的畫素切實地繪製在螢幕上，一個著色器可以同時應用在多個物體上。
著色器由兩個部分組成：頂點著色器和片元著色器。頂點著色器負責將物體的座標轉換到2D空間，片元著色器負責生成最後的顏色輸出到每個轉換後的頂點元素，而顏色的輸入則可以是純色、紋理、光源、材質。
建立著色器
頂點著色、片元著色器執行程式碼段
初始化著色程式
繪製圖元
接下來編寫繪製函式。首先，函式會先清理一下畫布並用黑色作為背景色。然後將頂點陣列和矩陣作為輸入傳遞給著色器。最後呼叫
drawArrays()
方法繪製正方形。
繪製圖元
函式呼叫
函式呼叫
圖片呈現
