模型變換（Model Transform）
首先，建立一個模型的時候，每個模型有自己的座標以及對應的座標原點。比如一個立方體，其座標原點通常位於立方體的中心（當然也可以位於其他地方），整個立方體上的頂點都相對於這個中心點而設置。當我們想移動這個立方體的時候，就需要一個矩陣來進行變換，這就是模型矩陣（model matrix）。當我們用模型矩陣乘上原有座標點矩陣之後，所得到的新的座標點便是經過移動之後的，相對於一個虛擬的世界座標系的座標點。參考下圖：
物體座標對於每個物體來說都是獨立的、獨有的。比如有兩個立方體，兩個立方體有各自的物體座標。但是它們只有一個共享的世界座標，有了世界座標，物體和物體纔有了相對位置的關係。
視圖變換（View Transform）
下面的變換叫做視圖變換，這是將之前的座標系變換到一個新的，以視圖爲基準原點的座標系。你可以把這個視圖座標系理解成我們的眼睛或者一部照相機，隨着眼睛或照相機在物體不同位置的移動，這個座標系都是在實時變化的。這個變換過程使用的矩陣稱爲視圖矩陣（view matrix）。經過變換之後的座標點是相對於視圖座標系的原點的。如下圖：
投影變換（Projection Transform）
下面一個變換稱作投影變換。這個過程會決定到底渲染多少內容以及如何將3D座標顯示在2D屏幕上。其中有一個概念稱作視錐體（frustum），它包含六個平面（近平面、遠平面、上平面、下平面、右平面和左平面），如下圖所示：
projection-transform
這六個平面是通過投影矩陣（projection matrix）決定的。經過變換之後，位於這個視錐體以外的頂點都會被剪裁掉，所得的座標結果成爲裁剪座標（clipping coordinates）。視錐體的形狀決定了3D到2D的投影類型，如果近平面和遠平面尺寸一致，那麼物體上的頂點不論遠近都以統一的方式投影在屏幕上，這就是正交投影（orthographic projection）。否則就是透視投影（perspective projection）。簡單來說，正交投影沒有近大遠小的效果，而透視投影則有。
到現在爲止，我們始終都在操作齊次座標，所以裁剪座標也是個四元組：x、y、z和w。裁剪是通過將x、y、z的值與w的值作比較進行的，如果某個頂點的x、y、z其中任何一個值大於 +w 或者小於 -w，則該頂點就會被裁掉。
透視除法（Perspective division）
一旦決定了有多少頂點會被渲染之後，視錐體會映射到近平面上以便展示2D圖像。在屏幕上顯示的內容就是近平面上的內容。WebGL提供一個與硬件無關的座標系統，用來描述映射到近平面上的座標，這被稱作是規範化設備座標（Normalized Device Coordinates），簡稱NDC。
規範化設備座標是通過將裁剪座標除以w來獲得的。所以這一步操作被叫做透視除法。經過除法後，4元組的座標轉變爲3元組的座標，因此NDC的頂點僅包含x、y和z三個信息。其中x、y表示規範化2D平面上的座標，z則表示深度信息，也就是遠近關係。現在WebGL就可以根據x和y來顯示頂點，並根據z信息來確定覆蓋、遮擋關係。
透視除法將視錐體變換到一個立方體空間，立方體空間座標範圍從 [-1, -1, -1] 到 [1, 1, 1]。另外z軸方向也進行了翻轉。如下圖所示：
這就是爲什麼默認的WebGL程序在屏幕上顯示的時候，x和y的座標範圍都是-1到1，不論canvas元素尺寸和比例是什麼樣的。
視口變換（Viewport Transform）
最後，NDC會映射到視口座標（viewport coordinates）。視口座標就是最終顯示到屏幕元素中的座標，在HTML5中使用的是canvas元素。如下圖：
由於這個座標變換隻涉及x和y，因此沒有矩陣參與，它是通過WebGL的viewport方法來完成的。具體計算公式如下：
其中沒有下腳標的x、y表示屏幕座標的起始點。在WebGL中，x和y都取0。
原文鏈接