杨晨彬 高 瞻

(南通大学计算机科学与技术学院 江苏 南通 226019)

0 引 言

随着医学图像三维可视化技术的发展，医疗工作者可以方便地将由计算机断层技术(CT)、核磁共振(MRI)得到的二维切片数据通过三维重建，达到重构人体的器官组织及病变部位的目的，从而提高医疗诊断和治疗的精确性和科学性[1]。

传统的医学体数据可视化系统对于三维医学体数据可视化影像的显示，都是使用二维的计算机屏幕来显示图像，并通过键盘鼠标在屏幕上完成交互操作。陈文池[2]利用可视化工具包VTK实现了医学图像的三维重建系统，系统中使用体绘制算法对体数据进行了三维可视化，并实现了平移、旋转和截取等交互操作。但是使用者通过计算机二维屏幕进行观察，无法感受到三维图像的深度信息，也无法清楚地看到三维图像的内部细节信息，从而影响使用者进一步的观察和理解，同时在二维屏幕对三维数据的交互操作也存在着不便。而随着虚拟现实技术的进步和虚拟现实头戴式显示设备(HMD)的商用化[3-4]，虚拟现实技术在医学教育、辅助诊断、医学可视化等领域的应用大大增加[5]，通过虚拟现实技术可以弥补传统屏幕在显示及交互上的不足。Laha等[6]从理论上分析了VR技术所带来的沉浸式体验在医学体数据可视化的重要作用，VR平台与传统平台相比具有明显优势，但是并没有给出实现方案。而He等[7]使用可分离式的脑部网格模型，结合HTC Vive，在虚拟现实中通过交互完成对脑部结构的观察操作，实现可视化，具有良好的沉浸式显示效果。但该方案需要预先制作脑部各组织的网格模型，同时无法观察组织内部信息，使用不便。

当前主要有两类医学影像可视化系统实现方案。一类是客户端形式的，这类系统需要在计算机端安装特定的软件，不利于后期系统更新及维护[8]。另外一类就是基于浏览器形式的[9]，本文使用基于浏览器的体绘制实现方案，使用WebGL作为体绘制实现工具，使用光线投射法作为体绘制的实现算法。对于光线投射算法，Congote等[10]提出了使用多通道渲染管线来实现体绘制的方法。这种方法需要使用一个单位立方体作为体数据的载体。在第一道渲染管线中根据单位立方体的顶点坐标生成坐标纹理，用来在第二道管线中计算光线投射方向，然后根据光线的方向和起止坐标进行颜色合成，得到渲染图像。其中因为需要使用额外的纹理和渲染管线，对性能会有一定的影响。对此，Mobeen等[11]提出了使用单通道的体绘制方法，在片元着色器中只需根据场景中相机的坐标以及片元坐标即可计算出光线投射方向，而该片元坐标就是光线的起始点。对光线的终止条件的判断则需要在片元着色器中判断光线上各采样点与单位立方体的位置关系，当采样点坐标在单位立方体之外时立即终止循环，得到结果。

以上方法在传统屏幕上具有良好的显示效果，但是结合虚拟现实后，在实际使用中有两点不足：(1) 当需要交互时，在传统屏幕中，可以通过改变场景中相机的位置间接实现场景中物体的平移旋转。但是在虚拟现实中，相机的方向、位置等参数由使用者的头戴式显示设备(HMD)的状态信息确定，无法使用传统方法对相机进行操作，所以需要通过单位立方体的平移旋转操作来实现对渲染结果的多角度观察体验。因为算法的原因，单位立方体的顶点坐标在片元着色器中难以更改，会导致单位立方体在顶点着色器和片元着色器中所处的坐标系不一致，不利于交互操作的实现。(2) 在计算光线投射方向和起点坐标时，使用片元坐标减去相机坐标得到方向向量，光线起点为片元坐标，最终合成的颜色值即为表面片元的颜色。但是当相机位置处在单位立方体内时，方向向量和起点坐标的计算方式不再适用，需要以新的方式重新计算。否则，当使用者近距离观察渲染结果或者在进行交互操作时，有可能不经意地造成距离过近而使图像突然消失，影响用户体验。基于以上两点原因，需要对光线投射算法进行一些改进，实现虚拟现实环境中体绘制可视化。

