面向Web的遠程圖像可視化系統(tǒng)的研制

劉兆明 郭 景 柯永振(天津工業(yè)大學計算機科學與軟件學院 天津 300387)

0 引 言

隨著當代科技的進步，計算機圖形學技術以及圖像處理技術有了飛速發(fā)展，其可視化程序在醫(yī)學領域[1-2]和地質科學領域中得到了較為廣泛的使用。由于醫(yī)療設備的不斷發(fā)展，產(chǎn)生了大量的醫(yī)學影像數(shù)據(jù)，其中包含許多數(shù)據(jù)信息，醫(yī)生無法全面掌握這些信息，這對醫(yī)生診斷有一定的阻礙。醫(yī)學影像可視化系統(tǒng)運用圖像處理技術和計算機圖形學技術，深度挖掘影像中的數(shù)據(jù)信息。

當前主要有兩類醫(yī)學影像可視化平臺。一類是客戶端形式的，現(xiàn)如今發(fā)展相當成熟，這種系統(tǒng)在各項交互和可視化功能方面都特別完善。例如，美國通用電器公司的GE，已經(jīng)廣泛應用于醫(yī)療機構，開源軟件中Osirix也被廣泛使用在各個科研機構中，韓國英飛達軟件有限公司的INFINITT。另外一類就是基于瀏覽器插件或者是虛擬化桌面的醫(yī)學影像可視化平臺，功能上發(fā)展也趨于完善、逐步接近并替換純客戶端。例如teraRecon公司的INtuition系統(tǒng)。上述兩類可視化系統(tǒng)都是依賴于特定平臺或平臺相關的插件。這類系統(tǒng)需要在計算機端安裝特定的軟件，增加了后期系統(tǒng)維護的成本與難度，不利于后期系統(tǒng)更新及維護。

在瀏覽器上不安裝第三方可視化插件，并對醫(yī)學影像有良好的可視化效果的純面向Web端的可視化系統(tǒng)，已經(jīng)成為未來的發(fā)展趨勢，當前一些研究學者和商業(yè)公司已經(jīng)開始著手研究。Shen等[3]提出面向服務器的系統(tǒng)架構，不同地區(qū)的用戶通過網(wǎng)絡訪問系統(tǒng)，進行醫(yī)學圖像數(shù)據(jù)處理，服務器分發(fā)相同的醫(yī)療數(shù)據(jù)模型，實現(xiàn)了二維醫(yī)學圖像數(shù)據(jù)的協(xié)同可視化。

高鵬等[4]提出以服務器為中心的建模思想，利用WebSocket和Canvas協(xié)議在網(wǎng)頁進行事件交互、主客戶端雙向通信、圖形圖像繪制，結合VTK三維可視化工具包，在服務器端進行數(shù)據(jù)處理、渲染，并投影為二維圖片后發(fā)送到客戶端顯示，實現(xiàn)了三維重建。喬梁等[5]采用以服務器處理為中心的偏態(tài)處理模式，服務器端負責三維渲染任務，并根據(jù)客戶端瀏覽請求實時投影為二維圖像，客戶端用于提交瀏覽請求及下載服務器端具有3D可視效果的“偽3D”二維數(shù)據(jù)。通過建立客戶端偽3D交互坐標/視角變換模型，結合JS+HTML技術，實現(xiàn)客戶端偽3D交互。Hou等[6]提出的解決方案是基于服務器端/客戶端架構，采用在服務器端進行醫(yī)療圖像分析并使用GPU加速技術處理圖像，同時將處理圖像結果傳到使用HTML5和JavaScript開發(fā)的Web界面進行顯示。雷輝等[7]提出并實現(xiàn)了基于HTML5的面向瀏覽器的醫(yī)學影像可視化系統(tǒng)，通過在服務器端利用DCMTK影像解析模塊解析圖像數(shù)據(jù)并在服務器端進行繪制，通過異步圖像載入模塊 Web Worker 傳送數(shù)據(jù)到前臺，二維采用canvas技術和WebGL技術進行瀏覽器端硬件加速繪制顯示。三維采用前后端異步操作以提供漸進式可視化，這種方法缺點就是前端繪制效果相對于后端要模糊不少。Zhou等[8]使用集群服務器進行渲染，集群服務器可以提供強大渲染能力，同時允許主用戶將可視化的控制權委派給其他用戶，讓多個用戶能夠控制可視化場景的交互，并可以與其他用戶進行聊天和即時消息傳遞。向俊等[9]通過在服務器端的MeVisLab進行體數(shù)據(jù)三維重建，將重建數(shù)據(jù)以X3D的格式輸出，并且存在服務器的關系型數(shù)據(jù)庫中，當瀏覽器客戶端發(fā)起圖像數(shù)據(jù)請求時，服務器利用超文本預處理器將圖像數(shù)據(jù)轉換成JavaScript對象表示法傳輸?shù)娇蛻舳耍蛻舳私邮盏綌?shù)據(jù)后利用WebGL特性將三維圖像渲染。

