基于WebGL的三維醫(yī)學(xué)影像在線教學(xué)系統(tǒng)

尚倩　張寅升

摘 要：CT、MRI等三維醫(yī)學(xué)影像是臨床診斷的客觀依據(jù)之一，對于臨床直覺和形象思維的訓(xùn)練具有重要的價值。這類醫(yī)學(xué)影像的數(shù)據(jù)量通常較大，如單次CT掃描的原始多幀數(shù)據(jù)可達幾十兆到幾百兆字節(jié)。如此巨大的數(shù)據(jù)量給影像數(shù)據(jù)的網(wǎng)絡(luò)化傳輸和共享帶來了挑戰(zhàn)，這使得很多有價值的影像案例只能囿于醫(yī)療機構(gòu)內(nèi)部的影像工作站系統(tǒng)，無法形成大規(guī)模的共享教育資源。針對這一現(xiàn)狀，文章設(shè)計了一種基于WebGL的三維醫(yī)學(xué)影像在線教學(xué)系統(tǒng)。該系統(tǒng)首先通過一個醫(yī)學(xué)影像三維重建與分割模塊將原始多幀二維圖像轉(zhuǎn)化為OBJ、STL等高精度、高壓縮比的三維矢量模型，并統(tǒng)一存儲到案例庫，然后由用戶通過網(wǎng)頁瀏覽器中查看基于WebGL渲染的三維醫(yī)學(xué)對象。

關(guān)鍵詞：WebGL；醫(yī)學(xué)影像；三維可視化；在線教學(xué)系統(tǒng)

中圖分類號：G642 文獻標(biāo)志碼：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

臨床診斷是臨床醫(yī)師結(jié)合臨床表現(xiàn)、體格檢查、實驗室結(jié)果、醫(yī)學(xué)影像等信息對患者做出的綜合判斷。在臨床診斷的教學(xué)過程中，CT、MRI等三維醫(yī)學(xué)影像對于醫(yī)生空間感和形象思維的訓(xùn)練至關(guān)重要。然而，此類影像數(shù)據(jù)在實際的醫(yī)學(xué)教育中遠沒有得到充分而有效的利用。其中的一個重要原因是此類影像數(shù)據(jù)量較大，不利于數(shù)據(jù)的傳輸和共享。例如，單次CT掃描的原始多幀數(shù)據(jù)可達幾十兆到幾百兆字節(jié)。此外，這些影像的原始數(shù)據(jù)形態(tài)為二維多幀圖像，醫(yī)生通常要依賴醫(yī)院內(nèi)部的專用影像工作站進行三維重建和查看。這使得很多有價值的影像案例只能局限于醫(yī)療機構(gòu)內(nèi)部，難以在不同醫(yī)療機構(gòu)之間形成可共享的教育資源。針對以上問題，本文將研究一種基于WebGL技術(shù)的三維醫(yī)學(xué)影像網(wǎng)絡(luò)共享方案，并實現(xiàn)一個基于b/s（browser/server）架構(gòu)的公共醫(yī)學(xué)影像在線教學(xué)系統(tǒng)。

一、研究進展

（一）醫(yī)學(xué)影像三維可視化

醫(yī)學(xué)影像的三維可視化技術(shù)在臨床教學(xué)培訓(xùn)及醫(yī)學(xué)教育中已有若干研究和應(yīng)用，如：基于PACS/RIS的醫(yī)學(xué)影像案例教學(xué)[1]、可交互的心臟三維數(shù)字模型在心臟超聲教學(xué)中的應(yīng)用[2]、虛擬現(xiàn)實（virtual reality）技術(shù)用于動脈內(nèi)支架置放的術(shù)前模擬訓(xùn)練[3]、三維圖形技術(shù)呈現(xiàn)心臟發(fā)育過程[4]等。以上工作大多關(guān)注三維可視化本身的技術(shù)實現(xiàn)（如交互方式、三維呈現(xiàn)方式）或特定臨床場景的應(yīng)用研究，也有一些研究關(guān)注醫(yī)療業(yè)務(wù)流程集成及數(shù)據(jù)傳輸，如傳統(tǒng)的DICOM協(xié)議[5]、PACS系統(tǒng)和IHE集成方案[6]等。本文則重點關(guān)注如何以互聯(lián)網(wǎng)教育的形式實現(xiàn)高效而便捷的數(shù)據(jù)集中管理和跨機構(gòu)共享。

（二）WebGL簡介

