面向Web的远程图像可视化系统的研制

刘兆明 郭 景 柯永振(天津工业大学计算机科学与软件学院 天津 300387)

0 引 言

随着当代科技的进步，计算机图形学技术以及图像处理技术有了飞速发展，其可视化程序在医学领域[1-2]和地质科学领域中得到了较为广泛的使用。由于医疗设备的不断发展，产生了大量的医学影像数据，其中包含许多数据信息，医生无法全面掌握这些信息，这对医生诊断有一定的阻碍。医学影像可视化系统运用图像处理技术和计算机图形学技术，深度挖掘影像中的数据信息。

当前主要有两类医学影像可视化平台。一类是客户端形式的，现如今发展相当成熟，这种系统在各项交互和可视化功能方面都特别完善。例如，美国通用电器公司的GE，已经广泛应用于医疗机构，开源软件中Osirix也被广泛使用在各个科研机构中，韩国英飞达软件有限公司的INFINITT。另外一类就是基于浏览器插件或者是虚拟化桌面的医学影像可视化平台，功能上发展也趋于完善、逐步接近并替换纯客户端。例如teraRecon公司的INtuition系统。上述两类可视化系统都是依赖于特定平台或平台相关的插件。这类系统需要在计算机端安装特定的软件，增加了后期系统维护的成本与难度，不利于后期系统更新及维护。

在浏览器上不安装第三方可视化插件，并对医学影像有良好的可视化效果的纯面向Web端的可视化系统，已经成为未来的发展趋势，当前一些研究学者和商业公司已经开始着手研究。Shen等[3]提出面向服务器的系统架构，不同地区的用户通过网络访问系统，进行医学图像数据处理，服务器分发相同的医疗数据模型，实现了二维医学图像数据的协同可视化。

高鹏等[4]提出以服务器为中心的建模思想，利用WebSocket和Canvas协议在网页进行事件交互、主客户端双向通信、图形图像绘制，结合VTK三维可视化工具包，在服务器端进行数据处理、渲染，并投影为二维图片后发送到客户端显示，实现了三维重建。乔梁等[5]采用以服务器处理为中心的偏态处理模式，服务器端负责三维渲染任务，并根据客户端浏览请求实时投影为二维图像，客户端用于提交浏览请求及下载服务器端具有3D可视效果的“伪3D”二维数据。通过建立客户端伪3D交互坐标/视角变换模型，结合JS+HTML技术，实现客户端伪3D交互。Hou等[6]提出的解决方案是基于服务器端/客户端架构，采用在服务器端进行医疗图像分析并使用GPU加速技术处理图像，同时将处理图像结果传到使用HTML5和JavaScript开发的Web界面进行显示。雷辉等[7]提出并实现了基于HTML5的面向浏览器的医学影像可视化系统，通过在服务器端利用DCMTK影像解析模块解析图像数据并在服务器端进行绘制，通过异步图像载入模块 Web Worker 传送数据到前台，二维采用canvas技术和WebGL技术进行浏览器端硬件加速绘制显示。三维采用前后端异步操作以提供渐进式可视化，这种方法缺点就是前端绘制效果相对于后端要模糊不少。Zhou等[8]使用集群服务器进行渲染，集群服务器可以提供强大渲染能力，同时允许主用户将可视化的控制权委派给其他用户，让多个用户能够控制可视化场景的交互，并可以与其他用户进行聊天和即时消息传递。向俊等[9]通过在服务器端的MeVisLab进行体数据三维重建，将重建数据以X3D的格式输出，并且存在服务器的关系型数据库中，当浏览器客户端发起图像数据请求时，服务器利用超文本预处理器将图像数据转换成JavaScript对象表示法传输到客户端，客户端接收到数据后利用WebGL特性将三维图像渲染。

Wu等[10]提出一个基于云平台的医学影像可视化平台，在云端进行医学影像的存储、编解码、分割以及体绘制，通过数据传输协议和自适应数据传输协议进行数据通信。

目前这种服务器端解决方案，都是在服务器端对医学图像原始体数据进行存储、解析、预处理及渲染，最终只把处理结果发送到浏览器端进行显示，只有服务器端拥有完整的体数据。用户修改可视化参数，需要在网络上连续发送一系列的数据请求，使得应用程序对用户特定的网络延迟高度敏感，如果并行用户大大增加，同时对图像数据进行可视化操作，必然会加大服务器负载，可能导致服务器运行缓慢，甚至崩溃。