Wu等[10]提出一個基于云平臺的醫(yī)學影像可視化平臺，在云端進行醫(yī)學影像的存儲、編解碼、分割以及體繪制，通過數(shù)據(jù)傳輸協(xié)議和自適應數(shù)據(jù)傳輸協(xié)議進行數(shù)據(jù)通信。

目前這種服務器端解決方案，都是在服務器端對醫(yī)學圖像原始體數(shù)據(jù)進行存儲、解析、預處理及渲染，最終只把處理結果發(fā)送到瀏覽器端進行顯示，只有服務器端擁有完整的體數(shù)據(jù)。用戶修改可視化參數(shù)，需要在網(wǎng)絡上連續(xù)發(fā)送一系列的數(shù)據(jù)請求，使得應用程序對用戶特定的網(wǎng)絡延遲高度敏感，如果并行用戶大大增加，同時對圖像數(shù)據(jù)進行可視化操作，必然會加大服務器負載，可能導致服務器運行緩慢，甚至崩潰。

與此同時還有另一種可視化實現(xiàn)方式，本地瀏覽器醫(yī)學圖像可視化方式。在瀏覽器端直接對圖像體數(shù)據(jù)進行可視化處理，從讀取圖像體數(shù)據(jù)到數(shù)據(jù)解析、數(shù)據(jù)預處理、三維重建等過程都在瀏覽器端完成。Daniel等[11]開發(fā)的Slice：Drop 通過使用WebGL[12]和HTML5的canvas繪制二維和三維圖像，用開源的工具包XTK執(zhí)行渲染，系統(tǒng)實現(xiàn)了正交MPR可視化及 MIP可視化，并可對其進行部分交互操作。

Bernal-Rusiel等[13]提出一個基于Web的軟件解決方案來實現(xiàn)醫(yī)學圖像可視化，系統(tǒng)采用XTK工具包進行客戶端渲染，實現(xiàn)DICOM圖像二維可視化。Pienaar等[14]實現(xiàn)了一個基于Web的醫(yī)學數(shù)據(jù)存儲和數(shù)據(jù)處理管理系統(tǒng)，系統(tǒng)采用模型- 視圖- 控制器軟件架構模式，實現(xiàn)二維醫(yī)學影像顯示以及MPR多層面重建。牛世元[15]使用HTML5中Canvas標簽、DWV框架和XTK框架實現(xiàn)了基于Web的DICOM圖像解析、2D顯示和最大密度投影三維重建可視化系統(tǒng)。

