利用齐次坐标进行二维坐标转换

发布于 2022年 01月 12日 08:47

利用齐次坐标进行坐标转换

Games 101 第0次作业可视化表示

作业要求:给定一个点 P=(2,1), 将该点绕原点先逆时针旋转 45°,再平移 (1,2), 计算出

变换后点的坐标(要求用齐次坐标进行计算)

目的

  1. 了解齐次坐标表示矩阵的意义
  2. 使用 threejstweenjs 模拟坐标转换过程
  3. 创建矩阵进行运算
  4. 给定点 P =(2,1),先旋转,后平移,计算变换后的坐标

程序结果

第一阶段:描述球绕原点旋转 45°

第二阶段:描述球移动 (2, 1)

理论基础

在二维世界中,旋转和缩放都能使用二维矩阵表示,但平移变换不行

为了统一三种坐标变换,使用齐次坐标,利用 3*3 的矩阵进行运算

点的表示:(x, y, 1) 向量表示:(x, y, 0)

点+向量=向量 向量+向量=向量 点+点=两点中点

齐次坐标表示

齐次坐标下的旋转矩阵

𝑐𝑜𝑠(θ)𝑠𝑖𝑛(θ)0𝑠𝑖𝑛(θ)𝑐𝑜𝑠(θ)00011[cos(θ)sin(θ)0sin(θ)cos(θ)0001]1

推导过程

𝑥𝑦1=𝑎𝑐0𝑏𝑑0001𝑥𝑦12(xy1)=[ab0cd0001](xy1)2

将点 (1, 0, 1) => (cos(θ), sin(θ), 1) 和点 (0, 1, 0) => (-sin(θ), cos(θ), 1) 到公式2,可得到

𝑎=𝑐𝑜𝑠(θ)𝑏=𝑠𝑖𝑛(θ)𝑐=𝑠𝑖𝑛(θ)𝑑=𝑐𝑜𝑠(θ)a=cos(θ)b=sin(θ)c=sin(θ)d=cos(θ)

注意点:旋转矩阵描述的是绕原点,逆时针旋转θ角度

齐次坐标下的平移变换

100010𝑡𝑥𝑡𝑦13[10tx01ty001]3

平移变换比较简单,推导公式就不表述出来了

分析

  1. 点 P(2, 1) 转换为齐次坐标 P(2, 1, 0)
  2. 构建逆时针旋转矩阵 MR,与 P 向量相乘 MR * P 得到旋转后的 P 坐标,P = MR * P
  3. 构建平移矩阵 MT, 与 P 向量相乘,P = MT * P
  4. 最终得到转换后的结果

代码实现

  1. 设置点 P 的坐标
sphere.position.set(2, 1, 0);
  1. 构建旋转矩阵
rotateMatrix.set(
    Math.cos(deg), -Math.sin(deg), 0,
    Math.sin(deg), Math.cos(deg), 0,
    0, 0, 1,
);
  1. 构建平移矩阵
transformMatrix.set( 
    1, 0, 1,
    0, 1, 2,
    0, 0, 1
);
  1. 矩阵运算
// 原始 P 点
const step0 = vec1.clone();
// 旋转后 P 点
const step1 = step0.clone().applyMatrix3(rotateMatrix);
// 平移后 P 点
const step2 = step1.clone().applyMatrix3(transformMatrix);
  1. 整个过程采用 tweenjs 进行动画处理
const tween = new TWEEN.Tween(sphere.position)
    .to({x: step1.x, y:step1.y,z:0 }, 2000)
    .onUpdate(()=>{
        changeText2();
    })

const tween2 = new TWEEN.Tween(sphere.position)
    .to({x: step2.x, y: step2.y, z: 0}, 2000)
    .onUpdate(() => {
        changeText2();
    });

推荐文章