基于WebGL的三维医学影像在线教学系统

基于WebGL的三维医学影像在线教学系统作者：尚倩张寅升
来源：《高教学刊》2018年第06期
摘要：CT、MRI等三维医学影像是临床诊断的客观依据之一，对于临床直觉和形象思维的训练具有重要的价值。

这类医学影像的数据量通常较大，如单次CT扫描的原始多帧数据可达几十兆到几百兆字节。

如此巨大的数据量给影像数据的网络化传输和共享带来了挑战，这使得很多有价值的影像案例只能囿于医疗机构内部的影像工作站系统，无法形成大规模的共享教育资源。

针对这一现状，文章设计了一种基于WebGL的三维医学影像在线教学系统。

该系统首先通过一个医学影像三维重建与分割模块将原始多帧二维图像转化为OBJ、STL等高精度、高压缩比的三维矢量模型，并统一存储到案例库，然后由用户通过网頁浏览器中查看基于WebGL渲染的三维医学对象。

关键词：WebGL；医学影像；三维可视化；在线教学系统
中图分类号：G642 文献标志码：A 文章编号：2096-000X（2018）06-0075-03
Abstract： Three-dimensional medical imaging data， such as CT， is an objective reference for making clinical diagnoses. It is a valuable resource for cultivating clinical intuition and spatial thinking. Such medical imaging data is usually quite large. For example， a single CT scan can generate multi-frame data of tens of megabytes to several hundred megabytes. Such a huge data size poses a great challenge for web-based transmission and data sharing， causing a lot of valuable imaging data confined to local medical institutions and unable to be reused as a large-scale shared educational resource. In view of this situation， this paper designs a WebGL-based 3D medical imaging online teaching system. The system first converts the original multi-frame two-dimensional image into high-precision and high-compression-ratio three-dimensional vector model （e.g. OBJ，STL） through a 3D reconstruction and segmentation module of medical image， and stores it in the case base， and then the user can access the WebGL-rendered 3D medical objects inside web browsers.
Keywords： WebGL； medical image； 3D visualization； online teaching system
临床诊断是临床医师结合临床表现、体格检查、实验室结果、医学影像等信息对患者做出的综合判断。

在临床诊断的教学过程中，CT、MRI等三维医学影像对于医生空间感和形象思维的训练至关重要。

然而，此类影像数据在实际的医学教育中远没有得到充分而有效的利用。

其中的一个重要原因是此类影像数据量较大，不利于数据的传输和共享。

例如，单次CT扫描的原始多帧数据可达几十兆到几百兆字节。

此外，这些影像的原始数据形态为二维多帧图像，医生通常要依赖医院内部的专用影像工作站进行三维重建和查看。

这使得很多有价值的影像案例只能局限于医疗机构内部，难以在不同医疗机构之间形成可共享的教育资源。

针对以上问
题，本文将研究一种基于WebGL技术的三维医学影像网络共享方案，并实现一个基于b/s （browser/server）架构的公共医学影像在线教学系统。

一、研究进展
（一）医学影像三维可视化
医学影像的三维可视化技术在临床教学培训及医学教育中已有若干研究和应用，如：基于PACS/RIS的医学影像案例教学[1]、可交互的心脏三维数字模型在心脏超声教学中的应用[2]、虚拟现实（virtual reality）技术用于动脉内支架置放的术前模拟训练[3]、三维图形技术呈现心脏发育过程[4]等。

以上工作大多关注三维可视化本身的技术实现（如交互方式、三维呈现方式）或特定临床场景的应用研究，也有一些研究关注医疗业务流程集成及数据传输，如传统的DICOM协议[5]、PACS系统和IHE集成方案[6]等。

本文则重点关注如何以互联网教育的形式实现高效而便捷的数据集中管理和跨机构共享。

（二）WebGL简介
要实现b/s架构的三维可视化，传统的面向桌面应用的OpenGL或DirectX三维开发库难以直接满足需求。

在这种背景下，WebGL应运而生。

WebGL是基于OpenGL ES 2.0的面向网页客户端的Javascript API接口规范，可以直接在网页浏览器中实现对三维模型的渲染。