在本文中，我們提出基于Web的技術解決方案可以實現(xiàn)高效的實時醫(yī)學影像可視化。該解決方案采用富客戶端策略，每個客戶端都擁有完整的體數(shù)據(jù)，各個用戶都可以獨立地對完整體數(shù)據(jù)進行可視化操作，不需要對原始數(shù)據(jù)進行降采樣，對于光線投射體繪制顯示效果比較好，精度比較高，能夠清晰地顯示組織結構。多個用戶同時運行此系統(tǒng)時互不影響，能夠有效降低服務器運行壓力。系統(tǒng)采用加速度步長采樣法代替?zhèn)鹘y(tǒng)的等距離步長采樣方法以及不透明度提前截止法來提高光線投射三維重建速度。系統(tǒng)實現(xiàn)了二維MPR實時可視化和光線投射直接體繪制實時可視化以及相關的交互功能。系統(tǒng)所有可視化功能模塊置于一個頁面上，醫(yī)護人員更加方便、直觀地從不同角度觀察特定解剖結構，能夠更好地確定病變情況，因此構建基于Web端醫(yī)學影像可視化平臺具有極重要意義。

本文主要貢獻：

1) 正交MPR顯示，即橫斷面、矢狀面、冠狀面可視化，交互功能主要包括像素點選取、長度測量、窗寬窗位調整、圖像反顯、自動強度調整、像素定位等。

2) 正交MPR多層面三維可視化，可對圖像進行放大縮小、旋轉、 移動、像素定位等操作。

3) 基于光線投射體繪制可視化，可以對圖像進行放大縮小、旋轉、移動、顏色選取、采樣步長調整、α值修正、透明度調整及插值調整等交互操作。

1 系統(tǒng)整體設計

本系統(tǒng)主要參照傳統(tǒng)B/S 模式進行整體架構設計，瀏覽器端與服務器端通過HTTP協(xié)議進行通信。如圖1所示，系統(tǒng)整體架構由醫(yī)學影像數(shù)據(jù)存儲、數(shù)據(jù)傳輸、圖像解碼、預處理、數(shù)據(jù)渲染、瀏覽器顯示等構成。服務器負責數(shù)據(jù)存儲、HTTP協(xié)議負責數(shù)據(jù)傳輸、DicomParser[16]負責圖像解碼，預處理負責對數(shù)據(jù)進行整理，THREE.js[17]負責對數(shù)據(jù)進行可視化渲染，瀏覽器負責影像顯示。

圖1 基于B/S的醫(yī)學影像可視交互平臺系統(tǒng)架構

2 客戶端- 服務器端數(shù)據(jù)傳輸

基于HTTP通信機制的Web技術，采用的是請求- 獲取信息傳遞模式，每一次從服務器上更新數(shù)據(jù)到本地客戶端，都需要重新加載整個頁面，在這過程中會加載不需要重新加載的數(shù)據(jù)，由此造成網(wǎng)絡資源的浪費。本系統(tǒng)通過采用Fetch API[18]中GlobalFetch.Fetch()方法實現(xiàn)遠程數(shù)據(jù)獲取，使得后臺的數(shù)據(jù)傳輸不會影響前臺界面交互。根據(jù)提供的URL路徑，使用Fetch()方法，發(fā)起對遠程資源的請求，該方法返回一個Promise對象，并在返回的結果中進行檢索。如果瀏覽器不支持Fetch方法，將通過Fetch-Polyfill來定期讀取請求，獲取Fetch方法。系統(tǒng)通過流式傳輸，將所有數(shù)據(jù)從服務器端傳送到客戶端，對大體積數(shù)據(jù)來說：當所有數(shù)據(jù)被獲取時，“Load” Promise將會執(zhí)行Resolve()方法。Promise 提供了串行/并行異步的編程簡化方案，如圖2 所示，緩慢的數(shù)據(jù)獲取不會對其他操作產(chǎn)生影響。

圖2 Promise流程

由于目前Fetch() 方法還不支持實時進度條，系統(tǒng)通過Ajax中OnProgress()方法實現(xiàn)數(shù)據(jù)加載進度條顯示。對于移動平臺來說，系統(tǒng)同樣適用。

3 預處理

