科普 | 矩阵在空间变换中的应用

一、应用背景

近年来随着计算机技术的发展，计算机软硬件也得到了很大的提升，移动端图形可视化技术也越来越被重视，三维仿真行业越来越受众人追捧。WebGL技术在图形可视化邻域可谓是功不可没。WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示模型和3D场景。

在三维仿真工作中仿真的对象也从宏观到微观无一例外，大到城市建筑群，小到独立楼宇，甚至是一草一木都是仿真的对象。身处三维空间的任何一个可见的物体都必有一个属性，那就是位置属性。那么我们在三维场景中可视化这些物体时必然得先标定这些物体应该存在的位置，那么问题来了，如何获取这个物体的精确位置呢？在实际操纵的过程中就经常遇到这个问题，一种传统低效的方法就是先获取大概位置，再此基础之上一点一点通过估算更改代码中给物体设定的位置，然后运行程序在前端页面查看物体位置是否准确，直到物体定位到理想的位置。这种操作方式只能满足少数据量的物体定位问题，当仿真场景越来越大，场景中的对象的数量越来越多，这种传统的方法越显无力，那么如何高效且直观的给物体定位呢？

二、实现原理

带着这个问题前段时间我就开发了一个可视化的调整物体位置的插件，该插件是基于CesiumJS三维框架开发的前端js插件，开发的核心思路如图：

在此分析这个插件开发过程之前要对一些基础概念进行扫盲。在图形学中一个非常重要的概念——坐标系统，不同的坐标系统也被称作相应的空间，屏幕上所有的像素点在最终被转化为片元之前需要经历这些坐标系统（空间）：

• 局部空间（Local Space）/ 物体空间（Object Space）
• 世界空间（World Space）
• 观察空间（View Space）/ 视觉空间（Eye Space）
• 裁剪空间（Clip Space）
• 屏幕空间（Screen Space）

而坐标从一个空间到另一个空间则需要变换矩阵来完成这一过程：

• 模型矩阵（Model Matrix）
• 观察矩阵（View Matrix）
• 投影矩阵（Projection Matrix）

变换过程就如下图所示：

在三维世界中，这些看似复杂的变换过程归根结底但都离不开最基础的平移、旋转、缩放操作。

回到文章开头提出的问题：如何高效且直观地将物体在三维世界中进行定位呢？很显然有个简单的方案能够解决这个问题，那就是通过捕获鼠标或者键盘动作，将其执行的动作同步到物体上，这样在移动或者旋转鼠标的极短的时间内就能将物体设定到理想的位置。自然这个问题可以抽象成对物体的平移和旋转操作。

这篇本章提到的插件就是根据矩阵的平移与旋转实现的，学过线性代数的同学肯定都对矩阵不会陌生，大家常说空间变换离不开矩阵的变换，那么如何通过矩阵的计算来实现空间变换中平移与旋转的呢？

变换矩阵---平移：将三角形从O移动到O’，三角形上任意一点用P(x,y,z)表示，移动后记为P’（x’,y’,z’）

变换后有等式：

x’=x+Tx

y’=y+Ty

z’=z+Tz

根据矩阵乘法运算规则上面的等式可表示为：

变换矩阵----旋转：将三角形旋转β后，三角形上任意一点用P(x,y,z)旋转后记为P’(x’,y’,z’)

变换后有等式如下：

x’=xcosβ -ysinβ

y’=xsinβ+ycosβ

z’=z

根据矩阵乘法法则上述等式可表示为：

三、实现过程

物体平移操作可以降维到二维平面进行，鼠标从屏幕坐标A（ax,ay）平移到屏幕坐标B（bx，by），物体同步鼠标操作。

1. 建立物体所在位置（Pos）的局部坐标到世界坐标的变换矩阵(T)
2. 屏幕坐标点转裁剪坐标：分别计算出A、B两点在物体X所在的局部坐标系（O）中的位置
3. 计算A点到B点（向量ab），计算ab向量在局部坐标系（O）各个轴向上的分量
4. 变换矩阵(T)左乘轴向上的变化量得到新的世界坐标（Pos’），即为物体的新位置，操作动画如下：

物体的旋转操作，鼠标从屏幕坐标A（ax,ay）平移到屏幕坐标B（bx，by），物体同步鼠标操作：

1. 建立物体所在位置（Pos）的局部坐标到世界坐标的变换矩阵(T)
2. 求T的逆矩阵T’
3. 屏幕坐标点转裁剪坐标：分别计算出A、B两点在物体X所在的局部坐标系（O）中的位置
4. 求向量OA与OB的夹角
5. 根据旋转轴与旋转角度计算四元组(Q)
6. 根据四元组计算旋转矩阵(M)
7. 更新模型矩阵

操作动画如下：

以上就是整个插件开发的全部流程，期间也踩了不少坑，幸运的是这些问题都被解决了。这个插件大大简化了物体定位的操作，效率提高了百分之八十，甚至是百分之九十。当然它也还有可以优化的地方，下一步可以通过键盘控制各种操作提高控制精度。总之，这个插件的核心在于矩阵运算，利用矩阵的升维将线性不可分的数据集映射到高维中，转换为线性可分的情形去解决复杂的空间变换问题。矩阵运算除了在图形渲染领域有着深入的引用，在诸多邻域都离不开矩阵运算，在信号控制、数值计算、加密计算、工程学、图像处理等领域都有重要的应用，由于篇幅有限，就不一一拓展了。

文/图：丁康

编辑：刘玲

校对：马滢淑

往期推荐

点亮 ，告诉大家你也在看