与此同时还有另一种可视化实现方式，本地浏览器医学图像可视化方式。在浏览器端直接对图像体数据进行可视化处理，从读取图像体数据到数据解析、数据预处理、三维重建等过程都在浏览器端完成。Daniel等[11]开发的Slice：Drop 通过使用WebGL[12]和HTML5的canvas绘制二维和三维图像，用开源的工具包XTK执行渲染，系统实现了正交MPR可视化及 MIP可视化，并可对其进行部分交互操作。

Bernal-Rusiel等[13]提出一个基于Web的软件解决方案来实现医学图像可视化，系统采用XTK工具包进行客户端渲染，实现DICOM图像二维可视化。Pienaar等[14]实现了一个基于Web的医学数据存储和数据处理管理系统，系统采用模型- 视图- 控制器软件架构模式，实现二维医学影像显示以及MPR多层面重建。牛世元[15]使用HTML5中Canvas标签、DWV框架和XTK框架实现了基于Web的DICOM图像解析、2D显示和最大密度投影三维重建可视化系统。

在本文中，我们提出基于Web的技术解决方案可以实现高效的实时医学影像可视化。该解决方案采用富客户端策略，每个客户端都拥有完整的体数据，各个用户都可以独立地对完整体数据进行可视化操作，不需要对原始数据进行降采样，对于光线投射体绘制显示效果比较好，精度比较高，能够清晰地显示组织结构。多个用户同时运行此系统时互不影响，能够有效降低服务器运行压力。系统采用加速度步长采样法代替传统的等距离步长采样方法以及不透明度提前截止法来提高光线投射三维重建速度。系统实现了二维MPR实时可视化和光线投射直接体绘制实时可视化以及相关的交互功能。系统所有可视化功能模块置于一个页面上，医护人员更加方便、直观地从不同角度观察特定解剖结构，能够更好地确定病变情况，因此构建基于Web端医学影像可视化平台具有极重要意义。

本文主要贡献：

1) 正交MPR显示，即横断面、矢状面、冠状面可视化，交互功能主要包括像素点选取、长度测量、窗宽窗位调整、图像反显、自动强度调整、像素定位等。

2) 正交MPR多层面三维可视化，可对图像进行放大缩小、旋转、 移动、像素定位等操作。

3) 基于光线投射体绘制可视化，可以对图像进行放大缩小、旋转、移动、颜色选取、采样步长调整、α值修正、透明度调整及插值调整等交互操作。

1 系统整体设计

本系统主要参照传统B/S 模式进行整体架构设计，浏览器端与服务器端通过HTTP协议进行通信。如图1所示，系统整体架构由医学影像数据存储、数据传输、图像解码、预处理、数据渲染、浏览器显示等构成。服务器负责数据存储、HTTP协议负责数据传输、DicomParser[16]负责图像解码，预处理负责对数据进行整理，THREE.js[17]负责对数据进行可视化渲染，浏览器负责影像显示。

图1 基于B/S的医学影像可视交互平台系统架构

2 客户端- 服务器端数据传输

基于HTTP通信机制的Web技术，采用的是请求- 获取信息传递模式，每一次从服务器上更新数据到本地客户端，都需要重新加载整个页面，在这过程中会加载不需要重新加载的数据，由此造成网络资源的浪费。本系统通过采用Fetch API[18]中GlobalFetch.Fetch()方法实现远程数据获取，使得后台的数据传输不会影响前台界面交互。根据提供的URL路径，使用Fetch()方法，发起对远程资源的请求，该方法返回一个Promise对象，并在返回的结果中进行检索。如果浏览器不支持Fetch方法，将通过Fetch-Polyfill来定期读取请求，获取Fetch方法。系统通过流式传输，将所有数据从服务器端传送到客户端，对大体积数据来说：当所有数据被获取时，“Load” Promise将会执行Resolve()方法。Promise 提供了串行/并行异步的编程简化方案，如图2 所示，缓慢的数据获取不会对其他操作产生影响。

图2 Promise流程

由于目前Fetch() 方法还不支持实时进度条，系统通过Ajax中OnProgress()方法实现数据加载进度条显示。对于移动平台来说，系统同样适用。

