基于WebVR的醫學體數據可視化

楊晨彬 高 瞻

(南通大學計算機科學與技術學院 江蘇 南通 226019)

0 引 言

隨著醫學圖像三維可視化技術的發展，醫療工作者可以方便地將由計算機斷層技術(CT)、核磁共振(MRI)得到的二維切片數據通過三維重建，達到重構人體的器官組織及病變部位的目的，從而提高醫療診斷和治療的精確性和科學性[1]。

傳統的醫學體數據可視化系統對于三維醫學體數據可視化影像的顯示，都是使用二維的計算機屏幕來顯示圖像，并通過鍵盤鼠標在屏幕上完成交互操作。陳文池[2]利用可視化工具包VTK實現了醫學圖像的三維重建系統，系統中使用體繪制算法對體數據進行了三維可視化，并實現了平移、旋轉和截取等交互操作。但是使用者通過計算機二維屏幕進行觀察，無法感受到三維圖像的深度信息，也無法清楚地看到三維圖像的內部細節信息，從而影響使用者進一步的觀察和理解，同時在二維屏幕對三維數據的交互操作也存在著不便。而隨著虛擬現實技術的進步和虛擬現實頭戴式顯示設備(HMD)的商用化[3-4]，虛擬現實技術在醫學教育、輔助診斷、醫學可視化等領域的應用大大增加[5]，通過虛擬現實技術可以彌補傳統屏幕在顯示及交互上的不足。Laha等[6]從理論上分析了VR技術所帶來的沉浸式體驗在醫學體數據可視化的重要作用，VR平臺與傳統平臺相比具有明顯優勢，但是并沒有給出實現方案。而He等[7]使用可分離式的腦部網格模型，結合HTC Vive，在虛擬現實中通過交互完成對腦部結構的觀察操作，實現可視化，具有良好的沉浸式顯示效果。但該方案需要預先制作腦部各組織的網格模型，同時無法觀察組織內部信息，使用不便。

當前主要有兩類醫學影像可視化系統實現方案。一類是客戶端形式的，這類系統需要在計算機端安裝特定的軟件，不利于后期系統更新及維護[8]。另外一類就是基于瀏覽器形式的[9]，本文使用基于瀏覽器的體繪制實現方案，使用WebGL作為體繪制實現工具，使用光線投射法作為體繪制的實現算法。對于光線投射算法，Congote等[10]提出了使用多通道渲染管線來實現體繪制的方法。這種方法需要使用一個單位立方體作為體數據的載體。在第一道渲染管線中根據單位立方體的頂點坐標生成坐標紋理，用來在第二道管線中計算光線投射方向，然后根據光線的方向和起止坐標進行顏色合成，得到渲染圖像。其中因為需要使用額外的紋理和渲染管線，對性能會有一定的影響。對此，Mobeen等[11]提出了使用單通道的體繪制方法，在片元著色器中只需根據場景中相機的坐標以及片元坐標即可計算出光線投射方向，而該片元坐標就是光線的起始點。對光線的終止條件的判斷則需要在片元著色器中判斷光線上各采樣點與單位立方體的位置關系，當采樣點坐標在單位立方體之外時立即終止循環，得到結果。

以上方法在傳統屏幕上具有良好的顯示效果，但是結合虛擬現實后，在實際使用中有兩點不足：(1) 當需要交互時，在傳統屏幕中，可以通過改變場景中相機的位置間接實現場景中物體的平移旋轉。但是在虛擬現實中，相機的方向、位置等參數由使用者的頭戴式顯示設備(HMD)的狀態信息確定，無法使用傳統方法對相機進行操作，所以需要通過單位立方體的平移旋轉操作來實現對渲染結果的多角度觀察體驗。因為算法的原因，單位立方體的頂點坐標在片元著色器中難以更改，會導致單位立方體在頂點著色器和片元著色器中所處的坐標系不一致，不利于交互操作的實現。(2) 在計算光線投射方向和起點坐標時，使用片元坐標減去相機坐標得到方向向量，光線起點為片元坐標，最終合成的顏色值即為表面片元的顏色。但是當相機位置處在單位立方體內時，方向向量和起點坐標的計算方式不再適用，需要以新的方式重新計算。否則，當使用者近距離觀察渲染結果或者在進行交互操作時，有可能不經意地造成距離過近而使圖像突然消失，影響用戶體驗。基于以上兩點原因，需要對光線投射算法進行一些改進，實現虛擬現實環境中體繪制可視化。

