glMatrix 轉換矩陣

對於平移、旋轉、縮放等轉換，glMatrix 提供了各個對應的函式。平移的函式是 translate，正如〈使用 glMatrix〉中談到的，第一個參數會用來儲存位移操作後的結果，第二個參數是要參與位移運算的矩陣，至於第三個參數，是以陣列形式指定位移的 x、y、z。

繞 X、Y、Z 軸旋轉的轉換，可分別使用 rotateX、rotateY、rotateZ，第三個參數用來指定旋轉徑度，縮放是使用 scale，第三個參數，是以陣列形式指定 x、y、z 的縮放因子。

glMatrix 遵照 OpenGL/WebGL 慣例，採用後乘（Post-Multiplication），也就是對於一個舊有的轉換矩陣 m，想要進行轉換操作時，是將下一個轉換操作矩陣會是放在後面，或者說是右邊，因此心智模型應想著數學公式上的右乘順序，不是頂點操作順序。

以〈後乘？右乘？〉最後的範例網頁為例，若改用 glMatrix 的話，矩陣處理的部份會是：

let transformation = mat4.create();
let i = 0;
function drawCube() {                
    i++;

    mat4.identity(transformation);
    mat4.rotateZ(transformation, transformation, 0.025 * i);
    mat4.translate(transformation, transformation, [0.25, 0, 0]);
    mat4.rotateX(transformation, transformation, 0.5);
    mat4.rotateY(transformation, transformation, 0.5);

    renderer.uniformMatrix4fv('transformation', transformation);

    renderer.clear();
    renderer.bindBuffer(GL.ARRAY_BUFFER, vertBuffer);
    renderer.bufferSubData(GL.ARRAY_BUFFER, 0, geometry.verteices);
    renderer.render(cube);

    requestAnimationFrame(drawCube);                
}

create 用來創建單位矩陣，當然，若每次想要單位矩陣都用新建方式，也許會顧慮到效率問題，因此想將一個矩陣重設為單位矩陣，glMatrix 提供了 identity 函式，可以看看範例網頁，看看完整的程式碼內容，注意，其中已經使用了〈右手座標的 gl-comm〉中的成果，也就是基於右手座標了。

除了提供 rotateX、rotateY、rotateZ，可以繞 X、Y、Z 軸旋轉之外，glMatrix 也提供了 rotate，可以指定任意軸旋轉，其程式碼實作了四元數旋轉，rotate 的第三個參數可指定旋轉徑度，第四個參數接受任意軸的單位向量。

因此，若使用 glMatrix 來實現〈四元數旋轉矩陣〉最後一個範例，矩陣處理的部份主要是：

let rotation = mat4.create();
function drawCube() {
    mat4.rotate(rotation, rotation, 0.025, axis);
    renderer.uniformMatrix4fv('transformation', 
        mat4.translate(mat4.create(), rotation, [0.25, 0, 0]));

    renderer.clear();
    renderer.bindBuffer(GL.ARRAY_BUFFER, vertBuffer);
    renderer.bufferSubData(GL.ARRAY_BUFFER, 0, geometry.verteices);
    renderer.render(cube);

    requestAnimationFrame(drawCube);                
}

可以看看範例網頁，看看完整的程式碼內容。

最主要的是，由於第一個參數會被作為矩陣操作結果的儲存，依照不同的需求，哪些矩陣的狀態可以重用，哪些需要還原為單位矩陣或重建，必須得思考一下！