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

0 引 言

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

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

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

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

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

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

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

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

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

本文主要貢獻(xiàn)：

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

2) 正交MPR多層面三維可視化，可對(duì)圖像進(jìn)行放大縮小、旋轉(zhuǎn)、 移動(dòng)、像素定位等操作。

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

1 系統(tǒng)整體設(shè)計(jì)

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

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

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

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

圖2 Promise流程

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

3 預(yù)處理

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

4 圖形應(yīng)用界面

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

圖3 系統(tǒng)界面

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

圖4 Three.js運(yùn)行流程

4.1 二維圖像可視化模塊

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

4.1.1 窗寬窗位調(diào)整

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

4.1.2 長度測量

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

4.1.3 縮放、平移、旋轉(zhuǎn)

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

4.2 三維可視化

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

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

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

4.2.2 光線投射算法改進(jìn)

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

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

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

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

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

在光線投射[19-22]過程中，投射光線不一定經(jīng)過原始網(wǎng)格頂點(diǎn)的數(shù)據(jù)點(diǎn)，重采樣點(diǎn)f的值由周圍8個(gè)頂點(diǎn)用三線性插值算法求出，如圖6所示。

圖6 重采樣點(diǎn)

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

(2)

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

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

5 測試與結(jié)果

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

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

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

表1 DICOM圖像傳輸時(shí)間

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

5.2 二維交互

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

圖7 二維交互界面

5.3 三維交互

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

圖8 三維交互界面

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

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

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

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

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

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

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

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

5.4 跨平臺(tái)運(yùn)行

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

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

6 結(jié) 語

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

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

[1] 吳福理, 張彤, 梁榮華. 基于云平臺(tái)的醫(yī)學(xué)影像可視交互平臺(tái)[C]//全國計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)會(huì)會(huì)議.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ī)學(xué)影像三維重建及交互方法研究[J]. 生物醫(yī)學(xué)工程學(xué)雜志, 2015(2): 336- 342.

[5] 喬梁, 陳欣, 楊磊鑫,等. 基于純凈Web的醫(yī)學(xué)影像三維可視化平臺(tái)的研制[J]. 北京生物醫(yī)學(xué)工程, 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àn)g覽器的醫(yī)學(xué)影像可視化系統(tǒng)[J]. 中國圖象圖形學(xué)報(bào), 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)絡(luò)醫(yī)學(xué)影像平臺(tái)設(shè)計(jì)[J]. 生物醫(yī)學(xué)工程學(xué)雜志, 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]. 河北師范大學(xué), 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算法對(duì)醫(yī)學(xué)圖像進(jìn)行三維體繪制重建[J]. 計(jì)算機(jī)科學(xué), 2016, 43(S2):156- 160.