針對以上的不足，本文提出了基于WebVR的方法來實現醫學體數據可視化，系統通過服務器端向瀏覽器發送體數據，然后瀏覽器使用WebGL進行渲染，通過傳統屏幕或者虛擬現實設備HTC Vive以普通模式或VR模式顯示可視化結果并實現相應交互操作。在普通模式中，使用者可以實現旋轉、平移、縮放的操作；在VR模式中，針對虛擬現實環境的特點，提出了單通道光線投射體繪制算法在虛擬現實環境中的改進方法，實現體數據內部可視化、激光拾取和平面裁剪的交互方式，可以通過立體視覺以任意角度觀察體數據表面及內部細節信息，增強使用者對人體的器官組織或病變部位的感知與認識。

1 系統設計

本系統整體設計使用B/S模式，采用富客戶端策略，系統的核心功能基本都是通過瀏覽器端來實現，服務器端只需要完成數據存儲，負擔較小。同時只需一次性的數據傳輸，瀏覽器端與服務器端無需頻繁的數據通信，對網絡的要求也較低。這種模式最大的優點就是沒有平臺的限制，無需安裝，使用和維護都很方便。

如圖1所示，系統整體架構主要由三部分組成：服務器端、瀏覽器端與虛擬現實端。系統的實現主要由醫學影像數據存儲、數據傳輸、數據預處理、數據渲染、瀏覽器顯示、虛擬現實顯示、虛擬現實交互等部分構成。其中服務器負責數據存儲；瀏覽器端與服務器端間的數據請求與數據傳輸通過HTTP協議來實現；使用Web端醫學影像處理庫Cornerstone.js對接受到的圖像數據進行預處理，處理成能夠被WebGL使用的紋理數據；使用WebGL進行可視化渲染，將普通三維影像在瀏覽器端顯示出來；通過WebVR實現瀏覽器與虛擬現實設備HTC Vive實現連接，使用HTC Vive的頭戴式顯示器實現虛擬現實環境中三維影像的顯示并通過配套的手柄控制器完成交互操作。

圖1 系統結構圖

2 體數據渲染

2.1 體數據傳輸

在服務器端與瀏覽器端之間，體數據的傳輸使用基于HTTP通信機制的Web技術，采用的是請求-獲取的數據傳遞模式，將服務器端的DICOM格式體數據壓縮包傳輸到客戶瀏覽器端。系統通過采用Fetch API中GlobalFetch.Fetch()方法實現遠程數據獲取。客戶瀏覽器端根據所需體數據存儲的URL路徑，使用Fetch()方法，發起對遠程數據的請求，最終得到數據。

2.2 體數據預處理

由服務器處得到一組DICOM文件，其中每個DICOM文件只存放單張CT或MRI斷層切片，每個DICOM文件數據由文件頭數據和像素數據兩部分組成。由于DICOM文件所需存儲空間太大，而且WebGL無法直接讀取操作DICOM數據，所以需要對DICOM文件數據進行預處理。使用Cornerstone.js將DICOM文件中原始像素數據解析出來，具體方法是使用Cornerstone.js中的圖像加載器讀取DICOM文件，然后得到其中每一個像素數據的灰度值，依次存入一個數組中，最后將數組轉為數據格式為Uint8的類型化數組。處理成這種格式后，WebGL即可將其作為三維紋理傳入著色器中。

2.3 單通道光線投射算法

光線投射算法是以圖像空間為序的直接體繪制算法。從視點出發，沿著視線方向依次發射若干條光線穿過體數據，在此過程中對體數據等間距采樣并獲得顏色值，依次對各采樣點的顏色值進行合成，當所有光線穿越完整個體數據后，得到渲染結果[12]。

WebGL為Web瀏覽器提供了內置的硬件3D加速渲染功能，從而為實現無插件的三維醫學圖像可視化提供了底層支持。最新版本的WebGL2.0標準開始支持三維紋理的使用，可以實現基于硬件的自動插值，提高運行效率。本文使用封裝了WebGL的第三方庫Three.js來編程實現。

