基于WebGL的三維醫學影像在線教學系統

尚倩　張寅升

摘 要：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：//pan.baidu.com/s/1pKT34zL及https：//pan.baidu.com/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.