3 预处理

对于数据量过大的原始数据，通常需要加以精炼和选择，以此来减少数据量，同时需要最大限度减少有用信息的丢失，使在资源最少的情况下让采集到的数据产生最好的效果。当数据量过小而有可能影响可视化的效果时，需要进行有效地插值处理增加数据量，以增强图像的可视化效果。本文在对原始数据预处理阶段将DICOM文件通过DicomParser解析并将数据转换为“ series>stack>frame ”具有一定规则的层次结构数据。并将数据全部存储在一个数组中，合并数组中的series，从series 中获取stack。计算必要的信息，方向余弦、命令帧、起始点、计算间距、完整性检查、初始化变量、斜率最小/最大值、计算变换矩阵等。最终将原始像素数据包装成unit8 纹理，将其传递给GPU。

4 图形应用界面

在客户端，系统使用HTML5和CSS开发Web界面，可以有效地在浏览器端显示从远程服务器端接收到的医学图像数据。通过不同处理技术(正交MPR、DVR)处理医学图像体数据集，还可以切换不同的交互模式(平移、缩放、旋转等)。系统主要由图3显示的5部分可视化视图模块构成，底层三个窗口分别显示，正交MPR横断面、矢状面、冠状面视图。上层两个窗口分别为MPR多层面三维重建可视化模块，光线投射直接体绘制可视化模块，右侧下拉列表为各个模块部分功能控制菜单。

图3 系统界面

系统可视化渲染部分，主要通过ThreeJS实现。如图4所示，Three.js渲染流程，首先需要创建geometry对象，定义物体的形式、形状，并将其赋予一定的材质，创建出能够添加到场景中的Mesh对象，并通过Three.js渲染器，渲染Mesh对象。渲染分为3D可视化渲染和2D可视化渲染，2D可视化需要使用正投影相机投射和3D可视化需要使用透视相机。

图4 Three.js运行流程

4.1 二维图像可视化模块

在二维可视化界面中分别显示正交MPR的三个平面，即横断面、矢状面、及冠状面视图。并且用户可以通过提供的交互工具，对图像进行操作，在二维切片显示区域，实现了定位功能，允许用户双击窗口中切片任一像素点，其余窗口将会对应显示该像素点所处的切片。同时可以通过滑动滚轮改变窗口中显示的切片。其中还可以对图像进行窗宽窗位调整、图像反显、长度测量、缩放、平移、角度旋转、图像行反转、列反转等交互操作。

4.1.1 窗宽窗位调整

调整窗宽窗位等操作都在客户端浏览器完成，避免了和服务器频繁的交互。在本系统中，窗宽和窗位调整主要通过JavaScript脚本语言捕获鼠标事件或触屏操作事件，监控stack中MinMax 步长的改变量，从而获得窗宽和窗位数值。因为WebGL不支持浮点型纹理，不可把高精度的纹理传递给着色器进行绘制，同时因为DICOM图像都是灰度图像，为了可以用更高精度的纹理来绘制，以取得更好的绘制效果。在本系统中，我们通过将RGBA的所有颜色存储空间都用来存储DICOM图像的灰度值信息。将纹理传入到着色器，并分别映射到0～255等256种不同程度的灰阶值，进一步通过查询对应伪色表，获取颜色值。

4.1.2 长度测量

系统提供了长度测量工具，通过长度测量工具对病变区域进行测量。首先需要获取在屏幕坐标系下测量的起始点和结束点，之后结合DICOM影像中起始点及像素的间距值，计算得到测量区域真实长度。

4.1.3 缩放、平移、旋转

在二维可视化模块中，主要通过控制WebGL中模型矩阵变换，实现对二维图像的缩放、平移、旋转等交互功能，即将初始位置坐标P(x,y,z)映射到缩放、旋转、平移后的位置坐标P′(x′,y′,z′)。

4.2 三维可视化

此模块分为两部分：正交MPR多层面三维重建可视化以及基于光线投射直接体绘制可视化。不同于二维可视化，三维可视化运用Three.JS中透视相机。

4.2.1 正交MPR多层面重建三维可视化

此部分3D显示和2D显示的本质区别是用不同方式来看待相同的对象。分别将横断面、矢状面、冠状面方向的2D切片，添加到三维切片场景中。可对图像进行放大、缩小、旋转、移动、像素定位等交互操作。