對于數(shù)據(jù)量過大的原始數(shù)據(jù)，通常需要加以精煉和選擇，以此來減少數(shù)據(jù)量，同時需要最大限度減少有用信息的丟失，使在資源最少的情況下讓采集到的數(shù)據(jù)產(chǎn)生最好的效果。當數(shù)據(jù)量過小而有可能影響可視化的效果時，需要進行有效地插值處理增加數(shù)據(jù)量，以增強圖像的可視化效果。本文在對原始數(shù)據(jù)預處理階段將DICOM文件通過DicomParser解析并將數(shù)據(jù)轉換為“ series>stack>frame ”具有一定規(guī)則的層次結構數(shù)據(jù)。并將數(shù)據(jù)全部存儲在一個數(shù)組中，合并數(shù)組中的series，從series 中獲取stack。計算必要的信息，方向余弦、命令幀、起始點、計算間距、完整性檢查、初始化變量、斜率最小/最大值、計算變換矩陣等。最終將原始像素數(shù)據(jù)包裝成unit8 紋理，將其傳遞給GPU。

4 圖形應用界面

在客戶端，系統(tǒng)使用HTML5和CSS開發(fā)Web界面，可以有效地在瀏覽器端顯示從遠程服務器端接收到的醫(yī)學圖像數(shù)據(jù)。通過不同處理技術(正交MPR、DVR)處理醫(yī)學圖像體數(shù)據(jù)集，還可以切換不同的交互模式(平移、縮放、旋轉等)。系統(tǒng)主要由圖3顯示的5部分可視化視圖模塊構成，底層三個窗口分別顯示，正交MPR橫斷面、矢狀面、冠狀面視圖。上層兩個窗口分別為MPR多層面三維重建可視化模塊，光線投射直接體繪制可視化模塊，右側下拉列表為各個模塊部分功能控制菜單。

圖3 系統(tǒng)界面

系統(tǒng)可視化渲染部分，主要通過ThreeJS實現(xiàn)。如圖4所示，Three.js渲染流程，首先需要創(chuàng)建geometry對象，定義物體的形式、形狀，并將其賦予一定的材質，創(chuàng)建出能夠添加到場景中的Mesh對象，并通過Three.js渲染器，渲染Mesh對象。渲染分為3D可視化渲染和2D可視化渲染，2D可視化需要使用正投影相機投射和3D可視化需要使用透視相機。

圖4 Three.js運行流程

4.1 二維圖像可視化模塊

在二維可視化界面中分別顯示正交MPR的三個平面，即橫斷面、矢狀面、及冠狀面視圖。并且用戶可以通過提供的交互工具，對圖像進行操作，在二維切片顯示區(qū)域，實現(xiàn)了定位功能，允許用戶雙擊窗口中切片任一像素點，其余窗口將會對應顯示該像素點所處的切片。同時可以通過滑動滾輪改變窗口中顯示的切片。其中還可以對圖像進行窗寬窗位調整、圖像反顯、長度測量、縮放、平移、角度旋轉、圖像行反轉、列反轉等交互操作。

4.1.1 窗寬窗位調整

調整窗寬窗位等操作都在客戶端瀏覽器完成，避免了和服務器頻繁的交互。在本系統(tǒng)中，窗寬和窗位調整主要通過JavaScript腳本語言捕獲鼠標事件或觸屏操作事件，監(jiān)控stack中MinMax 步長的改變量，從而獲得窗寬和窗位數(shù)值。因為WebGL不支持浮點型紋理，不可把高精度的紋理傳遞給著色器進行繪制，同時因為DICOM圖像都是灰度圖像，為了可以用更高精度的紋理來繪制，以取得更好的繪制效果。在本系統(tǒng)中，我們通過將RGBA的所有顏色存儲空間都用來存儲DICOM圖像的灰度值信息。將紋理傳入到著色器，并分別映射到0～255等256種不同程度的灰階值，進一步通過查詢對應偽色表，獲取顏色值。

4.1.2 長度測量

系統(tǒng)提供了長度測量工具，通過長度測量工具對病變區(qū)域進行測量。首先需要獲取在屏幕坐標系下測量的起始點和結束點，之后結合DICOM影像中起始點及像素的間距值，計算得到測量區(qū)域真實長度。