针对以上的不足，本文提出了基于WebVR的方法来实现医学体数据可视化，系统通过服务器端向浏览器发送体数据，然后浏览器使用WebGL进行渲染，通过传统屏幕或者虚拟现实设备HTC Vive以普通模式或VR模式显示可视化结果并实现相应交互操作。在普通模式中，使用者可以实现旋转、平移、缩放的操作；在VR模式中，针对虚拟现实环境的特点，提出了单通道光线投射体绘制算法在虚拟现实环境中的改进方法，实现体数据内部可视化、激光拾取和平面裁剪的交互方式，可以通过立体视觉以任意角度观察体数据表面及内部细节信息，增强使用者对人体的器官组织或病变部位的感知与认识。

1 系统设计

本系统整体设计使用B/S模式，采用富客户端策略，系统的核心功能基本都是通过浏览器端来实现，服务器端只需要完成数据存储，负担较小。同时只需一次性的数据传输，浏览器端与服务器端无需频繁的数据通信，对网络的要求也较低。这种模式最大的优点就是没有平台的限制，无需安装，使用和维护都很方便。

如图1所示，系统整体架构主要由三部分组成：服务器端、浏览器端与虚拟现实端。系统的实现主要由医学影像数据存储、数据传输、数据预处理、数据渲染、浏览器显示、虚拟现实显示、虚拟现实交互等部分构成。其中服务器负责数据存储；浏览器端与服务器端间的数据请求与数据传输通过HTTP协议来实现；使用Web端医学影像处理库Cornerstone.js对接受到的图像数据进行预处理，处理成能够被WebGL使用的纹理数据；使用WebGL进行可视化渲染，将普通三维影像在浏览器端显示出来；通过WebVR实现浏览器与虚拟现实设备HTC Vive实现连接，使用HTC Vive的头戴式显示器实现虚拟现实环境中三维影像的显示并通过配套的手柄控制器完成交互操作。

图1 系统结构图

2 体数据渲染

2.1 体数据传输

在服务器端与浏览器端之间，体数据的传输使用基于HTTP通信机制的Web技术，采用的是请求-获取的数据传递模式，将服务器端的DICOM格式体数据压缩包传输到客户浏览器端。系统通过采用Fetch API中GlobalFetch.Fetch()方法实现远程数据获取。客户浏览器端根据所需体数据存储的URL路径，使用Fetch()方法，发起对远程数据的请求，最终得到数据。

2.2 体数据预处理

由服务器处得到一组DICOM文件，其中每个DICOM文件只存放单张CT或MRI断层切片，每个DICOM文件数据由文件头数据和像素数据两部分组成。由于DICOM文件所需存储空间太大，而且WebGL无法直接读取操作DICOM数据，所以需要对DICOM文件数据进行预处理。使用Cornerstone.js将DICOM文件中原始像素数据解析出来，具体方法是使用Cornerstone.js中的图像加载器读取DICOM文件，然后得到其中每一个像素数据的灰度值，依次存入一个数组中，最后将数组转为数据格式为Uint8的类型化数组。处理成这种格式后，WebGL即可将其作为三维纹理传入着色器中。

2.3 单通道光线投射算法

光线投射算法是以图像空间为序的直接体绘制算法。从视点出发，沿着视线方向依次发射若干条光线穿过体数据，在此过程中对体数据等间距采样并获得颜色值，依次对各采样点的颜色值进行合成，当所有光线穿越完整个体数据后，得到渲染结果[12]。

WebGL为Web浏览器提供了内置的硬件3D加速渲染功能，从而为实现无插件的三维医学图像可视化提供了底层支持。最新版本的WebGL2.0标准开始支持三维纹理的使用，可以实现基于硬件的自动插值，提高运行效率。本文使用封装了WebGL的第三方库Three.js来编程实现。