要實現(xiàn)b/s架構(gòu)的三維可視化，傳統(tǒng)的面向桌面應(yīng)用的OpenGL或DirectX三維開發(fā)庫難以直接滿足需求。在這種背景下，WebGL應(yīng)運而生。WebGL是基于OpenGL ES 2.0的面向網(wǎng)頁客戶端的Javascript API接口規(guī)范，可以直接在網(wǎng)頁瀏覽器中實現(xiàn)對三維模型的渲染。WebGL以客戶端腳本的方式操作HTML5 Canvas容器中的三維對象，在底層，客戶端腳本語言被編譯為本地GPU可處理的原生代碼，保證了執(zhí)行性能的高效性。目前，已有若干研究探索了基于WebGL實現(xiàn)醫(yī)學(xué)三維可視化[7-11]，使得對醫(yī)學(xué)影像數(shù)據(jù)的訪問能夠獨立于醫(yī)院內(nèi)PACS/RIS等影像工作站系統(tǒng)。這些研究表明基于WebGL實現(xiàn)醫(yī)學(xué)三維可視化具有可行性，是本文開展工作的重要依據(jù)。

二、系統(tǒng)設(shè)計

本文設(shè)計了一種基于WebGL技術(shù)的在線教學(xué)系統(tǒng)，以實現(xiàn)三維醫(yī)學(xué)影像數(shù)據(jù)的網(wǎng)絡(luò)化共享。圖1顯示了系統(tǒng)的整體結(jié)構(gòu)，工作流程如下：（1）生成三維模型。醫(yī)生或技師對影像設(shè)備或PACS系統(tǒng)中的原始二維多幀數(shù)據(jù)進行三維重建，并通過分割算法提取感興趣的解剖結(jié)構(gòu)或組織，進而形成面繪制模型，最后將模型導(dǎo)出為PLY、OBJ、STL等高精度、高壓縮比的三維矢量模型。（2）上傳案例數(shù)據(jù)。在征得患者同意的前提下，將三維模型文件等資源統(tǒng)一上傳到案例庫。上傳時，醫(yī)生可以指定案例數(shù)據(jù)的訪問權(quán)限，對于有示范意義的案例可以設(shè)置為公共訪問權(quán)限，供同行借鑒和學(xué)習(xí)；其它案例可以設(shè)置為個人訪問權(quán)限，供日后個人研究和回顧使用。（3）公共教學(xué)案例視圖。系統(tǒng)對案例庫中的數(shù)據(jù)進行權(quán)限篩選，將具有公共訪問權(quán)限的數(shù)據(jù)呈現(xiàn)到公共教學(xué)案例視圖中。所有的終端用戶都可以訪問其中的案例數(shù)據(jù)，系統(tǒng)還將提供案例的點評和批注功能，實現(xiàn)用戶間的互動和溝通。（4）個人研究案例視圖。對僅有個人訪問權(quán)限的數(shù)據(jù)，該視圖可供用戶在線瀏覽、管理或下載個人案例數(shù)據(jù)，主要服務(wù)于醫(yī)生個人管理數(shù)據(jù)和科學(xué)研究的需要。案例數(shù)據(jù)中的三維模型可以在支持WebGL標(biāo)準(zhǔn)的瀏覽器中直接進行交互式查看。

三、系統(tǒng)實現(xiàn)

基于以上的系統(tǒng)設(shè)計，本文選取介入心臟病學(xué)開展了案例研究。介入心臟病學(xué)是通過體外操縱心導(dǎo)管進行心血管疾病診斷和治療的學(xué)科，是一門強調(diào)實踐性和操作性的專科，受訓(xùn)者必須積累一定數(shù)量的手術(shù)案例才能達到專業(yè)標(biāo)準(zhǔn)。如ACC（American College of Cardiology，美國心臟病學(xué)會）要求受訓(xùn)者在上級醫(yī)師的指導(dǎo)下至少完成300例診斷性操作和250例治療性操作。對典型手術(shù)案例的實踐和學(xué)習(xí)是提高受訓(xùn)者專業(yè)水平的重要途徑。結(jié)合介入心臟病學(xué)教學(xué)培訓(xùn)的需求和前文的系統(tǒng)設(shè)計，本文開發(fā)了相應(yīng)的在線教學(xué)系統(tǒng)。該系統(tǒng)能夠?qū)崿F(xiàn)不同醫(yī)療水平醫(yī)院之間的病例共享和借鑒，使得受訓(xùn)者可以訪問資質(zhì)更高和經(jīng)驗更豐富的其他醫(yī)生的操作過程，從而為介入心臟病學(xué)的教學(xué)培訓(xùn)提供了一種有效的信息化教育手段。

該系統(tǒng)包含以下子系統(tǒng)：

（一）醫(yī)學(xué)影像三維重建與分割模塊

該模塊基于VTK（Visualization Toolkit，可視化工具包）開發(fā)，支持DICOM格式的二維多幀圖像，主要功能包括：三正交聯(lián)動視圖、體繪制、面繪制、窗寬窗位調(diào)整、體數(shù)據(jù)分割（自適應(yīng)閾值分割、區(qū)域增長分割等），處理后的數(shù)據(jù)支持以PLY、STL或OBJ的格式導(dǎo)出（功能視頻見https：//pan.baidu.com/s/1pKT34zL及https：//pan.baidu.com/s/1i5Gxcvr）。經(jīng)測試，300MB的多幀DICOM圖像導(dǎo)出為STL三維模型后，體積小于10MB，壓縮比高達30：1。這種高壓縮率對于網(wǎng)絡(luò)化的案例共享和傳輸有重要意義。

