【WebGL】《WebGL編程指南》讀書筆記——第四章

一、前言

       今天繼續第四章的學習內容，開始學習複合變換的知識。

二、正文

       Example1: 複合變換

       在書中，作者為我們封裝了一套用於變換的矩陣對象：Matrix4對象。它包含以下幾種方法：

1. Matrix4.setIdentity(): 將Matrix4實例化為單位矩陣
2. Matrix4.setTranslate(x,y,z): 將Matrix4實例設置為平移變換矩陣，在x軸平移距離為x，在y軸平移距離為y，在z軸平移距離為z;
3. Matrix4.setScale(x,y,z): 將Matrix4實例設置為縮放變換矩陣，縮放因數分別為x,y,z;
4. Matrix4.setRotate(angle,x,y,z): 將Matrix4實例設置為旋轉變換矩陣，角度為angle，旋轉軸為(x,y,z);
5. Matrix4.translate(x,y,z): 將Matrix4實例本身乘以一個平移變換矩陣；
6. Matrix4.rototate(angle,x,y,z): 將Matrix4實例本身乘以一個旋轉變換矩陣；
7. Matrix4.scale(x,y,z): 將Matrix4實例本身乘以一個縮放變換矩陣；
8. Matrix4.set(m): 將Matrix4設置為m;
9. Matrix4.elements: 類型化數組包含了Matrix4實例的矩陣元素；

var modelMatrix = new Matrix4();
modelMatrix.setRotate(ANGLE,0,0,1);
modelMatrix.translate(Tx,0,0);

... ...

gl.uniformMatrix4fv(u_ModelMatrix,false,modelMatrix.elements);

         Example2: 動畫

 requestAnimationFrame(func): 請求瀏覽器在將來某時刻回調函數func以完成重繪。我們應當在回調函數最後再次發起該請求。

var tick = function() {
    currentAngle = animate(currentAngle);  // Update the rotation angle
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix);   // Draw the triangle
    requestAnimationFrame(tick, canvas); // Request that the browser calls tick
};
tick();

由於瀏覽器執行Tick()的時間是不可控的，我們需要讓三角形勻速的旋轉，那麼就需要控制時間：

var g_last = Date.now();
function animate(angle) {
  // Calculate the elapsed time
  var now = Date.now();
  var elapsed = now - g_last;
  g_last = now;
  // Update the current rotation angle (adjusted by the elapsed time)
  var newAngle = angle + ANGLE_STEP * (elapsed / 1000.0);
  return newAngle %= 360;
}

三、結尾

      下周日繼續更新第五章。