本文使用基于單通道的光線投射體繪制方法。實現流程如圖2所示。

圖2 單通道光線投射算法流程圖

具體步驟如下：

(1) 繪制單位立方體，作為體紋理的載體。向頂點著色器中傳入單位立方體各頂點坐標，再傳入片元著色器中，通過光柵化和背面剔除，得到立方體外表面正面各片元坐標，作為光線的起始位置坐標。

(2) 在片元著色器中，傳入體數據的三維紋理和一維傳遞函數的紋理以及相機的坐標。通過片元坐標減去相機坐標可以計算出的光線的方向向量，通過設置好的采樣步長，沿著射線方向在單位立方體內均勻采樣。對于每個采樣點根據使用者設置的傳遞函數為其賦予顏色值和不透明度值。

(3) 圖像合成。沿著每一條射線在單位立方體內均勻采樣，依次對該射線方向上所有采樣點進行顏色值和不透明值的合成即可得到單位立方體對應片元的顏色值。合成公式為：

(1)

2.4 可交互傳遞函數

傳遞函數定義了為三維數據場的數據屬性到光學屬性的映射[13]。從傳遞函數的定義域分類可以分為一維、二維、多維的傳遞函數。本文使用最為常用的一維傳遞函數。一維傳遞函數以體數據的標量值，即灰度屬性值作為傳遞函數的輸入，輸出經過映射得到的顏色(RGB)和不透明度(Alpha)。基本公式如下：

(2)

式中：α表示該采樣點的灰度值；Rα、Gα、Bα、Aα分別代表由α生成顏色的紅、綠、藍分量以及不透明度。傳遞函數可以在程序運行時由使用者進行手動設置，傳遞函數的設置方式如圖3所示。在右上方的菜單中，可以添加三個控制點，并且可以設置這三個點位置、顏色和透明度，然后根據這三個點自動插值出其它位置的顏色和不透明度，生成一張長255像素、寬20像素的RGBA格式圖像。這張圖像作為紋理立即傳入片元著色器中，影響最終圖像的生成。在程序運行中，使用者對傳遞函數的設置可以實時得到反饋，經過調整即可達到最優的顯示效果。

圖3 傳遞函數的設置方式

2.5 光線投射算法的改進方法

2.5.1渲染圖像的平移與旋轉

由2.3節可知，單通道體繪制相比于多通道體繪制，由于無法得到單位立方體背面片元坐標，所以無法得到光線的終止點坐標，所以需要額外的方式來判斷光線上采樣點與單位立方體的位置關系。在片元著色器中，單位立方體的頂點坐標如圖4所示，該坐標系為單位立方體的局部坐標系。在此坐標系下，對采樣點與單位立方體的位置判斷只需要看采樣點在三個坐標軸上的取值是否在0到1之間即可。同時，單位立方體各頂點坐標與三維紋理的坐標取值區間相同，無需額外的映射。所以在片元著色器中使用局部坐標系特別方便。此時，如果要實現渲染圖像的平移與旋轉，需要在頂點著色器中，通過模型矩陣乘以單位立方體的頂點坐標，得到世界坐標系下的頂點坐標值。雖然使用這種方式可以實現旋轉和平移變換，但是，頂點和片元著色器中的單位立方體所處的坐標系不同，對后續交互操作的計算產生障礙。改進方式有兩種。第一種是將片元著色器中的單位立方體的坐標系由局部坐標系轉為世界坐標系。此方法如果要實現需要解決兩個問題：從單位立方體內部采樣點坐標到三維紋理坐標的映射以及采樣點坐標與單位立方體的位置關系判定。以上兩個問題都很難解決，所以，本文使用另一種改進方式，就是將傳入片元著色器中的其他坐標值從世界坐標系轉換到單位立方體的局部坐標系中，再進行其他的計算。

圖4 單位立方體頂點坐標示意圖

2.5.2體數據的內部可視化

當在虛擬現實環境中對體數據進行觀察操作時，如果使用者通過激光拾取操作來近距離觀察渲染結果，有可能導致相機位置進入單位立方體內部時，造成渲染圖像突然消失。因為在傳統算法中，并沒有針對相機位置的變化來對光線的方向向量與光線的起始點進行重新計算。同時，為了減少計算量，開啟了背面剔除，所以單位立方體內部的片元未被渲染。改進方法流程如圖5所示。

