這裏說的math庫實現，指的是，通過一般的加減乘除（角度計算）來更新坐標值。

因為涉及到坐標的變化，所以這裏都是基於對頂點著色器的修改

平移：

var vShader = `
  attribute vec4 a_Position;
  uniform vec4 u_Translation;
  void main(){
    gl_Position = a_Position + u_Translation;
  }
`;

因為平移只涉及到每個頂點的x、y坐標的變化，所以我們引入一個vec4 變量，在每次繪制的時候為這個變量賦值：

//用指定顏色填充webgl容器，就是設置背景
 

  gl.clearColor(0.4, 0.5, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);


　　
  var Tx = 0.5, Ty = 0.5, Tz = 0.0;
  var u_Translation = gl.getUniformLocation(gl.program, ‘u_Translation‘);
  if (!u_Translation) {
    console.log(‘Failed to get the storage location of u_Translation‘);
    return;
  }
  gl.uniform4f(u_Translation, Tx, Ty, Tz, 
 
0.0);
  


  gl.drawArrays(gl.TRIANGLES,0,n);

上述代碼中間一段中，我們對坐標的變化參數u_Translation進行了賦值，他代表的意思是

坐標點x軸正向移動0.5；

坐標點y軸正向移動0.5；

其余不變。

所以我們得到平移之後的變化如下：

旋轉：

旋轉比較復雜，涉及到角度的計算，直接拿書中的換算公式圖了：

所以針對頂點著色器，我們要添加兩個變量sinβ、cosβ：

旋轉的時候，根據角度，步驟如下：

①角度轉弧度

②算出sinβ和cosβ

③給頂點著色器裏設置的變量賦值

這樣一來就解決了旋轉β角之後的新的位置的頂點坐標了，這麽做，可以達到我們的效果，但是，如果情形稍微復雜一點的話，你就會發現，用表達式來計算的haul，非常繁瑣，好在我們還有另外一個數學工具——變換矩陣，下一節我們來探討變換矩陣。

WebGL編程指南案例解析之平移和旋轉的math庫實現