本系列學習資源來自《html5 與webgl程式設計》 中國工信出版集團 人民郵電出版社
在計算機裡顯示3d圖形,就是說在平面裡顯示三維圖形。
面對計算機在座標系沒有旋轉的情況下，z軸實際上垂直螢幕向裡的。
另外，webgl的y軸正方向是由視窗的下方向上，而2d canvasapi 和 css 變化中的y軸正方向則是由上而下的。
繪製3d圖形的方法有很多種。到目前為止，最常用的方法是網格（mesh）。乙個網格通常由乙個或多個多邊形拼接而成，而這些多邊形是由定義了3d空間位置（x,y,z組）的頂點（vertice）構造出來的。在網格中，最常用的多邊形是三角形和四邊形。3d網格通常簡稱為模型（model）。
除x,y,z這幾個頂點位置資訊屬性之外，這有一些其它屬性被用來描述網格的外觀，包括簡單的色彩屬性和複雜的反射、明暗等屬性。
紋理對映：使用乙個或多個點陣圖來表示外觀資訊
在大多數圖形系統中，網格的外觀屬性統稱材質（material）。材質的展現通常依賴於乙個或多個光源（light）的存在，這些光源定義了乙個場景被照亮的模式。
多數3d系統支援變換（transform）操作，即允許使用相對位置運算來移動網格，而非遍歷所有頂點並確實改變它們的位置數值。
3d變換通常由乙個變換矩陣（transformation matrix）來表示，這是乙個包含一組用於計算轉換後頂點位置的數值運算量。絕大多數webgl變換用乙個4*4矩陣來表示——乙個包含16個數字的、4行4列的二維陣列。 ⎡
⎣⎢⎢⎢
m0m1
m2m3
m4m5
m6m7
m8m9
m10m11
m12m13
m14m15
⎤⎦⎥⎥
⎥ 其中
- m12,m13,m14分別對應x,y,z的平移值。
- m0,m5,m10對應x,y,z的縮放值
- 旋轉值：m1,m2：x軸；m4,m6：y軸；m8,m9：z軸
用這個矩陣去乘乙個三維向量，便可得到變換後的值。
略著色器實現了將網格畫素點投影到螢幕上的演算法。圖形硬體能夠解析頂點、紋理以及其他底層的東西，但並不能處理材質、光源、變換以及相機。這些高階的結構由著色器程式來處理。
是使用可程式設計著色器渲染的webgl水波模擬。
除了webgl，借助css自定義濾鏡（css custom filter） ，基於著色器實現的特效同樣可以應用於dom元素。
基於 HTML5 WebGL 的 3D 機房
用 webgl 渲染的 3d 機房現在也不是什麼新鮮事兒了，這篇文章的主要目的是說明一下，3d 機房中的 eye 和 center 的問題，剛好在專案中用上了，好生思考了一番，最終覺得這個例子最符合我的要求，就拿來作為記錄。這個 3d 機房的 demo 做的還不錯，比較美觀，基礎的互動也都滿足，接下...
基於 HTML5 WebGL 的 3D 機房
用 webgl 渲染的 3d 機房現在也不是什麼新鮮事兒了，這篇文章的主要目的是說明一下，3d 機房中的 eye 和 center 的問題，剛好在專案中用上了，好生思考了一番，最終覺得這個例子最符合我的要求，就拿來作為記錄。這個 3d 機房的 demo 做的還不錯，比較美觀，基礎的互動也都滿足，接下...
基於 HTML5 WebGL 的醫療物流系統
物聯網 iot 簡單的理解就是物體之間通過網際網路進行鏈結。世界上的萬事萬物，都可以通過資料的改變進行智慧型化管理。iot 的興起在醫療行業中具有拯救生命的潛在作用。不斷的收集使用者資訊並且實時的進行診斷，所以未來 iot 肯定在醫療行業的應用會呈覆蓋性。下面是我最近做的乙個醫療物流系統，用來觀察醫...