4.1.3 縮放、平移、旋轉

在二維可視化模塊中，主要通過控制WebGL中模型矩陣變換，實現(xiàn)對二維圖像的縮放、平移、旋轉等交互功能，即將初始位置坐標P(x,y,z)映射到縮放、旋轉、平移后的位置坐標P′(x′,y′,z′)。

4.2 三維可視化

此模塊分為兩部分：正交MPR多層面三維重建可視化以及基于光線投射直接體繪制可視化。不同于二維可視化，三維可視化運用Three.JS中透視相機。

4.2.1 正交MPR多層面重建三維可視化

此部分3D顯示和2D顯示的本質區(qū)別是用不同方式來看待相同的對象。分別將橫斷面、矢狀面、冠狀面方向的2D切片，添加到三維切片場景中。可對圖像進行放大、縮小、旋轉、移動、像素定位等交互操作。

4.2.2 光線投射算法改進

在圖像上的像素點處，向視線方向投射射線，在射線穿越體數(shù)據(jù)時候，延射線方向進行加速度步長采樣，通過三線性插值算法獲得采樣點數(shù)據(jù)值，得到重采樣點的顏色值和不透明度，并進行融合。系統(tǒng)采用光線投射提前截止法來提高整體繪制時間。

在本文的ray-casting算法實現(xiàn)中，由于需要射線投射穿越最大距離作為循環(huán)采樣控制的結束依據(jù)，所以首先要渲染正向面深度圖和背向面深度圖，分別得到正向深度紋理和背向深度紋理，通過計算得到射線最大穿越距離。在頂點著色器中計算射線方向及頂點位置，射線方向由頂點所處世界坐標及光線投射的方向共同決定。當不透明度α累積到0.95時或者采樣點超出最大采樣距離時，即停止采樣，輸出合成顏色值。

傳統(tǒng)光線投射算法都是采用等距離步長采樣。在一條射線上靠近前端的體素對三維重建作用大，遠離前端的體素對三維重建作用小，由此本文提出采用加速度方式進行采樣如圖5所示，越靠近射線后端，采樣步長越大，通過采用此方法減少重采樣點的選取來提高重建速度。L1為初始采樣間距，d為加速度步長變化因子，實驗驗證當d=0.004時，繪制速度和重建效果最好。

圖5 加速度采樣距離示意圖

第k個體素與第(k+1)個體素之間距離為L1+(k-1)d， 假設一條射線上有560個重采樣點，初始采樣間距為L1，則總長度為560L1。運用加速度算法計算知：需要選取505的重采樣點，相對于等距離采樣要少選取55個采樣點，少取約9.8%的采樣點。

在光線投射[19-22]過程中，投射光線不一定經(jīng)過原始網(wǎng)格頂點的數(shù)據(jù)點，重采樣點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)

傳遞函數(shù)將光學屬性(顏色和不透明度)分配給體數(shù)據(jù)變量值i，F(xiàn)rgba(i)=(r,g,b,α)，以改善體數(shù)據(jù)內部可視化，設置不同的傳遞函數(shù)，會有不同的三維體繪制效果。在光線投射過程中，當光線穿過體數(shù)據(jù)時，傳遞函數(shù)獲取每個采樣點處的光學屬性，之后使用組合函數(shù)融合。本文采用從前到后的順序，對采樣點進行合成：

(2)

式中：Cnow、αnow為第i個體素的顏色值和不透明度；Cin、αin為進入第i個體素是的顏色值和不透明度；Cout、αout為光線穿過第i個體素時所累積的顏色值和不透明度。