4.2.2 光线投射算法改进

在图像上的像素点处，向视线方向投射射线，在射线穿越体数据时候，延射线方向进行加速度步长采样，通过三线性插值算法获得采样点数据值，得到重采样点的颜色值和不透明度，并进行融合。系统采用光线投射提前截止法来提高整体绘制时间。

在本文的ray-casting算法实现中，由于需要射线投射穿越最大距离作为循环采样控制的结束依据，所以首先要渲染正向面深度图和背向面深度图，分别得到正向深度纹理和背向深度纹理，通过计算得到射线最大穿越距离。在顶点着色器中计算射线方向及顶点位置，射线方向由顶点所处世界坐标及光线投射的方向共同决定。当不透明度α累积到0.95时或者采样点超出最大采样距离时，即停止采样，输出合成颜色值。

传统光线投射算法都是采用等距离步长采样。在一条射线上靠近前端的体素对三维重建作用大，远离前端的体素对三维重建作用小，由此本文提出采用加速度方式进行采样如图5所示，越靠近射线后端，采样步长越大，通过采用此方法减少重采样点的选取来提高重建速度。L1为初始采样间距，d为加速度步长变化因子，实验验证当d=0.004时，绘制速度和重建效果最好。

图5 加速度采样距离示意图

第k个体素与第(k+1)个体素之间距离为L1+(k-1)d， 假设一条射线上有560个重采样点，初始采样间距为L1，则总长度为560L1。运用加速度算法计算知：需要选取505的重采样点，相对于等距离采样要少选取55个采样点，少取约9.8%的采样点。

在光线投射[19-22]过程中，投射光线不一定经过原始网格顶点的数据点，重采样点f的值由周围8个顶点用三线性插值算法求出，如图6所示。

图6 重采样点

利用式(1)计算采样点f的值：

Vf=(1-x)(1-y)(1-z)V0+

x(1-y)(1-z)V1+(1-x)y(1-z)V2+

xy(1-z)V3+(1-x)(1-y)zV4+

x(1-y)zV5+(1-x)yzV6+xyzV7

(1)

传递函数将光学属性(颜色和不透明度)分配给体数据变量值i，Frgba(i)=(r,g,b,α)，以改善体数据内部可视化，设置不同的传递函数，会有不同的三维体绘制效果。在光线投射过程中，当光线穿过体数据时，传递函数获取每个采样点处的光学属性，之后使用组合函数融合。本文采用从前到后的顺序，对采样点进行合成：

(2)

式中：Cnow、αnow为第i个体素的颜色值和不透明度；Cin、αin为进入第i个体素是的颜色值和不透明度；Cout、αout为光线穿过第i个体素时所累积的颜色值和不透明度。

使用预设传递函数在交互上要比手动调节传递函数更加方便，然而预设传输函数，只可以显示一部分特定的结构，这对用户查看图像中其余结构信息有一定的阻碍。颜色传递函数和不透明度传递函数，分别用于获取RGB值以及Alpha值。用户通过手动调节控制点的标量值范围和光学属性来调整绘制结果，方便用户查看图像中感兴趣的组织结构。系统中颜色传递函数主要包含defaults、pectrum、hot_and_cold、gold、red、green、blue、walking_dead、random几种类型参数。用户通过选取不同的参数，通过改变为组织结构赋予不同颜色，最终显示不同的绘制结果。不透明度传递函数包含以下几种类型参数：linear、lowpass、bandpass、highpass、float、random。对CT图像体数据进行可视化渲染时，不透明度设置为highpass, 能够有效地突出显示骨骼结构。

5 测试与结果

本实验选取的测试服务器配置为CPU: Intel(R) Xeon(R) CPU E3-1225 V2 @ 3.20 GHz，显卡: NVIDIA Quadro 600，内存: 8 GB，操作系统: Win10 64位；对于客户端，CPU: Pentium(R) Dual-core @ 2.10 GHz，显卡: NVIDIA GeForce GT 240 MB 内存: 3 GB，操作系统: Win10 64位。医学断面影像体数据集为天津某医院放射科所提供，体数据为头部DICOM数据，共有336张，单帧断面图像分辨率为536×536，共计占用184 MB存储空间。实验中测试服务器和客户机处在局域网中，我们通过Chrome、Firefox、IE及Opera等4款主流浏览器对本系统进行测试，实验结果发现在不同的浏览器上效果表现都相当不错，都可以清晰地显示二维图像及三维图像。

