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);
    }