圖5 體數據的內部可視化實現流程圖

通過計算得到相機在單位立方體局部坐標系下的相對位置坐標，即可根據坐標值的大小判斷相機是否處于單位立方體內，如果相機處于單位立方體外部，則原來的算法保持不變。如果相機處于單位立方體內部，則將光線起點改為相機位置，并關閉背面剔除，光線的方向向量則通過背面片元坐標減去相機坐標獲得。

3 體繪制結果顯示

由于并不是所有使用者都接入了VR設備，所以保留了傳統的基于二維屏幕的顯示方式。當Web端利用WebGL完成圖像的渲染時，渲染結果將以普通模式顯示在屏幕上。然后再檢測是否有VR設備接入Web，若檢測到有設備接入，則使用者點擊“ENTER VR”按鈕，即可由普通模式切換到VR模式。

渲染圖像在VR中顯示需要利用WebVR API。WebVR API能為虛擬現實設備的使用提供支持，提供了如Oculus Rift或者HTC Vive等頭戴式顯示設備與Web端的連接。可以通過獲取VR設備返回的位置和動作信息，來改變使用者在虛擬空間里的位置、行為。本文使用HTC Vive來實現虛擬現實中的體繪制可視化。

3.1 普通模式

在普通模式中，利用WebGL渲染的三維空間中的物體必須通過模型矩陣、視圖矩陣、投影矩陣的矩陣變換轉變成屏幕上的二維圖像才能正常顯示。在Three.js中，投影矩陣和視圖矩陣被封裝到了相機的屬性當中，在使用時可以方便地調用。

通過控制相機在世界坐標系中的位置，即改變視圖矩陣來間接實現對場景中物體的平移、旋轉和縮放的操作，在普通模式中提供簡單的交互操作。

3.2 VR模式

VR模式中物體的顯示與普通模式有很大區別。主要區別在于：首先，對WebVR場景中的顯示需要進行雙屏渲染。如圖6所示，需要根據瞳距等信息分別設置左右兩個相機，再根據左右相機的視圖矩陣和投影矩陣繪制圖像。其次，WebVR場景相機的方向、位置等參數由使用者的頭戴式顯示設備的狀態信息確定。當使用者的現實視角發生變化時，WebVR場景的相機也隨之動態變化。

圖6 WebVR成像示意圖

在VR模式中，渲染流程如下：

(1) 獲取接入Web瀏覽器的VR設備信息，完成準備工作。

(2) 設置渲染循環。由于需要根據使用者行為動態繪制每一幀場景，所以需要使用一個循環函數，不斷執行遞歸循環，實現動態更新。接入VR后會優先使用VR設備原生的刷新率，以達到合適的渲染幀頻，實現更佳的顯示效果。

(3) 動畫渲染。在每一幀中，瀏覽器可以通過WebVR得到渲染所需的幀數據。其中包括當前幀的左右視口的投影矩陣和視圖矩陣。分別設置左右相機和左右視口，并將視圖、投影矩陣賦值給左右相機，然后傳入著色器，著色器分兩次在左右視口中進行繪制，得到左右眼的渲染圖像，再通過WebVR將圖像發送至HTC Vive中顯示出來。

4 交互操作設計

為了充分發揮虛擬現實技術在體數據可視化中的優勢。結合HTC Vive的手柄控制器硬件，在VR環境中，為渲染后的三維圖像設計實現了三維交互功能：激光拾取、平面裁剪。

4.1 激光拾取

從手柄處射出一道具有一定長度的激光射線，當激光與虛擬現實場景中物體發生碰撞事件時，通過按手柄上的扳機鍵并移動或旋轉手柄即可使該物體發生對應的移動與旋轉。在虛擬現實環境中對體繪制可視化結果實現任意角度、任意距離的觀察。實現方式如下：

(1) 初始化手柄。在世界坐標系中載入預制的手柄模型對象。

