web端mpr(多平面重建)的实现

mpr

二维多平面重建(Multiplanar reconstruction，MPR)是被大量用于分析电脑断层扫描影像的技术。可用于在正交平面(冠状、矢状、轴向或倾斜，选择任意平面)中重建影像，这可以帮助医疗人员建立解剖结构在多个平面的视觉效果。

mpr过程介绍

mpr一般会分为三个面: 横截面、冠状面、矢状面。

• 横截面:当你的视角从上往下看的平面，如图中绿色平面，其它两个平面在绿色平面的投影就是一个十字架，十字架的每条线都对应一个平面的投影，所以mpr一般除了图还自带有十字架，十字架中心点是另外两张图的交叉线投影。
• 失状面: 当你的视角从左右侧看向人体的平面，如浅红色平面，该平面同样会有一个十字架。
• 冠状面: 当你的视角从人的脸部向后看向人体的平面，如紫色平面，该平面同样会有一个十字架。

每个平面会有一个十字架，我们以横截面为例，如下图所示:

从上述我们知道，图中十字架对应的其实是另外两个平面的投影，一根线对应着一个平面，当我们转动或移动图中十字架时，实际上操作的是另外两个平面的坐标系，移动十字架实际是在移动其它两个平面，选中十字架实际是在旋转其它两个平面。

我们应该如何表示平面呢？

我们在之前的内容加粗过一个关键词视角，结合渲染知识中会有一个关键词叫做摄像机，其实这个视角和摄像机*是类似的，摄像机一般采用一个四维矩阵表示，我们视角是否同样可以用一个四位矩阵表示呢？答案当然是可以的，我们来说下原因。
渲染中的摄像机其实是每个像素点坐标位置转换的一个概念，只不过抽象成了矩阵概念，mpr和渲染的概念其实是类似的。
mpr的每张切面图其实就是一个个像素点，mpr切面图的生成就是将每个像素点的位置获取到然后映射到模型中相对应的位置并获取像素点，如下图所示。

我们如果获取到transform的变换矩阵其实就解决了mpr切面图的生成。那我们如何得到transform呢？

四维矩阵的设计

mpr的三张图是三个平面，平面可以用什么表示呢？坐标系。

坐标系一般用四维矩阵表示，轴方向一般由4个字段表示，第一个字段是该轴与世界坐标系的x轴夹角cos值，第二个字段是该轴与世界坐标系的y轴夹角cos值，第三个字段是该轴与世界坐标系z轴夹角cos值，第四个字段一般为0。

医学影像处理中一般会有一个世界坐标系的概念，世界坐标就是标准坐标系，一般用(1, 0, 0)表示x轴，(0, 1, 0)表示y轴，(0, 0, 1)表示z轴，其单位长度就是1，这个指的是人体的脚趾头站在原点，人体面向的为y轴负方向，人体右手到左手的方向为x轴正方向，人体的脚到头为z轴正方向，其它坐标系的表示都是以世界坐标系为参照表示的。

一般每张dicom图片会自带有orientation、position和spacing字段。
orientation: 表示dicom图生成的方向，其就是这张图的x、y轴方向，x轴方向一般用三个cos值表示，如果是脑部的横截面的标准图形，一般为x轴(1, 0, 0, 0)，y轴(0, 1, 0, 0)，其实和世界坐标系的x平面是平行的。
position: 表示dicom图生成的位置，其实就是这个平面的原点在世界坐标系中的坐标值，假设脑部横截面的第一张标准图形，假定从下往上设计，一般position是为(0, 0, 0)。
spacing: 表示dicom图中每个像素间的距离，其实就是影像坐标系的单位长度，每个dicom设计不同，spacing可能计算方式不同，如果spacing为0.05，其实一个世界坐标系的1个单位长度等比于20个影像坐标系的单位长度，转换矩阵一定要注意单位长度的转换。

通过orientation和position其实可以构建dicom图片的影像坐标系。

又因为三个mpr平面是相互正交的，我们只需要维护一个平面的坐标系即可(我们称其为公共矩阵)，假定我们维护一个横截面坐标系，为了统一我们一般默认横截面的mpr图是横切人体的切面，状面的坐标系为横截面坐标系绕着y轴旋转90度(注意方向)，矢状面的坐标系为横截面绕着x轴旋转90度。

有人问得到了坐标系矩阵如何得到影像数据呢？参考vtk的vtkImageReslice这个对象中的setResliceAxes这个属性，可以设定矩阵得到切面，内部帮我们实现了坐标系矩阵转transform的过程，不过这个对象里面的代码写的感觉非常一般，注释也较少。

十字架的设计

十字架的旋转操作相当于旋转切面的坐标系，这个旋转操作该如何做呢？如何作用到坐标系呢？
我们知道十字架旋转相当于平面坐标系的旋转，其实旋转操作是相对于该平面法线旋转。这个时候就要引入旋转矩阵概念(有些用四元数也可以做，但是注意锁)，根据旋转法线和旋转角度我们可以构建一个旋转矩阵，将旋转矩阵直接作用到我们的公共矩阵即可。

十字架的平移操作相当已平移切面的坐标系，这个平移如何做呢？
我们想象一下，其实平移平面相当于平移了平面的原点坐标，我们构建平移矩阵作用到公共矩阵即可得到平移后的公共矩阵。

十字架部分就全部实现了。

切面渲染

公共矩阵根据特定变换我们可以得到横截面、冠状面、矢状面的四维矩阵，将四维矩阵分别带入到vtkImageReslice中即可得到三个切面的像素点。得到像素点即可以处理并渲染到canvas中。

后续

有时间我会讲解下vtkImageReslice这个对象是如何得到切面的(内部主要是如何根据坐标系矩阵得到transform的过程)，还有就是mip的实现，mip其实就是mpr的延伸，同时会讲解下基于webgl的方法改造mip的整个实现过程，目前经过测试只要是一般的gpu，mip的webgl版本基本上就能实现和mpr相同的效果。
代码是不可能直接给的，如果还有问题就在下面评论或私聊询问。