使用預設傳遞函數(shù)在交互上要比手動調節(jié)傳遞函數(shù)更加方便，然而預設傳輸函數(shù)，只可以顯示一部分特定的結構，這對用戶查看圖像中其余結構信息有一定的阻礙。顏色傳遞函數(shù)和不透明度傳遞函數(shù)，分別用于獲取RGB值以及Alpha值。用戶通過手動調節(jié)控制點的標量值范圍和光學屬性來調整繪制結果，方便用戶查看圖像中感興趣的組織結構。系統(tǒng)中顏色傳遞函數(shù)主要包含defaults、pectrum、hot_and_cold、gold、red、green、blue、walking_dead、random幾種類型參數(shù)。用戶通過選取不同的參數(shù)，通過改變?yōu)榻M織結構賦予不同顏色，最終顯示不同的繪制結果。不透明度傳遞函數(shù)包含以下幾種類型參數(shù)：linear、lowpass、bandpass、highpass、float、random。對CT圖像體數(shù)據(jù)進行可視化渲染時，不透明度設置為highpass, 能夠有效地突出顯示骨骼結構。

5 測試與結果

本實驗選取的測試服務器配置為CPU: Intel(R) Xeon(R) CPU E3-1225 V2 @ 3.20 GHz，顯卡: NVIDIA Quadro 600，內存: 8 GB，操作系統(tǒng): Win10 64位；對于客戶端，CPU: Pentium(R) Dual-core @ 2.10 GHz，顯卡: NVIDIA GeForce GT 240 MB 內存: 3 GB，操作系統(tǒng): Win10 64位。醫(yī)學斷面影像體數(shù)據(jù)集為天津某醫(yī)院放射科所提供，體數(shù)據(jù)為頭部DICOM數(shù)據(jù)，共有336張，單幀斷面圖像分辨率為536×536，共計占用184 MB存儲空間。實驗中測試服務器和客戶機處在局域網(wǎng)中，我們通過Chrome、Firefox、IE及Opera等4款主流瀏覽器對本系統(tǒng)進行測試，實驗結果發(fā)現(xiàn)在不同的瀏覽器上效果表現(xiàn)都相當不錯，都可以清晰地顯示二維圖像及三維圖像。

5.1 DICOM圖像數(shù)據(jù)請求

本次實驗數(shù)據(jù)，在Windows 10 平臺下Chrome瀏覽器上運行所得到的結果。分別從遠程服務器上請求三組DICOM醫(yī)學影像數(shù)據(jù)，圖像數(shù)目分別為50、150、336，傳輸結果如表1 所示。

表1 DICOM圖像傳輸時間

從表1中可看出，每次傳輸總時間都會由CT圖像數(shù)目不同而有所差異，圖像數(shù)目對數(shù)據(jù)傳輸有很大的影響，單張圖像傳輸時間延遲一般都維持在82～939 ms。

5.2 二維交互

在窗口底側可視化界面中分別顯示正交MPR的三個視圖，即橫斷面、矢狀面、冠狀面視圖。在本文系統(tǒng)中，通過提供交互工具，來幫助操作人員可以更加方便地對圖像進行一些列可視化操作，在圖7中列舉了2D可視化交互的幾種方式，因為WebGL對硬件具有加速作用，所以在整個交互過程中比較流暢。如圖7所示：(a)為系統(tǒng)通過調整窗寬可以清楚地看清牙齒和頜骨組織；(b)為反色顯示；(c)為通過測量工具得到組織部位長度。

圖7 二維交互界面

5.3 三維交互

在三維可視化模塊方面本文實現(xiàn)了正交MPR多層面三維可視化以及基于光線投射算法的直接體繪制。圖8 (a) 中展示的是正交MPR多層面三維可視化。在直接體繪制實驗中將Lut設為red 、不透明度設為highpass、初始采樣步長設置為239、alphaCorrection設為0.2，插值設為0，實驗效果如圖8 (b) 所示，渲染幀數(shù)保持49幀/s左右，整體交互比較流暢。圖8(c)為旋轉后的三維體繪制效果。

圖8 三維交互界面

在一般情況下，瀏覽器加載影像數(shù)目和計算機內存有關，內存大小決定加載影像數(shù)目多少。實驗采用固定影片數(shù)目336張，改變其余參數(shù)進行對比。