(2) 在渲染循環中，獲取手柄對象的模型矩陣，其中包含了手柄對象在世界坐標系中的坐標、旋轉方向、縮放等信息數據。利用坐標和旋轉方向，即可從手柄頂端出發，沿著手柄的方向繪制射線。由于所有信息在循環中動態更新，所以射線的位置和方向相對于手柄保持同步變換。

(3) 當按下扳機鍵時，利用Raycaster對象，得到與射線相交物體。Raycaster對象在Three.js中用于進行光線與物體的碰撞檢測。用上一步中得到的坐標和旋轉方向設置Raycaster對象就可以得到與射線相交物體對象列表，并在列表中選擇與手柄距離最近的相交物體對象。

(4) 為手柄與相交物體建立“父子關系”，相交物體成為手柄的子對象，隨著父對象的移動發生移動。首先，獲取已得到的相交物體的模型矩陣，模型矩陣控制物體在世界坐標下的坐標，然后通過父對象的模型矩陣更新子對象的模型矩陣即可。

(5) 松開扳機鍵時，解除手柄與相交物體的“父子關系”。

由此，即可完成相關操作。

4.2 平面裁剪

在醫學可視化中，往往需要將體數據中的內部細節信息顯示出來。雖然調節傳輸函數能夠展示體數據的不同部分，但是對于比較復雜的體數據，很難僅通過傳輸函數將所需內部細節表現出來。因此需要體數據裁剪工具，屏蔽外部遮擋的部分，以凸顯內部細節信息。傳統的醫學可視化系統所提供裁剪面功能，由于二維屏幕的限制，只有由矢狀面、冠狀面和水平面等特定方向進行平面裁剪操作，且操作與設置需要不斷調整，使用不便。因此，本文設計了在虛擬現實空間中的平面裁剪功能，使用激光拾取功能可以自由操控體數據以及裁剪平面的位置，實現沿著任意角度對體數據進行裁剪，操作簡便。流程如下：

(1) 初始化裁剪平面。通過確定平面內一點P及其法向量n，即可確定平面在世界坐標中的位置和方向，以此來初始化平面對象。

(2) 動態更新裁剪平面。由于單位立方體在頂點著色器和片元著色器中的坐標不同，所以兩者的交互需要在單位立方體的局部坐標系下計算，即以單位立方體為參照，裁剪平面的位置和方向。點P和法向量n并不會自動更新，所以需要在每一幀中通過計算更新，得到點P和法向量n在單位立方體的局部坐標系下的值。公式如下：

(3)

(3) 將點P和法向量n傳入片元著色器中，計算裁剪后的結果并顯示。在光線投射法體繪制中，每當沿著一道射線進行顏色和不透明度合成時，對于每一個采樣點，都需要判斷該采樣點與裁剪平面的位置關系，若該采樣點在裁剪平面的正面一側，就進行合成運算；若在背面一側，則跳過該采樣點，重復該操作，直到合成結束。

這樣就得到了經過裁剪的體繪制結果。

5 實驗結果分析

實驗計算機配置為Intel?CoreTMi7- 6700HQ CPU @2.60 GHz;顯卡為NVIDIA GeForce GTX 1070；內存為16 GB；Windows 10 64位操作系統。實驗體數據為頭部CT數據，分辨率為256×256×225；測試瀏覽器使用FireFox。在常規模式中，結果如圖7所示，在VR模式中的結果如圖8所示，體數據內部可視化結果如圖9所示。系統運行流暢，無卡頓，顯示效果清晰。

圖7 普通模式下的可視化結果

圖8 VR模式下的可視化結果

圖9 體數據內部可視化結果

6 結 語

本文實現了在虛擬現實環境中的醫學體數據可視化系統，并針對虛擬現實環境設計了激光拾取、體數據內部可視化與平面裁剪功能，提供沉浸式的可視化與交互體驗，有利于針對三維醫學影像的醫學診斷與教學工作。同時，運行于Web端，無需下載安裝軟件及其他可視化插件，可以跨平臺運行，使用方便。下一步的工作主要包括兩方面：(1) 在交互方面，將可交互的傳遞函數直接集成到VR環境中，在VR模式實現對傳遞函數的操作；(2) 在體繪制方面，目前的成像效果還有不足，下一步將在體繪制算法中加入實現光照的算法，實現更好的顯示效果。