本文使用基于单通道的光线投射体绘制方法。实现流程如图2所示。

图2 单通道光线投射算法流程图

具体步骤如下：

(1) 绘制单位立方体，作为体纹理的载体。向顶点着色器中传入单位立方体各顶点坐标，再传入片元着色器中，通过光栅化和背面剔除，得到立方体外表面正面各片元坐标，作为光线的起始位置坐标。

(2) 在片元着色器中，传入体数据的三维纹理和一维传递函数的纹理以及相机的坐标。通过片元坐标减去相机坐标可以计算出的光线的方向向量，通过设置好的采样步长，沿着射线方向在单位立方体内均匀采样。对于每个采样点根据使用者设置的传递函数为其赋予颜色值和不透明度值。

(3) 图像合成。沿着每一条射线在单位立方体内均匀采样，依次对该射线方向上所有采样点进行颜色值和不透明值的合成即可得到单位立方体对应片元的颜色值。合成公式为：

(1)

2.4 可交互传递函数

传递函数定义了为三维数据场的数据属性到光学属性的映射[13]。从传递函数的定义域分类可以分为一维、二维、多维的传递函数。本文使用最为常用的一维传递函数。一维传递函数以体数据的标量值，即灰度属性值作为传递函数的输入，输出经过映射得到的颜色(RGB)和不透明度(Alpha)。基本公式如下：

(2)

式中：α表示该采样点的灰度值；Rα、Gα、Bα、Aα分别代表由α生成颜色的红、绿、蓝分量以及不透明度。传递函数可以在程序运行时由使用者进行手动设置，传递函数的设置方式如图3所示。在右上方的菜单中，可以添加三个控制点，并且可以设置这三个点位置、颜色和透明度，然后根据这三个点自动插值出其它位置的颜色和不透明度，生成一张长255像素、宽20像素的RGBA格式图像。这张图像作为纹理立即传入片元着色器中，影响最终图像的生成。在程序运行中，使用者对传递函数的设置可以实时得到反馈，经过调整即可达到最优的显示效果。

图3 传递函数的设置方式

2.5 光线投射算法的改进方法

2.5.1渲染图像的平移与旋转

由2.3节可知，单通道体绘制相比于多通道体绘制，由于无法得到单位立方体背面片元坐标，所以无法得到光线的终止点坐标，所以需要额外的方式来判断光线上采样点与单位立方体的位置关系。在片元着色器中，单位立方体的顶点坐标如图4所示，该坐标系为单位立方体的局部坐标系。在此坐标系下，对采样点与单位立方体的位置判断只需要看采样点在三个坐标轴上的取值是否在0到1之间即可。同时，单位立方体各顶点坐标与三维纹理的坐标取值区间相同，无需额外的映射。所以在片元着色器中使用局部坐标系特别方便。此时，如果要实现渲染图像的平移与旋转，需要在顶点着色器中，通过模型矩阵乘以单位立方体的顶点坐标，得到世界坐标系下的顶点坐标值。虽然使用这种方式可以实现旋转和平移变换，但是，顶点和片元着色器中的单位立方体所处的坐标系不同，对后续交互操作的计算产生障碍。改进方式有两种。第一种是将片元着色器中的单位立方体的坐标系由局部坐标系转为世界坐标系。此方法如果要实现需要解决两个问题：从单位立方体内部采样点坐标到三维纹理坐标的映射以及采样点坐标与单位立方体的位置关系判定。以上两个问题都很难解决，所以，本文使用另一种改进方式，就是将传入片元着色器中的其他坐标值从世界坐标系转换到单位立方体的局部坐标系中，再进行其他的计算。

图4 单位立方体顶点坐标示意图

2.5.2体数据的内部可视化

当在虚拟现实环境中对体数据进行观察操作时，如果使用者通过激光拾取操作来近距离观察渲染结果，有可能导致相机位置进入单位立方体内部时，造成渲染图像突然消失。因为在传统算法中，并没有针对相机位置的变化来对光线的方向向量与光线的起始点进行重新计算。同时，为了减少计算量，开启了背面剔除，所以单位立方体内部的片元未被渲染。改进方法流程如图5所示。