WebGL以客户端脚本的方式操作HTML5 Canvas容器中的三维对象，在底层，客户端脚本语言被编译为本地GPU可处理的原生代码，保证了执行性能的高效性。

目前，已有若干研究探索了基于WebGL实现医学三维可视化[7-11]，使得对医学影像数据的访问能够独立于医院内PACS/RIS等影像工作站系统。

这些研究表明基于WebGL实现医学三维可视化具有可行性，是本文开展工作的重要依据。

二、系统设计
本文设计了一种基于WebGL技术的在线教学系统，以实现三维医学影像数据的网络化共享。

图1显示了系统的整体结构，工作流程如下：（1）生成三维模型。

医生或技师对影像设备或PACS系统中的原始二维多帧数据进行三维重建，并通过分割算法提取感兴趣的解剖结构或组织，进而形成面绘制模型，最后将模型导出为PLY、OBJ、STL等高精度、高压缩比的三维矢量模型。

（2）上传案例数据。

在征得患者同意的前提下，将三维模型文件等资源统一上传到案例库。

上传时，医生可以指定案例数据的访问权限，对于有示范意义的案例可以设置为公共访问权限，供同行借鉴和学习；其它案例可以设置为个人访问权限，供日后个人研究和回顾使用。

（3）公共教学案例视图。

系统对案例库中的数据进行权限筛选，将具有公共访问权限的数据呈现到公共教学案例视图中。

所有的终端用户都可以访问其中的案例数据，系统还将提供案例的点评和批注功能，实现用户间的互动和沟通。

（4）个人研究案例视图。

对仅有个人访问权限的数据，该视图可供用户在线浏览、管理或下载个人案例数据，主要服务于医生个
人管理数据和科学研究的需要。

案例数据中的三维模型可以在支持WebGL标准的浏览器中直接进行交互式查看。

三、系统实现
基于以上的系统设计，本文选取介入心脏病学开展了案例研究。

介入心脏病学是通过体外操纵心导管进行心血管疾病诊断和治疗的学科，是一门强调实践性和操作性的专科，受训者必须积累一定数量的手术案例才能达到专业标准。

如ACC（American College of Cardiology，美国心脏病学会）要求受训者在上级医师的指导下至少完成300例诊断性操作和250例治疗性操作。

对典型手术案例的实践和学习是提高受训者专业水平的重要途径。

结合介入心脏病学教学培训的需求和前文的系统设计，本文开发了相应的在线教学系统。

该系统能够实现不同医疗水平医院之间的病例共享和借鉴，使得受训者可以访问资质更高和经验更丰富的其他医生的操作过程，从而为介入心脏病学的教学培训提供了一种有效的信息化教育手段。

该系统包含以下子系统：
（一）医学影像三维重建与分割模块
该模块基于VTK（Visualization Toolkit，可视化工具包）开发，支持DICOM格式的二维多帧图像，主要功能包括：三正交联动视图、体绘制、面绘制、窗宽窗位调整、体数据分割（自适应阈值分割、区域增长分割等），处理后的数据支持以PLY、STL或OBJ的格式导出（功能视频见https：///s/1pKT34zL及https：///s/1i5Gxcvr）。

经测试，300MB的多帧DICOM图像导出为STL三维模型后，体积小于10MB，压缩比高达30：1。

这种高压缩率对于网络化的案例共享和传输有重要意义。

（二）网络化案例管理平台
该平台支持用户以网页客户端访问和管理案例库，功能包括：上传案例数据、三维模型的交互式显示、案例点评等（图 2）。

平台的核心模块是一个基于WebGL开发的三维模型显示控件。

该控件支持的功能见图2，读者可以访问在线演示版本http：
//brahma.top/Tool/WebGL。

四、结束语
本文所提出的在线教学系统有几个特色：（1）受训者能够接触和学习来自不同医院和不同专家的大量案例，在教学培训案例的多样性上更有优势。

特别是对介入心脏病等实践性要求很高的学科，高层次医院和高水平专家的手术案例对于提高教学培训效果和个人专业水平具有积极作用。

（2）进一步挖掘临床数据的利用价值。

