WebGL學習——變換、矩陣、動畫（五）

一、平移

1、爲頂點座標的每一個分量，加上一個變量即可實現平移效果。

2、定義u_Translation變量，使用uniform變量，因爲平移對所有的頂點都一致。gl_Position是vec4類型，u_Translation也必須是vec4才能相加

'uniform vec4 u_Translation;'  // 定義u_Translation 平移相關信息

// void main()函數中倆者相加
'gl_Position = a_Position + u_Translation;' // 倆者相加

// 平移函數
function translation(gl) {
        const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');
        gl.uniform4f(u_Translation, 0.5, 0.0, 0.0, 0.0);
    }

3、使用變換矩陣實現 

'uniform mat4 u_xformMatrix;' + // 定義平移矩陣

// void main倆者相乘即可
'gl_Position = a_Position * u_xformMatrix;' + 


// 定義變換矩陣函數
/**
     * 平移
     * gl gl對象
     */
    function translationMatrix(gl) {
        const TX = 0.5; // X軸方向
        const TY = 0.5; // Y軸方向
        const TZ = 0.0; // Z軸方向
        // 平移變換矩陣
        /*
        * [       [                              [
        * x`         1.0, 0.0, 0.0, TX              x
        * y`  =      0.0, 1.0, 0.0, TY,     *       y
        * z·        0.0, 0.0, 1.0, TZ,             z
        * 1          0.0, 0.0, 0.0, 1.0,            1
        *  ]       ]                              ]
        * */
        const xformMatrix = new Float32Array([
            1.0, 0.0, 0.0, TX,
            0.0, 1.0, 0.0, TY,
            0.0, 0.0, 1.0, TZ,
            0.0, 0.0, 0.0, 1.0, // TX, TY, TZ
        ]);
        const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
        gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
    }

二、旋轉

1、旋轉分爲3個步驟

1）、定義旋轉軸，圖形圍繞旋轉軸旋轉

2）、定義旋轉方向

3）、定義旋轉角度

2、根據公式計算旋轉後的X Y Z W的值，並相加

'uniform float u_CosB;' + // 定義角度相關信息
'uniform float u_SinB;' + // 定義角度相關信息

// void main()
'gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;' + //  根據公式計算X軸相關信息
'gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;' + //  根據公式計算Y軸相關信息
'gl_Position.z = a_Position.z;' + // 等於自身或者1
'gl_Position.w = 1.0;' + // // 顏色管道 等於1

    /**
     * 旋轉
     * gl gl對象
     */
    function rotation(gl) {
        // 如果饒Z軸旋轉 則旋轉公式爲
        // x` = xcos阝- ysin阝
        // y` = xsin阝+ ycos阝
        // z` = z
        const angle = 30;
        // 轉換弧度
        const radian = Math.PI * angle / 180.0;
        const cosB = Math.cos(radian);
        const sinB = Math.sin(radian);

        const u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
        const u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');

        gl.uniform1f(u_CosB, cosB);
        gl.uniform1f(u_SinB, sinB);
    }

3、根據變換矩陣實現 

'uniform mat4 u_xformMatrix;' + // 定義變換矩陣變量

// void main
 'gl_Position = a_Position * u_xformMatrix;' + // 倆者相乘即可