图5 体数据的内部可视化实现流程图

通过计算得到相机在单位立方体局部坐标系下的相对位置坐标，即可根据坐标值的大小判断相机是否处于单位立方体内，如果相机处于单位立方体外部，则原来的算法保持不变。如果相机处于单位立方体内部，则将光线起点改为相机位置，并关闭背面剔除，光线的方向向量则通过背面片元坐标减去相机坐标获得。

3 体绘制结果显示

由于并不是所有使用者都接入了VR设备，所以保留了传统的基于二维屏幕的显示方式。当Web端利用WebGL完成图像的渲染时，渲染结果将以普通模式显示在屏幕上。然后再检测是否有VR设备接入Web，若检测到有设备接入，则使用者点击“ENTER VR”按钮，即可由普通模式切换到VR模式。

渲染图像在VR中显示需要利用WebVR API。WebVR API能为虚拟现实设备的使用提供支持，提供了如Oculus Rift或者HTC Vive等头戴式显示设备与Web端的连接。可以通过获取VR设备返回的位置和动作信息，来改变使用者在虚拟空间里的位置、行为。本文使用HTC Vive来实现虚拟现实中的体绘制可视化。

3.1 普通模式

在普通模式中，利用WebGL渲染的三维空间中的物体必须通过模型矩阵、视图矩阵、投影矩阵的矩阵变换转变成屏幕上的二维图像才能正常显示。在Three.js中，投影矩阵和视图矩阵被封装到了相机的属性当中，在使用时可以方便地调用。

通过控制相机在世界坐标系中的位置，即改变视图矩阵来间接实现对场景中物体的平移、旋转和缩放的操作，在普通模式中提供简单的交互操作。

3.2 VR模式

VR模式中物体的显示与普通模式有很大区别。主要区别在于：首先，对WebVR场景中的显示需要进行双屏渲染。如图6所示，需要根据瞳距等信息分别设置左右两个相机，再根据左右相机的视图矩阵和投影矩阵绘制图像。其次，WebVR场景相机的方向、位置等参数由使用者的头戴式显示设备的状态信息确定。当使用者的现实视角发生变化时，WebVR场景的相机也随之动态变化。

图6 WebVR成像示意图

在VR模式中，渲染流程如下：

(1) 获取接入Web浏览器的VR设备信息，完成准备工作。

(2) 设置渲染循环。由于需要根据使用者行为动态绘制每一帧场景，所以需要使用一个循环函数，不断执行递归循环，实现动态更新。接入VR后会优先使用VR设备原生的刷新率，以达到合适的渲染帧频，实现更佳的显示效果。

(3) 动画渲染。在每一帧中，浏览器可以通过WebVR得到渲染所需的帧数据。其中包括当前帧的左右视口的投影矩阵和视图矩阵。分别设置左右相机和左右视口，并将视图、投影矩阵赋值给左右相机，然后传入着色器，着色器分两次在左右视口中进行绘制，得到左右眼的渲染图像，再通过WebVR将图像发送至HTC Vive中显示出来。

4 交互操作设计

为了充分发挥虚拟现实技术在体数据可视化中的优势。结合HTC Vive的手柄控制器硬件，在VR环境中，为渲染后的三维图像设计实现了三维交互功能：激光拾取、平面裁剪。

4.1 激光拾取

从手柄处射出一道具有一定长度的激光射线，当激光与虚拟现实场景中物体发生碰撞事件时，通过按手柄上的扳机键并移动或旋转手柄即可使该物体发生对应的移动与旋转。在虚拟现实环境中对体绘制可视化结果实现任意角度、任意距离的观察。实现方式如下：

(1) 初始化手柄。在世界坐标系中载入预制的手柄模型对象。