系统所使用的教学培训案例来自医生上传的真实案例，通常情形下，这些案例数据仅存储在医院内部的影像管理系统中，仅供本院工作的医生查阅和参考。

对这些数据的共享一定程度上缓解了信息孤岛的困境，使这些临床数据在教学培训方面能够发挥更大的价值。

（3）兼顾教育培训和个人专业发展的需要。

本系统直接
面向医生个人，对数据的存储和管理不再受限于所归属医院的内部信息系统。

这样，即使在多点执业、外地会诊或工作调动的情况下，医生也可以将案例统一管理到案例库中，供日后随时调阅，对于保障医生个人职业发展和科学研究的连续性有正面作用。

（4）技术层面上，充分利用了WebGL的平台无关和多浏览器支持的特性，用户在PC端及手机移动端的浏览器可直接以交互式的方式查看医学三维数据。

本系统目前已进入原型开发阶段，开发中涉及到若干需解决的技术问题：（1）三维模型文件转换过程中的信息损失。

CT、MRI等原始多帧二维图像对應的三维体数据经过分割后，通常仅保留用户感兴趣的组织（如骨骼、血管、软组织等），这导致了其它上下文解剖结构的丢弃。

为此，可以考虑将原始二维图像中的关键帧保留，与三维模型配合显示。

（2）流媒体服务中的数据调度策略及自适应传输调节方法。

案例数据除了三维模型文件外，还涉及手术录像等其它异构数据。

对于这类视频数据，为保证良好的用户体验，网络服务器应支持流媒体服务，以适应不同网络带宽下的传输要求。

（3）医学影像数据中患者信息的自动识别和匿名处理（de-identification）技术。

从保护病人隐私的角度出发，后续应开展相应研究，对案例库中的影像等各类患者进行有效的匿名化处理。

参考文献
[1]田芳，祝乐群，鲍虹，等.基于RIS/PACS的医学影像学临床教学[J].中国高等医学教育，2012（3）：85-86.
[2]Jerath A， Vegas A， Meineri M， et al. An interactive online 3D model of the heart assists in learning standard transesophageal echocardiography views [J]. Canadian Journal of
Anesthesia/Journal canadien d'anesthésie， 2010， 58（1）： 14-21. DOI： 10.1007/s12630-010-9410-5.
[3]Roguin A， Beyar R. Real case virtual reality training prior to carotid artery stenting [J]. Catheterization and Cardiovascular Interventions， 2010， 75（2）： 279-282. DOI：
10.1002/ccd.22211.
[4]Schleich J-M， Dillenseger J-L， Houyel L， et al. A new dynamic 3D virtual methodology for teaching the mechanics of atrial septation as seen in the human heart [J]. Anatomical Sciences Education， 2009， 2（2）： 69-77. DOI： 10.1002/ase.74.
[5]Association NEM， ISO 12052， Digital Imaging and Communications in Medicine （DICOM） Standard. 2016.
[6]Lariche MJ， Mesbahi E， Nasrabadi AM. IHE， Solution for integration of information systems and PACS [J]. Journal of Health Management and Informatics， 2014， 1（4）.
[7]Hou X， Sun J， Zhang J， A web-based solution for 3D medical image visualization [A]. In： Medical Imaging 2015： PACS and Imaging Informatics： Next Generation and Innovations [C]. Orlando， Florida， United States： SPIE， 2015： 941810-941810-8.
[8]Tiwari M， Kumar P， Agrawal A， Web-based Volume Visualization of 3D Medical Data using Slice Streaming Method [C]. Proceedings of the Sixth International Conference on Computer and Communication Technology 2015. Allahabad， India： ACM， 2015： 194-198. DOI：
10.1145/2818567.2818604.
[9]方路平，李國鹏，洪文杰，等.基于WebGL的医学图像三维可视化研究[J].计算机系统应用，2013（9）：25-30.
[10]汪小锋，阮增辉，郑 .基于HTML5的移动医学影像可视化系统的研究[J].中国医疗设备，2014，29（8）：49-51.
[11]雷辉，赵颖，王铭军，等.面向浏览器的医学影像可视化系统[J].中国图象图形学报，2015，20（4）：491-498.。