图形学 旋转与投影矩阵-3

图形学 旋转与投影矩阵-3

game101 第二次作业； webgl 实现

• 图形学 旋转与投影矩阵-3
  • 前文简介
  • 构建透视投影矩阵
  • 绕任意向量的旋转变换矩阵
  • 设置模型矩阵
  • 添加交互事件
  • 总结

使用 THREEJS 作为基础框架，构建各类矩阵，自定义矩阵运算，最终完成

1. 正确构建模型矩阵
2. 正确构建透视投影矩阵
3. 看到变换后的三角形
4. 按 A 和 D 三角形能够进行旋转
5. 按 Q 和 E 三角形能够绕任意过原点的向量进行旋转

最终效果

前文简介

在旋转与投影矩阵第二篇中，详细解释了三维变换的原理，详细解释了视图矩阵，规范立方体，投影矩阵，透视投影矩阵参数的概念。三维变换分为缩放变换，平移变换和旋转变换；视图矩阵描述了当前相机的位置和旋转角度得分复原；规范立方体描述了在默认情况下，元素应该处于 [-1. 1]^3 立方体内；投影矩阵描述了将人眼视角转换为标准相机视角，位于原点，lookAt 为 (0, 0, -1)，up 为 (0, 1, 0)；透视投影参数描述了已知 fov，aspct，near，far 从而推导其他的参数。

理论基础均已经讲解完毕，本章主要讲代码实现，列出过程量

构建透视投影矩阵

构建透视投影矩阵需要四个参数，fov，aspct，near，far，根据四个参数推导 top，right，bottom，left。将透视相机转换为标准相机需要两步：

1. 将透视投影转换为正交投影，得到转换矩阵
2. 将正交投影转换为标准相机，得到正交相机矩阵

代码实现

// 构建一个透视投影矩阵，
function perspMatrix(fov, aspect, near, far){
    fov = 域名*fov/180;
    const top = 域名(fov/2) * 域名(near);
    const right = aspect * top;
    const bottom = -top;
    const left = -right;

    const ortho = new 域名ix4()
        .scale(new 域名or3(2/(right-left), 2/(top-bottom), 2/(near-far)))
        .multiply(new 域名ix4().setPosition(-(right+left)/2, -(top+bottom)/2, -(near+far)/2));

    const perseToOrtho = new 域名ix4().set(
        near, 0, 0, 0,
        0, near, 0, 0,
        0, 0, near+far, -1*near*far,
        0, 0,1, 0
    )
    return 域名e().multiply(perseToOrtho);
}

设置 fov 为 90，aspect 为 1，near 为 -3，far 为 -9 的结果

const per = perspMatrix(90, 1, -3, -9);

绕任意向量的旋转变换矩阵

绕任意过原点的轴的旋转变换矩阵理论基础如下，该表示绕过原点的 n 向量逆时针旋转 θ 角度的变换矩阵

绕过任意点的向量如何计算呢？上篇也介绍过，先移动到原点计算再逆移动回去

代码如下

// 绕任意过原点的轴的旋转变换矩阵
function getAnyRotation(axis, angle){
    const cosTheta = 域名(angle);
    const matrix1 = new 域名ix3().multiplyScalar(cosTheta);
    const matrix2 = getSelfMul(axis).multiplyScalar(1-cosTheta);
    const matrix3 = new 域名ix3();
    域名(
        0, -axis.z, axis.y,
        axis.z, 0, -axis.x,
        -axis.y, axis.x, 0
    );
    域名iplyScalar(域名(angle));

    const result = matrix3Add( matrix3Add(matrix1,matrix2), matrix3);
    return new 域名ix4().setFromMatrix3(result);
}

设置模型矩阵

三角形的三个顶点坐标初始值已经固定，若想让其旋转，首要方法就是通过矩阵运算改变顶点坐标，改变模型的位置信息的矩阵叫做模型矩阵，理论基础如下

这里构造一个绕 z 轴逆时针旋转的模型矩阵

// 等价于 makeRotationZ  域名RotationZ(rotation);
function rotateZ(model, rotate){
    域名(
        域名(rotate), -域名(rotate), 0, 0,
        域名(rotate), 域名(rotate), 0, 0,
        0, 0,1, 0,
        0, 0, 0, 1
    )
}

添加交互事件

调用相应函数即可

域名ventListener(\'keydown\', ev => {
    if(域名 === "a" ){
        rotation += 0.2;
        rotateZ(model, rotation)
        return;
    }
    if ( 域名 === \'d\'){
        rotation -= 0.2;
        rotateZ(model, rotation);
        return;
    }
    if ( 域名 === \'q\'){
        angle -= 0.2;
        域名e = getAnyRotation(vec, angle);
        return;
    }
    if ( 域名 === \'e\'){
        angle += 0.2;
        域名e = getAnyRotation(vec, angle);
    }
})

总结

至此完成了 games101 的第二次作业，并以 web 端的形式展示出来，算是做了部分创新，有兴趣的伙伴可以一起探讨，加油