/**
     * 根據矩陣進行旋轉
     * gl gl對象
     */
    function rotationMatrix(gl) {
        // 旋轉變換矩陣
        /*
        * [       [                                      [
        * x`         cos阝, -sin阝, 0.0, 0.0              x
        * y`  =      sin阝, cos阝, 0.0, 0.0,     *        y
        * z·        0.0, 0.0, 1.0, 0.0,                  z
        * 1          0.0, 0.0, 0.0, 1.0,                  1
        *  ]       ]                                      ]
        * */
        const angle = 30;
        // 轉換弧度
        const radian = Math.PI * angle / 180.0;
        const cosB = Math.cos(radian);
        const sinB = Math.sin(radian);

        const xformMatrix = new Float32Array([
            cosB, sinB, 0.0, 0.0,
            -sinB, cosB, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
        const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
        gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
    }

三、縮放

1、X Y Z等想乘

'uniform float u_Sx, u_Sy, u_Sz;' + // 定義縮放相關比例

// void main
'gl_Position.x = a_Position.x * u_Sx;' + // 相乘
'gl_Position.y = a_Position.x * u_Sy;' + //  相乘
'gl_Position.z = a_Position.z * u_Sz;' + // 相乘
'gl_Position.w = 1.0;' + // // 顏色管道 等於1


/**
     * 縮放
     * gl gl對象
     */
    function zoom(gl) {
        const Sx = 2;
        const Sy = 2;
        const Sz = 1;

        const u_Sx = gl.getUniformLocation(gl.program, 'u_Sx');
        const u_Sy = gl.getUniformLocation(gl.program, 'u_Sy');
        const u_Sz = gl.getUniformLocation(gl.program, 'u_Sz');

        gl.uniform1f(u_Sx, Sx);
        gl.uniform1f(u_Sy, Sy);
        gl.uniform1f(u_Sz, Sz);
    }

2、變換矩陣實現 

    /**
     * 矩陣縮放
     * gl gl對象
     */
    function zoomMatrix(gl) {
        // 縮放變換矩陣
        /*
        * [       [                                [
        * x`         Sx, 0.0, 0.0, 0.0              x
        * y`  =      0.0, Sy, 0.0, 0.0,     *       y
        * z·        0.0, 0.0, Sz, 0.0,             z
        * 1          0.0, 0.0, 0.0, 1.0,            1
        *  ]       ]                               ]
        * */

        const Sx = 2;
        const Sy = 2;
        const Sz = 1;

        const xformMatrix = new Float32Array([
            Sx, 0.0, 0.0, 0.0,
            0.0, Sy, 0.0, 0.0,
            0.0, 0.0, Sz, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
        const u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
        gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
    }

四、矩陣組合

平移、旋轉、縮放等組合 （demo）

 'gl_Position = a_Position * u_xformMatrixTranslation * u_xformMatrixRotation * u_xformMatrixZoom;' + // 倆者相乘即可 變換矩陣運算

/**
     * 根據矩陣進行混合變換 平移 旋轉 縮放
     * gl gl對象
     */
    function hybridTransformation(gl) {
        const angle = 30;
        // 轉換弧度
        const radian = Math.PI * angle / 180.0;
        const cosB = Math.cos(radian);
        const sinB = Math.sin(radian);
        const xformMatrixRotation = new Float32Array([
            cosB, sinB, 0.0, 0.0,
            -sinB, cosB, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);


        const Sx = 2;
        const Sy = 1;
        const Sz = 1;

        const xformMatrixZoom = new Float32Array([
            Sx, 0.0, 0.0, 0.0,
            0.0, Sy, 0.0, 0.0,
            0.0, 0.0, Sz, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);

        const TX = 0.1; // X軸方向
        const TY = 0; // Y軸方向
        const TZ = 0; // Z軸方向
        const xformMatrixTranslation = new Float32Array([
            1.0, 0.0, 0.0, TX,
            0.0, 1.0, 0.0, TY,
            0.0, 0.0, 1.0, TZ,
            0.0, 0.0, 0.0, 1.0, // TX, TY, TZ
        ]);

        //        u_xformMatrixTranslation, u_xformMatrixRotation, u_xformMatrixZoom;'
        const u_xformMatrixTranslation = gl.getUniformLocation(gl.program, 'u_xformMatrixTranslation');
        gl.uniformMatrix4fv(u_xformMatrixTranslation, false, xformMatrixTranslation);

        const u_xformMatrixRotation = gl.getUniformLocation(gl.program, 'u_xformMatrixRotation');
        gl.uniformMatrix4fv(u_xformMatrixRotation, false, xformMatrixRotation);

        const u_xformMatrixZoom = gl.getUniformLocation(gl.program, 'u_xformMatrixZoom');
        gl.uniformMatrix4fv(u_xformMatrixZoom, false, xformMatrixZoom);
    }