將366張CT圖片首次加載到系統(tǒng)中，lut被設置為隨機值，opacity同樣為隨機值，初始采樣步長為125，alphaCorrection為0.1，fps保持在50～55幀/s，各項操作還算比較流暢。

將參數(shù)初始采樣步長設置為200，AlphaCorrection為0.2，interpolation設置為0時，繪制效果最好，可以清晰地觀察到組織結構，此時fps維持在45～50幀/s。各項交互相對來說都比較流暢。然而當插值調節(jié)為1時，由于需要進行大量的插值計算，其占用特多的GPU，導致系統(tǒng)卡頓，此時的fps只有13幀/s左右。

將不透明度參數(shù)值設為Highpass，alphaCorrection固定設置為0.5，調整初始采樣步長，當超過330，fps只能維持在15～19幀/s，系統(tǒng)會出現(xiàn)明顯卡頓現(xiàn)象。

將不透明度參數(shù)值同樣設置為Highpass，固定初始采樣步長為280，調節(jié)alphaCorrection值，當數(shù)值超過0.9時，此時的fps在18～20幀/s之間波動，系統(tǒng)會出現(xiàn)卡頓現(xiàn)象。

在本次實驗中，通過設置不同的參數(shù)值(最大采樣步長、alpha修正值、插值)得到不同的繪制結果，圖像渲染幀數(shù)維持在不同的數(shù)值區(qū)間(如表2所示)。

表2 不同參數(shù)下圖像繪制幀率

通過表2測試數(shù)據(jù)顯示，對于數(shù)據(jù)量不是很大的影像體數(shù)據(jù)，繪制效果還是比較理想的，旋轉、縮放等交互操作還算比較流暢。

5.4 跨平臺運行

本系統(tǒng)可以很好地實現(xiàn)跨平臺運行，通過在ipad上測試，成像質量及運行速度相對來說還較滿意，測試結果如圖9所示。

圖9 系統(tǒng)在ipad及電腦上測試

6 結 語

本文提出了一種基于Web的醫(yī)學影像可視化系統(tǒng)，此系統(tǒng)不依賴于任何的平臺以及其他相關的平臺插件，突破了傳統(tǒng)醫(yī)學可視化平臺不可跨越以及傳統(tǒng)面對面醫(yī)療服務等缺點。系統(tǒng)旨在減少對醫(yī)療數(shù)據(jù)的可訪問性的障礙，簡化數(shù)據(jù)的復雜處理，并利用強大的工具進行交互。為醫(yī)生提供了很大便利，醫(yī)生在外地，可以方便地訪問系統(tǒng)、進行會診、診斷病情、以及設計解決方案，同時可以使得高水平醫(yī)療為交通不便的偏遠地區(qū)病人服務。

本系統(tǒng)在今后工作中需要改進的地方，主要包括兩個方面。第一，就是圖像傳輸問題，目前本系統(tǒng)傳輸速率還不是太快，因此如何提高傳輸速率，將是下一個研究問題。第二，在體繪制方面，目前顯示的成像效果還需加強，接下來將對怎樣顯示更高的成像質量展開研究。

[1] 吳福理, 張彤, 梁榮華. 基于云平臺的醫(yī)學影像可視交互平臺[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與可視化工具包的醫(yī)學影像三維重建及交互方法研究[J]. 生物醫(yī)學工程學雜志, 2015(2): 336- 342.

[5] 喬梁, 陳欣, 楊磊鑫,等. 基于純凈Web的醫(yī)學影像三維可視化平臺的研制[J]. 北京生物醫(yī)學工程, 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] 雷輝, 趙穎, 王銘軍,等. 面向瀏覽器的醫(yī)學影像可視化系統(tǒng)[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] 向俊, 葉青, 袁勛. 基于網(wǎng)頁的可視化網(wǎng)絡醫(yī)學影像平臺設計[J]. 生物醫(yī)學工程學雜志, 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算法對醫(yī)學圖像進行三維體繪制重建[J]. 計算機科學, 2016, 43(S2):156- 160.