5.1 DICOM图像数据请求

本次实验数据，在Windows 10 平台下Chrome浏览器上运行所得到的结果。分别从远程服务器上请求三组DICOM医学影像数据，图像数目分别为50、150、336，传输结果如表1 所示。

表1 DICOM图像传输时间

从表1中可看出，每次传输总时间都会由CT图像数目不同而有所差异，图像数目对数据传输有很大的影响，单张图像传输时间延迟一般都维持在82～939 ms。

5.2 二维交互

在窗口底侧可视化界面中分别显示正交MPR的三个视图，即横断面、矢状面、冠状面视图。在本文系统中，通过提供交互工具，来帮助操作人员可以更加方便地对图像进行一些列可视化操作，在图7中列举了2D可视化交互的几种方式，因为WebGL对硬件具有加速作用，所以在整个交互过程中比较流畅。如图7所示：(a)为系统通过调整窗宽可以清楚地看清牙齿和颌骨组织；(b)为反色显示；(c)为通过测量工具得到组织部位长度。

图7 二维交互界面

5.3 三维交互

在三维可视化模块方面本文实现了正交MPR多层面三维可视化以及基于光线投射算法的直接体绘制。图8 (a) 中展示的是正交MPR多层面三维可视化。在直接体绘制实验中将Lut设为red 、不透明度设为highpass、初始采样步长设置为239、alphaCorrection设为0.2，插值设为0，实验效果如图8 (b) 所示，渲染帧数保持49帧/s左右，整体交互比较流畅。图8(c)为旋转后的三维体绘制效果。

图8 三维交互界面

在一般情况下，浏览器加载影像数目和计算机内存有关，内存大小决定加载影像数目多少。实验采用固定影片数目336张，改变其余参数进行对比。

将366张CT图片首次加载到系统中，lut被设置为随机值，opacity同样为随机值，初始采样步长为125，alphaCorrection为0.1，fps保持在50～55帧/s，各项操作还算比较流畅。

将参数初始采样步长设置为200，AlphaCorrection为0.2，interpolation设置为0时，绘制效果最好，可以清晰地观察到组织结构，此时fps维持在45～50帧/s。各项交互相对来说都比较流畅。然而当插值调节为1时，由于需要进行大量的插值计算，其占用特多的GPU，导致系统卡顿，此时的fps只有13帧/s左右。

将不透明度参数值设为Highpass，alphaCorrection固定设置为0.5，调整初始采样步长，当超过330，fps只能维持在15～19帧/s，系统会出现明显卡顿现象。

将不透明度参数值同样设置为Highpass，固定初始采样步长为280，调节alphaCorrection值，当数值超过0.9时，此时的fps在18～20帧/s之间波动，系统会出现卡顿现象。

在本次实验中，通过设置不同的参数值(最大采样步长、alpha修正值、插值)得到不同的绘制结果，图像渲染帧数维持在不同的数值区间(如表2所示)。

表2 不同参数下图像绘制帧率

通过表2测试数据显示，对于数据量不是很大的影像体数据，绘制效果还是比较理想的，旋转、缩放等交互操作还算比较流畅。

5.4 跨平台运行

本系统可以很好地实现跨平台运行，通过在ipad上测试，成像质量及运行速度相对来说还较满意，测试结果如图9所示。

图9 系统在ipad及电脑上测试

6 结 语

本文提出了一种基于Web的医学影像可视化系统，此系统不依赖于任何的平台以及其他相关的平台插件，突破了传统医学可视化平台不可跨越以及传统面对面医疗服务等缺点。系统旨在减少对医疗数据的可访问性的障碍，简化数据的复杂处理，并利用强大的工具进行交互。为医生提供了很大便利，医生在外地，可以方便地访问系统、进行会诊、诊断病情、以及设计解决方案，同时可以使得高水平医疗为交通不便的偏远地区病人服务。