(2) 在渲染循环中，获取手柄对象的模型矩阵，其中包含了手柄对象在世界坐标系中的坐标、旋转方向、缩放等信息数据。利用坐标和旋转方向，即可从手柄顶端出发，沿着手柄的方向绘制射线。由于所有信息在循环中动态更新，所以射线的位置和方向相对于手柄保持同步变换。

(3) 当按下扳机键时，利用Raycaster对象，得到与射线相交物体。Raycaster对象在Three.js中用于进行光线与物体的碰撞检测。用上一步中得到的坐标和旋转方向设置Raycaster对象就可以得到与射线相交物体对象列表，并在列表中选择与手柄距离最近的相交物体对象。

(4) 为手柄与相交物体建立“父子关系”，相交物体成为手柄的子对象，随着父对象的移动发生移动。首先，获取已得到的相交物体的模型矩阵，模型矩阵控制物体在世界坐标下的坐标，然后通过父对象的模型矩阵更新子对象的模型矩阵即可。

(5) 松开扳机键时，解除手柄与相交物体的“父子关系”。

由此，即可完成相关操作。

4.2 平面裁剪

在医学可视化中，往往需要将体数据中的内部细节信息显示出来。虽然调节传输函数能够展示体数据的不同部分，但是对于比较复杂的体数据，很难仅通过传输函数将所需内部细节表现出来。因此需要体数据裁剪工具，屏蔽外部遮挡的部分，以凸显内部细节信息。传统的医学可视化系统所提供裁剪面功能，由于二维屏幕的限制，只有由矢状面、冠状面和水平面等特定方向进行平面裁剪操作，且操作与设置需要不断调整，使用不便。因此，本文设计了在虚拟现实空间中的平面裁剪功能，使用激光拾取功能可以自由操控体数据以及裁剪平面的位置，实现沿着任意角度对体数据进行裁剪，操作简便。流程如下：

(1) 初始化裁剪平面。通过确定平面内一点P及其法向量n，即可确定平面在世界坐标中的位置和方向，以此来初始化平面对象。

(2) 动态更新裁剪平面。由于单位立方体在顶点着色器和片元着色器中的坐标不同，所以两者的交互需要在单位立方体的局部坐标系下计算，即以单位立方体为参照，裁剪平面的位置和方向。点P和法向量n并不会自动更新，所以需要在每一帧中通过计算更新，得到点P和法向量n在单位立方体的局部坐标系下的值。公式如下：

(3)

(3) 将点P和法向量n传入片元着色器中，计算裁剪后的结果并显示。在光线投射法体绘制中，每当沿着一道射线进行颜色和不透明度合成时，对于每一个采样点，都需要判断该采样点与裁剪平面的位置关系，若该采样点在裁剪平面的正面一侧，就进行合成运算；若在背面一侧，则跳过该采样点，重复该操作，直到合成结束。

这样就得到了经过裁剪的体绘制结果。

5 实验结果分析

实验计算机配置为Intel®CoreTMi7- 6700HQ CPU @2.60 GHz;显卡为NVIDIA GeForce GTX 1070；内存为16 GB；Windows 10 64位操作系统。实验体数据为头部CT数据，分辨率为256×256×225；测试浏览器使用FireFox。在常规模式中，结果如图7所示，在VR模式中的结果如图8所示，体数据内部可视化结果如图9所示。系统运行流畅，无卡顿，显示效果清晰。

图7 普通模式下的可视化结果

图8 VR模式下的可视化结果

图9 体数据内部可视化结果

6 结 语

本文实现了在虚拟现实环境中的医学体数据可视化系统，并针对虚拟现实环境设计了激光拾取、体数据内部可视化与平面裁剪功能，提供沉浸式的可视化与交互体验，有利于针对三维医学影像的医学诊断与教学工作。同时，运行于Web端，无需下载安装软件及其他可视化插件，可以跨平台运行，使用方便。下一步的工作主要包括两方面：(1) 在交互方面，将可交互的传递函数直接集成到VR环境中，在VR模式实现对传递函数的操作；(2) 在体绘制方面，目前的成像效果还有不足，下一步将在体绘制算法中加入实现光照的算法，实现更好的显示效果。