（二）網(wǎng)絡(luò)化案例管理平臺

該平臺支持用戶以網(wǎng)頁客戶端訪問和管理案例庫，功能包括：上傳案例數(shù)據(jù)、三維模型的交互式顯示、案例點評等（圖 2）。平臺的核心模塊是一個基于WebGL開發(fā)的三維模型顯示控件。該控件支持的功能見圖2，讀者可以訪問在線演示版本http：//brahma.top/Tool/WebGL。

四、結(jié)束語

本文所提出的在線教學(xué)系統(tǒng)有幾個特色：（1）受訓(xùn)者能夠接觸和學(xué)習(xí)來自不同醫(yī)院和不同專家的大量案例，在教學(xué)培訓(xùn)案例的多樣性上更有優(yōu)勢。特別是對介入心臟病等實踐性要求很高的學(xué)科，高層次醫(yī)院和高水平專家的手術(shù)案例對于提高教學(xué)培訓(xùn)效果和個人專業(yè)水平具有積極作用。（2）進一步挖掘臨床數(shù)據(jù)的利用價值。系統(tǒng)所使用的教學(xué)培訓(xùn)案例來自醫(yī)生上傳的真實案例，通常情形下，這些案例數(shù)據(jù)僅存儲在醫(yī)院內(nèi)部的影像管理系統(tǒng)中，僅供本院工作的醫(yī)生查閱和參考。對這些數(shù)據(jù)的共享一定程度上緩解了信息孤島的困境，使這些臨床數(shù)據(jù)在教學(xué)培訓(xùn)方面能夠發(fā)揮更大的價值。（3）兼顧教育培訓(xùn)和個人專業(yè)發(fā)展的需要。本系統(tǒng)直接面向醫(yī)生個人，對數(shù)據(jù)的存儲和管理不再受限于所歸屬醫(yī)院的內(nèi)部信息系統(tǒng)。這樣，即使在多點執(zhí)業(yè)、外地會診或工作調(diào)動的情況下，醫(yī)生也可以將案例統(tǒng)一管理到案例庫中，供日后隨時調(diào)閱，對于保障醫(yī)生個人職業(yè)發(fā)展和科學(xué)研究的連續(xù)性有正面作用。（4）技術(shù)層面上，充分利用了WebGL的平臺無關(guān)和多瀏覽器支持的特性，用戶在PC端及手機移動端的瀏覽器可直接以交互式的方式查看醫(yī)學(xué)三維數(shù)據(jù)。

本系統(tǒng)目前已進入原型開發(fā)階段，開發(fā)中涉及到若干需解決的技術(shù)問題：（1）三維模型文件轉(zhuǎn)換過程中的信息損失。CT、MRI等原始多幀二維圖像對應(yīng)的三維體數(shù)據(jù)經(jīng)過分割后，通常僅保留用戶感興趣的組織（如骨骼、血管、軟組織等），這導(dǎo)致了其它上下文解剖結(jié)構(gòu)的丟棄。為此，可以考慮將原始二維圖像中的關(guān)鍵幀保留，與三維模型配合顯示。（2）流媒體服務(wù)中的數(shù)據(jù)調(diào)度策略及自適應(yīng)傳輸調(diào)節(jié)方法。案例數(shù)據(jù)除了三維模型文件外，還涉及手術(shù)錄像等其它異構(gòu)數(shù)據(jù)。對于這類視頻數(shù)據(jù)，為保證良好的用戶體驗，網(wǎng)絡(luò)服務(wù)器應(yīng)支持流媒體服務(wù)，以適應(yīng)不同網(wǎng)絡(luò)帶寬下的傳輸要求。（3）醫(yī)學(xué)影像數(shù)據(jù)中患者信息的自動識別和匿名處理（de-identification）技術(shù)。從保護病人隱私的角度出發(fā)，后續(xù)應(yīng)開展相應(yīng)研究，對案例庫中的影像等各類患者進行有效的匿名化處理。

參考文獻

[1]田芳，祝樂群，鮑虹，等.基于RIS/PACS的醫(yī)學(xué)影像學(xué)臨床教學(xué)[J].中國高等醫(yī)學(xué)教育，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的醫(yī)學(xué)圖像三維可視化研究[J].計算機系統(tǒng)應(yīng)用，2013（9）：25-30.

[10]汪小鋒，阮增輝，鄭 .基于HTML5的移動醫(yī)學(xué)影像可視化系統(tǒng)的研究[J].中國醫(yī)療設(shè)備，2014，29（8）：49-51.

[11]雷輝，趙穎，王銘軍，等.面向瀏覽器的醫(yī)學(xué)影像可視化系統(tǒng)[J].中國圖象圖形學(xué)報，2015，20（4）：491-498.