與其說是webgl，倒不如說是圖形學，畢竟語言只是一個工具。
用過three.js或者其他三維庫來開發三維程序的都知道，對於標題所指，其實實現起來很簡單，拿three.js來說，一段很簡短的代碼就能實現：
這里也感謝作者和其他開源工作者做出的貢獻，因為他們的付出使得我們在web端開發三維程序的門檻大大降低，向大佬們致敬！！！
那么這么一個簡單的立方體，究竟是怎樣通過webgl實現的呢，今天，我們就來稍加說明一下(默認您已經了解基本的webgl和圖形學相關知識，如果沒有，請先看完《webgl權威指南》這本書)
1.MVP矩陣
即modelMatrix(模型矩陣)、viewMatrix(視圖矩陣)、projMatrix(投影矩陣)
模型矩陣控制模型的旋轉、平移；
視圖矩陣控制相機相關的參數(position、lookAt、空間坐標系XYZ軸的方向)；
投影矩陣控制三維物體觀看的效果(透視相機、正交相機)。
所以一個空間三維幾何體，在這些矩陣的共同作用下，就展示在我們面前了
注意:矩陣乘法不滿足交換律，所以三個矩陣相乘的順序不能顛倒
gl.position = projMatrix * viewMatrix * modelMatrix * vec4(a_Position,1.0);
three.js中將模型矩陣和視圖矩陣的乘積作為參數傳到着色器里，所以我們經常會看到three.js的shader材質中頂點着色器中會有這樣固定的一段代碼：
2.構建立方體mesh
我們知道，三維場景中的每個mesh都是按照三角面來繪制的，所以，如果一個立方體長這樣的話：
雖然每個面只有4個頂點，但是因為要按照三角面去繪制，那么畫一個矩形面要傳6個頂點數據
正反面區分：
繪制三角形，頂點順序還是有所講究的，
0-1-3 和 0-3-1繪制出來的三角面是有區別的，那就是順時針和逆時針的區別，
所以，我們繪制面的時候，腦海中想象的要是外面兒並且按照逆時針繪制三角面，這樣這個面才會如我們所想的那樣展現出來。
所以繪制一個立方體要有如下步驟：
6個矩形面--->12個三角面--->36個頂點（三角面繪制的時候要按照逆時針順序添加頂點）
最終效果:
