1、平移
例如將一個頂點(x0, y0, z0 )進行平移到(0.5, 0.5, 0.5)的話，就只需要整個頂點的三個方向同時加上另外一個頂點；
最終位置 = (x0 + 0.5, y0 + 0.5, z0 + 0.5)
所以如果將一個三角形進行平移的話，就需要逐個頂點進行操作，加上一個平移的值；
只需要在頂點着色器中爲頂點座標的每個分量加上一個常量就可以平移的操作；
1. 具體着色器代碼
// 頂點着色器
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main(){
// 將相加後的值賦值
gl_Position= a_Position + u_Translation;
}
2. 獲取變量位置並賦值
// 設置平移距離
var tx = 0.5, ty = 0.5, tz = 0.5;
// 獲取存儲位置
var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
// 傳遞數據
gl.uniform4f(u_Translation, tx, ty, tz, 0.0);
上面傳遞給uniform變量的最後一值是0.0，因爲這個變量要與a_Position相加而a_Position中的第四個值是1.0，二者相加後的結果賦值給gl_Position並且gl_Position的第四個分量也需要時1.0所以u_Translation的第四個分量時0.0;
最後當調用gl.drawArrays(gl.TRANGLES, 0, n)時，執行頂點着色器的時候都會進行以下操作
- 將頂點座標傳遞給
a_Position； - 向
a_Position加上u_Translation； - 結果賦值給
gl_Position；
2、旋轉
旋轉和平移比起來時比較複雜的，因爲旋轉需要以下條件
- 旋轉軸 – 圖形將圍繞旋轉軸旋轉
- 旋轉方向 – 順時針還是逆時針
- 旋轉角度 – 圖形旋轉經過的角度
在 webgl中，默認角度爲正的時候時逆時針旋轉
如圖是繞 z軸的正旋轉
利用三角函數可以計算點的旋轉後的位置；
具體旋轉的實現此處不再贅述，詳細請移步《webgl編程指南》這本書；
而且使用一般的數學計算旋轉式比較繁瑣的，並且也不適用於很複雜的旋轉和轉換操作；
3、變換矩陣
變換矩陣式計算機圖形學常用的工具，它代替基礎的數學計算來實現點與點之間的轉換操作；
矩陣和矢量相乘
矩陣和矢量相乘得到變換後的座標值，只有在矩陣的列數和矢量的行數相等時纔可以將兩者相乘，上面中間這種矩陣就稱爲 變換矩陣;
<新座標> = <變換矩陣> * <舊座標>
不管是平移、旋轉還是縮放都可以使用矩陣和矢量的運算來完成；
着色器代碼
attribute vec4 a_Position;
// 聲明變換矩陣
uniform mat4 u_xformMatrix;
void main(){
// 新座標 = 變換矩陣 * 舊座標
gl_Position = u_xformMatrix * a_Position;
}
具體的矩陣計算細節過程可以藉助一些函數庫來實現；