本系统在今后工作中需要改进的地方，主要包括两个方面。第一，就是图像传输问题，目前本系统传输速率还不是太快，因此如何提高传输速率，将是下一个研究问题。第二，在体绘制方面，目前显示的成像效果还需加强，接下来将对怎样显示更高的成像质量展开研究。

[1] 吴福理, 张彤, 梁荣华. 基于云平台的医学影像可视交互平台[C]//全国计算机辅助设计与图形学会会议.2014.

[2] Kaspar M, Parsad N M, Silverstein J C, et al. An optimized web-based approach for collaborative stereoscopic medical visualization[J].Journal of the American Medical Informatics Association, 2013, 20(3):535- 543.

[3] Shen H, Ma D, Zhao Y, et al. Collaborative annotation of medical images via web browser for teleradiology[C]// International Conference on Computerized Healthcare. IEEE, 2012:85- 92.

[4] 高鹏, 刘鹏, 苏红森,等. 基于HTML5与可视化工具包的医学影像三维重建及交互方法研究[J]. 生物医学工程学杂志, 2015(2): 336- 342.

[5] 乔梁, 陈欣, 杨磊鑫,等. 基于纯净Web的医学影像三维可视化平台的研制[J]. 北京生物医学工程, 2015(3):229- 233.

[6] Hou X, Sun J, Zhang J. A web-based solution for 3D medical image visualization[C]// SPIE Medical Imaging. International Society for Optics and Photonics, 2015:941810- 941810- 8.

[7] 雷辉, 赵颖, 王铭军,等. 面向浏览器的医学影像可视化系统[J]. 中国图象图形学报, 2015, 20(4): 491- 498.

[8] Zhou Y, Weiss R M, Mcarthur E, et al. WebViz: A Web-Based Collaborative Interactive Visualization System for Large-Scale Data Sets[M]// GPU Solutions to Multi-scale Problems in Science and Engineering. Springer Berlin Heidelberg, 2013:587- 606.

[9] 向俊, 叶青, 袁勋. 基于网页的可视化网络医学影像平台设计[J]. 生物医学工程学杂志, 2017(2):233- 238.

[10] Wu F, Zhang T. Research of Collaborative Interactive Visualization for Medical Imaging[C]// International Conference on Virtual Reality and Visualization.IEEE,2015:110- 115.

[11] Haehn D. Slice:drop: collaborative medical imaging in the browser[C]// ACM SIGGRAPH 2013 Computer Animation Festival. ACM, 2013:1- 1.

[12] Khronos Group. WebGL-OpenGL ES 2.0 for the Web[OL].2016. http://www. khronos.org/webgl.

[13] Bernalrusiel J L, Rannou N, Gollub R L, et al. Reusable Client-Side JavaScript Modules for Immersive Web-Based Real-Time Collaborative Neuroimage Visualization[J]. Frontiers in Neuroinformatics, 2017, 11(11).

[14] Pienaar R, Rannou N, Bernal J, et al. ChRIS-A web-based neuroimaging and informatics system for collecting, organizing, processing, visualizing and sharing of medical data.[C]// Engineering in Medicine and Biology Society. IEEE, 2015:206.

[15] 牛世元. 基于Web的DCM图像解析和三维重建可视化[D]. 河北师范大学, 2016.

[16] Hafey C[OL]. https://github.com/chafey/dicomParser.

[17] Dirksen J. Learning Three.js: The JavaScript 3D Library for WebGL[M]. 2013.

[18] Weiss Y[OL]. https://fetch.spec.whatwg.org/.

[19] Mobeen M M, Feng L. High-Performance Volume Rendering on the Ubiquitous WebGL Platform[C]// IEEE, International Conference on High PERFORMANCE Computing and Communication & 2012 IEEE, International Conference on Embedded Software and Systems. IEEE, 2012:381- 388.

[20] Congote J, Segura A, Kabongo L, et al. Interactive visualization of volumetric data with WebGL in real-time[C]// 3d Technologies for the World Wide Web, Proceedings of the, International Conference on Web 3d Technology, Web3d 2011, Paris, France, June. DBLP, 2011:137- 146.

[21] Congote J, Kabongo L, Moreno A, et al. Volume Ray Casting in WebGL[M]// Computer Graphics. 2012.

[22] 周娟. 基于Ray-Casting算法对医学图像进行三维体绘制重建[J]. 计算机科学, 2016, 43(S2):156- 160.