隨著“互聯網+”發展的趨勢，醫務人員對醫學影像的移動化也有了一定的需求。針對這一需求，本文提出了一種基于網頁（web）的可視化醫學影像平臺。首先，本文分析了繪制醫學影像的可行性以及技術要點，通過醫學圖像處理和科學可視化的跨平臺應用框架（MeVisLab）對電子計算機斷層掃描成像（CT）或磁共振成像（MRI）圖像進行三維（3D）重建，并且封裝成可擴展 3D 語言（X3D）文件。然后，應用第五代超文本標記語言（HTML 5）和網頁編程圖形庫（WebGL）渲染引擎庫，設計出專門為 3D 圖像渲染的瀏覽器/服務器（B/S）系統，并利用該系統解析、渲染 X3D 圖像文件。本文的研究結果顯示，該平臺適用于多個操作系統，便于實現醫療影像數據的跨平臺化、移動化。最后，本文對醫療影像平臺的發展進行了展望，指出 web 技術的應用將促進醫療影像數據的共享，也便于實現基于醫療圖像的遠程會診和遠程教學。
引用本文： 向俊, 葉青, 袁勛. 基于網頁的可視化網絡醫學影像平臺設計. 生物醫學工程學雜志, 2017, 34(2): 233-238. doi: 10.7507/1001-5515.201606003 復制
引言
電子計算機斷層掃描成像（computed tomogra-phy，CT）和磁共振成像（magnetic resonance ima-ging，MRI）是一系列二維（2D）圖像采集技術[1]，但醫生在通過采集到的 2D 圖像數據集進行診斷時，往往會感到缺乏有效、直觀的診斷信息，因此需要對圖像數據集進行 3D 重建。但圖像 3D 重建后往往需要專門開發桌面程序來渲染，而目前市場上操作系統存在多樣化的現狀，在個人電腦上有視窗操作系統（Windows）、蘋果操作系統（MAC operation system，MAC OS）以及嵌入式操作系統（Linux）；在移動端有安卓（Andriod）和蘋果移動操作系統（iPhone operation system，IOS）兩大操作系統。目前大多數影像歸檔通信系統（picture archiving and communication systems，PACS）都只是在 Windows 環境下以客戶端/服務器（client/server，C/S）的模式開發，即使在 INFINIT 公司的 PACS 系統中，也是通過加載插件的形式在瀏覽器中進行渲染，因此渲染圖像的方式都不太便捷，無法跨平臺。同時，由于醫學圖像傳輸需要較大的網絡帶寬，圖像在客戶端進行 3D 重建以及渲染需要計算機具有較強性能的中央處理器（central processing unit，CPU）與圖形處理器（graphics processing unit，GPU），這對醫院的計算機硬件與網絡設施都提出了更高的要求。
為了彌補這些不足，研究人員開始開發基于網頁（web）的應用程序，克服了以前桌面軟件開發經常遇到的部分問題[2]。基于 web 的應用往往比本地應用程序要多一些優勢，例如：當 web 開發一個軟件應用程序，可以通過瀏覽器在世界各地的任何用戶執行，并且獨立于操作系統，不需要安裝任何特殊的軟件。另外，web 應用程序集成在云端，即計算機云服務器，所以它能保證用戶即時訪問最新版本的軟件，這是一個非常重要的特性。在醫療成像研究領域中，一些交互式的處理醫學圖像的平臺已經開發并應用[3]。
為了提供交互式的 web 3D 模型，基于網絡的醫學影像平臺應用了三個先進的網絡技術：可擴展 3D 語言（extensible 3D，X3D）、第五代超文本標記語言（hypertext markup language 5，HTML 5）、網頁編程圖形庫（web graphics library，WebGL）。其中 X3D 技術能實現醫學圖像 3D 可視化，HTML 5 與 WebGL 組成渲染引擎，能夠幫助處理患者的圖像數據，使用交互式多邊形 3D 模型，方便醫生診斷以及撰寫手術報告。由于這些技術提供了人體組織和器官的實時 3D 模型，使得醫生能夠更加便捷、有效地觀片。醫學 3D 模型最明顯的好處是呈現了高效的解剖情況和器官之間復雜的空間關系，使醫生能夠更為準確地做出診斷。本文主要研究基于 web 的網絡醫學影像平臺的設計，以期為醫學圖像處理提供更強大的工具，以利于在 web 平臺中，讓大量的醫學影像數據更便捷地得到傳輸，更有利于基于互聯網的醫療、科研、教學的發展。
1 相關工作
1.1 HTML 5 與 WebGL 研究
HTML 5 是超文本標記語言（hyper text markup language，HTML）的第五版。HTML 5 規范了很多新的功能，其中對于瀏覽器圖形開發較為實用的就是在 HTML 5 增加了畫布（canvas）功能[4]。使用 HTML 5 的 canvas 功能在瀏覽器中規范了一個矩形區域，開發人員可以在這個區域中使用腳本語言 Java-Script 代碼繪制圖形。
WebGL 是通過嵌入式開放圖形庫 2.0 版本（OpenGL for embedded systems 2.0，OpenGL ES 2.0）與 JavaScript 的綁定實現的，目前在眾多瀏覽器中，例如：Firefox、Safari、Chrome、Opera 等，都已經實現支持 WebGL。WebGL 實質是 HTML 5 canvas 元素的一個繪制上下文[5]。
HTML 5 之前已經實現了支持 2D 繪制上下文，在 web 的 JavaScript 代碼中，使用下面的命令就可以從 canvas 元素中獲取 2D 繪制上下文。
var context 2D=canvas.getContext ("2d")；
如果需要在 canvas 元素中獲取 WebGL 繪制上下文，使用下面一段代碼就可以實現。
var contextWebGL=canvas.getContext ("webgl")；
通過上面的方式獲取到 web 圖形繪制上下文后，我們可以通過 context2D 變量調用得到 HTML 5 支持的 2D 圖形繪制支持函數，通過 context-WebGL 變量可以調用得到 WebGL 支持函數。
1.2 X3D 和 X3DOM 研究
X3DOM 是將集成的、抽象的 X3D 場景內容直接映射到文本對象模型（document object model，DOM）的元素[6]。要導出 X3D 格式的 3D 場景，我們可以使用 3D 建模工具，比如醫學圖形處理庫 MeVisLab。然后，我們可以使用通過 canvas 元素將 X3DOM 和 WebGL 集成到 HTML 5，將它們實時地顯示出來。
X3D 是一個軟件標準，定義了多媒體中基于網絡傳播的交互 3D 內容[7]。使用 X3D 和 X3DOM，我們可以訪問特定 X3D 元素定義的 JavaScript 事件函數。我們可以設計一個函數使用 X3D 中 3D 圖形變化功能，用以更新特定場景元素的顏色，同時也可以應用它的用戶交互功能，將特殊事件應用在 X3D 的代碼中，例如單擊事件，用鼠標點擊一個特定的 3D 對象，然后呈現一個可視化的 3D 變化。
1.3 MeVisLab 介紹
在設計初期，MeVisLab 還只是普通的 3D 圖像進行處理的程序，如今 MeVisLab 已經發展成為一個開放的圖像處理流程框架。MeVisLab 最大的特色就在于其模塊化運行流程的設計，所有的功能和算法都基于它的模塊化處理而實現，這種功能讓數據或者圖像能夠直接通過圖形用戶接口（graphics user interface，GUI）在流程中處理。在轉換的過程中，系統極少出現錯誤，生成的圖像格式也可以設定，方便用戶重用。應用 MeVisLab 自帶的功能模塊，在不需要注入任何其它代碼的情況下，就能夠實現 CT 和 MRI 圖像 3D 重建。
此外，在所有的主流操作系統中，MeVisLab 還提供了免費的使用認證，并且提供了開發者論壇[8]。在最新的 2.7.1 版本中，MeVisLab 提供了 1 000 多個預定義的標準模塊，還有另外 1 800 多個基于圖像的配準和分隔工具（insight segmentation and registration toolkit，ITK）和圖像可視化工具（the visualization toolkit，VTK）的功能模塊，極大地豐富了系統功能。
2 系統設計
2.1 總體設計
基于 web 的醫學影像系統由數據集采集、圖像 3D 重建、瀏覽器/服務器（browser/server，B/S） 系統設計以及 3D 圖像渲染等幾個關鍵步驟組成，如圖 1 所示。首先采集患者的 CT 或 MRI 形成數據集，在服務器的 MeVisLab 中進行 3D 重建，然后以 X3D 的格式輸出并存儲在服務器的關系型數據庫（MySQL）中。每當有瀏覽器客戶端發起圖像數據請求時，服務器利用超文本預處理器（PHP：hypertext preprocessor，PHP）將圖像數據轉成 JavaScript 對象表示法（JavaScript object nota-tion，JSON）格式傳輸到客戶端。客戶端接收到數據后利用 WebGL 的特性將 3D 圖形渲染出來。
圖1
系統處理流程
Figure1.
Treatment process of the system
2.2 圖像 3D 重建
在系統中最為關鍵的步驟就是實現 2D 和 3D 圖像可視化的一系列工作。在醫學圖像中，CT 或者 MRI 采集組成的圖像是一系列連續的 2D 掃描數據集[9]。數據集產生后，我們使用 MeVisLab 導入并且進行 3D 重建，整個過程直接使用了 MeVisLab 自帶的圖像可視化處理技術，過程使用的算法封裝在可鏈接的模塊當中[10]。
首先，使用圖像上傳模塊上傳 2D 圖像數據（CT 或者 MRI 數據），然后使用圖像處理模塊中的移動立方體（marching cubes，MC）算法將連續的 2D 圖像片段轉換成 3D 曲面網格[11]。MC 算法是 3D 數據場等值面生成的經典算法，主要由下面 4 個步驟組成：
（1）體素的構成與獲取頂點坐標及灰度值。
CT 是由不同灰度值的像素組成，等值面是由所有具有相同灰度值的點構成的連續曲面[12]。在 3D 圖像中，空間元素是由連續的體素構成，每個體素由 8 個數據點構成，每個數據點由相鄰斷層圖像中的像素構成，如圖 2 所示，在相鄰兩個斷層圖像中分別取出 4 個對應的像素點，形成 3D 圖像的體素。
（2）等值面與體素交點位置的計算及三角網格繪制。
在處理體素兩個點的值不相同的某一條邊時，等值面會與這條邊相交，且僅有一個交點，交點p 代表等值點坐標。p1、p2 代表兩個端點的坐標，v1，v2 代表兩個端點的值，v 代表等值面的值，p=p1+（v—v1）×（p2—p1）/（v2—v1）。求出等值面與體素棱邊的交點以后，將這些交點連接成三角形或多邊形，形成等值面的一部分。等值面與某一體素相交，共有15種情況，在MC算法中使用8位數據表記錄體素的狀態，根據狀態表得到15種體素內等值面的構造類型的其中之一。
圖2
相鄰圖像像素構成體素的過程
Figure2.
Process in which adjacent pixels constitute a voxel
（3）等值面的法向量的計算。
在等值面上的每一點，其沿面切線方向的梯度分量值是零，因此，該點梯度矢量的方向也就代表了等值面在該點的法向。MC 算法中使用中心差分法計算任意點M（i，j，k）的梯度[13]。
| $\left\{ \begin{array}{l}Gx(i,j,k) = f(i + 1,j,k) - f(i - 1,j,k)\\Gy(i,j,k) = f(i,j + 1,k) - f(i,j - 1,k)\\Gz(i,j,k) = f(i,j,k + 1) - f(i,j,k{\rm{ - }}1)\end{array} \right.$ |
這里f（i，j，k）表示了空間中（i，j，k）這點的灰度值，然后對體素 8 個頂點上法向量進行線性插值就可得到位于體素邊上三角片各個頂點的法向量。
（4）使用高洛德著色（gouraud shading）光照模型，繪制得到等值面的多邊形曲面模型[14]。
3D 重建之后，我們需要將已轉換的圖像輸出為瀏覽器能夠解析的數據格式。使用 MeVisLab 的 X3D 封裝模塊將 3D 圖像封裝成 X3D 文件。
2.3 B/S 系統設計
圖像在經瀏覽器渲染之前，還需要經過一系列的處理，需要將圖像文件轉換成 JSON 格式與服務器進行傳輸[15]。眾所周知，瀏覽器可以通過 Java-Script 技術動態地解決用戶的請求，通過瀏覽器將請求轉移到服務器。這些請求可以以同步或者異步的方式與服務器通信，調用異步 JavaScript 和標準通用標記語言（asynchronous JavaScript and XML，AJAX）能夠實現與服務器異步通信[16]。服務器通過編程語言 PHP 啟動進程和執行命令，同時，服務器存儲了應用程序的數據庫、系統腳本、組件等用于執行流程。當服務器收到瀏覽器的請求后，瀏覽器將刷新頁面來顯示從服務器端獲取的內容，通過發送一個 JSON 文檔，由客戶機程序通過 GPU 的統一計算設備架構（compute unified device architecture，CUDA）或者開放圖形語言（open computing language，OpenCL）程序異步地渲染新的內容[17]，平臺系統配置如圖 3 所示。
圖3
系統配置
Figure3.
System configuration
在整個 web 端數據處理過程中，我們需要經過下面兩個關鍵步驟，如圖 4 所示：
（1）上傳所有的圖像數據，包括經 MeVisLab 預處理過的聯合圖像格式（joint photographic experts group，JPEG）和可縮放矢量圖形（scalable vector graphics，SVG）文件。在服務器中，使用 PHP 語言執行服務器程序，使用 MySQL 數據庫存放數據。同時，還需要一些腳本來編碼和解碼上傳的醫學圖像。
（2）調用服務器的 PHP 文本，將生成的 X3D 文件轉換成 JSON 格式。JSON 是一個輕量級的、基于文本交換格式的結構化數據，對序列化和網絡連接非常有用，因此能夠加速服務器與客戶端的通信速度，并且能夠節省服務器存儲空間。通過使用 AJAX 異步地與服務器通信，避免用戶提交每個交互請求后必須重新加載整個 web。
圖4
B/S 系統結構
Figure4.
B/S system structure
2.4 3D 圖像渲染
由于 X3D 運行時使用 X3DOM 能夠無縫地嵌入到 DOM，場景節點可以實時訪問和改變，包括旋轉、放縮、透明化等 3D 變化[18]。基于 X3DOM 技術，我們還能通過層疊樣式表（cascading style sheets，CSS）對任意 DOM 子樹做 3D 變形[19]。
在 web 中的 3D 應用包含了 canvas 元素，通過 JavaScript 程序與之相關聯，JavaScript 程序獲取 3D 圖形上下文，然后將 3D 場景繪制到這個 canvas 元素中[20]。3D 上下文通過 OpenGL ES 2.0 的應用程序編程接口直接操作圖形處理相關的硬件，進入到 WebGL 的圖形處理流水線中，這種方式在以往的瀏覽器中是沒有提供的。整個過程如圖 5 所示。
圖5
瀏覽器渲染流程
Figure5.
Browser rendering process
為了確保快速訪問整個網站，我們并沒有直接在 HTML 中嵌入 3D 模型。相反，我們通過 PHP 腳本將 3D 文本自動轉換成 JSON 格式存放在服務器中。與標準通用標記語言文本不同，JSON 格式在訪問特定場景的節點之前不需要被解析，比如頂點，光照材質，紋理等，這些場景都可以通過 JavaScript 對象在瀏覽器中解析[21]。瀏覽器動態地訪問請求 AJAX 事件的 3D 場景節點的 JSON 文本，我們可以直接從服務器中下載這些文本并且在瀏覽器中渲染出來，在網絡暢通的情況下，這個過程通常只需要幾秒鐘。
3 應用測試
3.1 測試環境
為了能夠讓圖像 3D 重建效率更高，我們的測試服務器配置的 CPU 是 Intel Xeon E3-1230 v3，主頻率 3.3 GHz，配備了 4 核，支持 8 線程。配備了 1 TB 的硬盤，用于存儲所接收的圖像。客戶機我們使用普通 PC 機、MAC 機、Ipad 4、三星 GALAXY S5，安裝了支持 WebGL 的多種瀏覽器。測試環境數據量不大，網絡使用普通網線和無線網在同一局域網中連接。
3.2 測試結果
本文采集了患者的腹部 CT 數據集作為實驗數據，共 110 張 JPEG 格式 CT 圖像作為數據集，每張圖像大小在 107～187 KB 之間，共計 13.5 MB。圖像數據來自德陽市人民醫院 PACS 系統，為了隱私起見，屏蔽了患者的個人信息。在整個系統中，首先在服務器的 MeVisLab 中使用 MC 算法對采集到圖像數據集進行 3D 重建，然后輸出為 X3D 格式并存儲到數據庫中。再由 PHP 文本將其轉換成 JSON 格式，瀏覽器接收到數據并解碼，通過調用 WebGL 功能在 web 中將 3D 圖像渲染出來，效果如圖 6 所示。
圖6
瀏覽器渲染效果
Figure6.
Results of browser rendering
如圖 6 所示，重建的 3D 骨骼圖像可以在瀏覽器中成功渲染，也可以通過 WebGL 實現旋轉、縮放功能，并且在移動手機端也能進行上述操作，基本實現了 3D 醫學圖像的跨平臺顯示，圖像清晰，可瀏覽性較強。
本文設計實現了患者腹部骨骼的 3D 重建以及在瀏覽器解析渲染，針對 HTML 5 與 WebGL 跨平臺的特性，分別在 Windows、MAC OS、Andriod 和 IOS 下做相應測試。測試主要包括了瀏覽器響應時間和渲染幀數，具體數據如表 1 所示。
表1
多種瀏覽器渲染性能測試結果
Table1.
Results of performance render test for multiple browsers
如表 1 所示，示例的患者骨骼 3D 圖像可以在 4 種操作系統下通過 HTML 5、WebGL 渲染出來。從表 1 測試數據可以看出，圖像渲染的性能在 PC 端遠遠高于移動端。這是由于 PC 端的硬件（尤其是 CPU 和 GPU）性能更為強大，因此各方面的性能都優于移動端。
在獨立顯卡的 OpenGL 4.3 支持下，PC 端也完全支持 OpenGL ES 2.0，渲染幀數較高，并且做縮放、旋轉操作沒有延遲和卡頓的現象，顯示都極為流暢。在各個品牌的瀏覽器下做測試也沒有顯著的性能差別，這與瀏覽器內核開源化有一定關系。
相對來說，移動端的性能需要一定程度的提升，響應時間較長，顯示幀數不高，當對圖像操作過于頻繁時，會出現一點延遲和卡頓的情況，但也能滿足 3D 圖像的重建與顯示，靜態的圖像質量與分辨率同 PC 端并沒有明顯差別。
同時，該平臺并沒有大規模應用在實際的醫療環境中，在一定規模的醫院中，醫學圖像特別是 CT 與 MRI 數據量龐大。這就意味著當多個客戶端發起請求時，服務器進行 3D 重建所需要占用的 CPU 資源將會比較高。因此，使用 MeVisLab 對 CT 或者 MRI 數據集進行 3D 重建預處理，將生成的 X3D 文件存儲在服務器數據中，能夠避免業務高峰期服務器 CPU 負載過高，但同時也將需要更多空間存儲預處理圖像數據。
4 討論
目前，基于 HTML5、WebGL、X3D 技術實現 3D 圖形的可視化具有很強的適應性，克服了傳統應用程序對于多平臺和多系統兼容性、可移植性差的問題。同時，MeVisLab 提供了相當多的醫學圖像處理功能，不僅是骨骼，還包括人體各個器官的圖像處理。因此，我們可以在此基礎上開發、繪制更多種類的醫學圖像，將其應用于可視化 web 平臺上。在互聯網高速發展的今天，相信基于 web 平臺的應用將會取得長足的發展。同時，基于 B/S 平臺的交互式和可視化醫學影像平臺，對醫療影像數據的跨平臺化、移動化有重要影響，將進一步促進遠程會診、遠程醫療教學的發展。
引言
電子計算機斷層掃描成像（computed tomogra-phy，CT）和磁共振成像（magnetic resonance ima-ging，MRI）是一系列二維（2D）圖像采集技術[1]，但醫生在通過采集到的 2D 圖像數據集進行診斷時，往往會感到缺乏有效、直觀的診斷信息，因此需要對圖像數據集進行 3D 重建。但圖像 3D 重建后往往需要專門開發桌面程序來渲染，而目前市場上操作系統存在多樣化的現狀，在個人電腦上有視窗操作系統（Windows）、蘋果操作系統（MAC operation system，MAC OS）以及嵌入式操作系統（Linux）；在移動端有安卓（Andriod）和蘋果移動操作系統（iPhone operation system，IOS）兩大操作系統。目前大多數影像歸檔通信系統（picture archiving and communication systems，PACS）都只是在 Windows 環境下以客戶端/服務器（client/server，C/S）的模式開發，即使在 INFINIT 公司的 PACS 系統中，也是通過加載插件的形式在瀏覽器中進行渲染，因此渲染圖像的方式都不太便捷，無法跨平臺。同時，由于醫學圖像傳輸需要較大的網絡帶寬，圖像在客戶端進行 3D 重建以及渲染需要計算機具有較強性能的中央處理器（central processing unit，CPU）與圖形處理器（graphics processing unit，GPU），這對醫院的計算機硬件與網絡設施都提出了更高的要求。
為了彌補這些不足，研究人員開始開發基于網頁（web）的應用程序，克服了以前桌面軟件開發經常遇到的部分問題[2]。基于 web 的應用往往比本地應用程序要多一些優勢，例如：當 web 開發一個軟件應用程序，可以通過瀏覽器在世界各地的任何用戶執行，并且獨立于操作系統，不需要安裝任何特殊的軟件。另外，web 應用程序集成在云端，即計算機云服務器，所以它能保證用戶即時訪問最新版本的軟件，這是一個非常重要的特性。在醫療成像研究領域中，一些交互式的處理醫學圖像的平臺已經開發并應用[3]。
為了提供交互式的 web 3D 模型，基于網絡的醫學影像平臺應用了三個先進的網絡技術：可擴展 3D 語言（extensible 3D，X3D）、第五代超文本標記語言（hypertext markup language 5，HTML 5）、網頁編程圖形庫（web graphics library，WebGL）。其中 X3D 技術能實現醫學圖像 3D 可視化，HTML 5 與 WebGL 組成渲染引擎，能夠幫助處理患者的圖像數據，使用交互式多邊形 3D 模型，方便醫生診斷以及撰寫手術報告。由于這些技術提供了人體組織和器官的實時 3D 模型，使得醫生能夠更加便捷、有效地觀片。醫學 3D 模型最明顯的好處是呈現了高效的解剖情況和器官之間復雜的空間關系，使醫生能夠更為準確地做出診斷。本文主要研究基于 web 的網絡醫學影像平臺的設計，以期為醫學圖像處理提供更強大的工具，以利于在 web 平臺中，讓大量的醫學影像數據更便捷地得到傳輸，更有利于基于互聯網的醫療、科研、教學的發展。
1 相關工作
1.1 HTML 5 與 WebGL 研究
HTML 5 是超文本標記語言（hyper text markup language，HTML）的第五版。HTML 5 規范了很多新的功能，其中對于瀏覽器圖形開發較為實用的就是在 HTML 5 增加了畫布（canvas）功能[4]。使用 HTML 5 的 canvas 功能在瀏覽器中規范了一個矩形區域，開發人員可以在這個區域中使用腳本語言 Java-Script 代碼繪制圖形。
WebGL 是通過嵌入式開放圖形庫 2.0 版本（OpenGL for embedded systems 2.0，OpenGL ES 2.0）與 JavaScript 的綁定實現的，目前在眾多瀏覽器中，例如：Firefox、Safari、Chrome、Opera 等，都已經實現支持 WebGL。WebGL 實質是 HTML 5 canvas 元素的一個繪制上下文[5]。
HTML 5 之前已經實現了支持 2D 繪制上下文，在 web 的 JavaScript 代碼中，使用下面的命令就可以從 canvas 元素中獲取 2D 繪制上下文。
var context 2D=canvas.getContext ("2d")；
如果需要在 canvas 元素中獲取 WebGL 繪制上下文，使用下面一段代碼就可以實現。
var contextWebGL=canvas.getContext ("webgl")；
通過上面的方式獲取到 web 圖形繪制上下文后，我們可以通過 context2D 變量調用得到 HTML 5 支持的 2D 圖形繪制支持函數，通過 context-WebGL 變量可以調用得到 WebGL 支持函數。
1.2 X3D 和 X3DOM 研究
X3DOM 是將集成的、抽象的 X3D 場景內容直接映射到文本對象模型（document object model，DOM）的元素[6]。要導出 X3D 格式的 3D 場景，我們可以使用 3D 建模工具，比如醫學圖形處理庫 MeVisLab。然后，我們可以使用通過 canvas 元素將 X3DOM 和 WebGL 集成到 HTML 5，將它們實時地顯示出來。
X3D 是一個軟件標準，定義了多媒體中基于網絡傳播的交互 3D 內容[7]。使用 X3D 和 X3DOM，我們可以訪問特定 X3D 元素定義的 JavaScript 事件函數。我們可以設計一個函數使用 X3D 中 3D 圖形變化功能，用以更新特定場景元素的顏色，同時也可以應用它的用戶交互功能，將特殊事件應用在 X3D 的代碼中，例如單擊事件，用鼠標點擊一個特定的 3D 對象，然后呈現一個可視化的 3D 變化。
1.3 MeVisLab 介紹
在設計初期，MeVisLab 還只是普通的 3D 圖像進行處理的程序，如今 MeVisLab 已經發展成為一個開放的圖像處理流程框架。MeVisLab 最大的特色就在于其模塊化運行流程的設計，所有的功能和算法都基于它的模塊化處理而實現，這種功能讓數據或者圖像能夠直接通過圖形用戶接口（graphics user interface，GUI）在流程中處理。在轉換的過程中，系統極少出現錯誤，生成的圖像格式也可以設定，方便用戶重用。應用 MeVisLab 自帶的功能模塊，在不需要注入任何其它代碼的情況下，就能夠實現 CT 和 MRI 圖像 3D 重建。
此外，在所有的主流操作系統中，MeVisLab 還提供了免費的使用認證，并且提供了開發者論壇[8]。在最新的 2.7.1 版本中，MeVisLab 提供了 1 000 多個預定義的標準模塊，還有另外 1 800 多個基于圖像的配準和分隔工具（insight segmentation and registration toolkit，ITK）和圖像可視化工具（the visualization toolkit，VTK）的功能模塊，極大地豐富了系統功能。
2 系統設計
2.1 總體設計
基于 web 的醫學影像系統由數據集采集、圖像 3D 重建、瀏覽器/服務器（browser/server，B/S） 系統設計以及 3D 圖像渲染等幾個關鍵步驟組成，如圖 1 所示。首先采集患者的 CT 或 MRI 形成數據集，在服務器的 MeVisLab 中進行 3D 重建，然后以 X3D 的格式輸出并存儲在服務器的關系型數據庫（MySQL）中。每當有瀏覽器客戶端發起圖像數據請求時，服務器利用超文本預處理器（PHP：hypertext preprocessor，PHP）將圖像數據轉成 JavaScript 對象表示法（JavaScript object nota-tion，JSON）格式傳輸到客戶端。客戶端接收到數據后利用 WebGL 的特性將 3D 圖形渲染出來。
圖1
系統處理流程
Figure1.
Treatment process of the system
2.2 圖像 3D 重建
在系統中最為關鍵的步驟就是實現 2D 和 3D 圖像可視化的一系列工作。在醫學圖像中，CT 或者 MRI 采集組成的圖像是一系列連續的 2D 掃描數據集[9]。數據集產生后，我們使用 MeVisLab 導入并且進行 3D 重建，整個過程直接使用了 MeVisLab 自帶的圖像可視化處理技術，過程使用的算法封裝在可鏈接的模塊當中[10]。
首先，使用圖像上傳模塊上傳 2D 圖像數據（CT 或者 MRI 數據），然后使用圖像處理模塊中的移動立方體（marching cubes，MC）算法將連續的 2D 圖像片段轉換成 3D 曲面網格[11]。MC 算法是 3D 數據場等值面生成的經典算法，主要由下面 4 個步驟組成：
（1）體素的構成與獲取頂點坐標及灰度值。
CT 是由不同灰度值的像素組成，等值面是由所有具有相同灰度值的點構成的連續曲面[12]。在 3D 圖像中，空間元素是由連續的體素構成，每個體素由 8 個數據點構成，每個數據點由相鄰斷層圖像中的像素構成，如圖 2 所示，在相鄰兩個斷層圖像中分別取出 4 個對應的像素點，形成 3D 圖像的體素。
（2）等值面與體素交點位置的計算及三角網格繪制。
在處理體素兩個點的值不相同的某一條邊時，等值面會與這條邊相交，且僅有一個交點，交點p 代表等值點坐標。p1、p2 代表兩個端點的坐標，v1，v2 代表兩個端點的值，v 代表等值面的值，p=p1+（v—v1）×（p2—p1）/（v2—v1）。求出等值面與體素棱邊的交點以后，將這些交點連接成三角形或多邊形，形成等值面的一部分。等值面與某一體素相交，共有15種情況，在MC算法中使用8位數據表記錄體素的狀態，根據狀態表得到15種體素內等值面的構造類型的其中之一。
圖2
相鄰圖像像素構成體素的過程
Figure2.
Process in which adjacent pixels constitute a voxel
（3）等值面的法向量的計算。
在等值面上的每一點，其沿面切線方向的梯度分量值是零，因此，該點梯度矢量的方向也就代表了等值面在該點的法向。MC 算法中使用中心差分法計算任意點M（i，j，k）的梯度[13]。
| $\left\{ \begin{array}{l}Gx(i,j,k) = f(i + 1,j,k) - f(i - 1,j,k)\\Gy(i,j,k) = f(i,j + 1,k) - f(i,j - 1,k)\\Gz(i,j,k) = f(i,j,k + 1) - f(i,j,k{\rm{ - }}1)\end{array} \right.$ |
這里f（i，j，k）表示了空間中（i，j，k）這點的灰度值，然后對體素 8 個頂點上法向量進行線性插值就可得到位于體素邊上三角片各個頂點的法向量。
（4）使用高洛德著色（gouraud shading）光照模型，繪制得到等值面的多邊形曲面模型[14]。
3D 重建之后，我們需要將已轉換的圖像輸出為瀏覽器能夠解析的數據格式。使用 MeVisLab 的 X3D 封裝模塊將 3D 圖像封裝成 X3D 文件。
2.3 B/S 系統設計
圖像在經瀏覽器渲染之前，還需要經過一系列的處理，需要將圖像文件轉換成 JSON 格式與服務器進行傳輸[15]。眾所周知，瀏覽器可以通過 Java-Script 技術動態地解決用戶的請求，通過瀏覽器將請求轉移到服務器。這些請求可以以同步或者異步的方式與服務器通信，調用異步 JavaScript 和標準通用標記語言（asynchronous JavaScript and XML，AJAX）能夠實現與服務器異步通信[16]。服務器通過編程語言 PHP 啟動進程和執行命令，同時，服務器存儲了應用程序的數據庫、系統腳本、組件等用于執行流程。當服務器收到瀏覽器的請求后，瀏覽器將刷新頁面來顯示從服務器端獲取的內容，通過發送一個 JSON 文檔，由客戶機程序通過 GPU 的統一計算設備架構（compute unified device architecture，CUDA）或者開放圖形語言（open computing language，OpenCL）程序異步地渲染新的內容[17]，平臺系統配置如圖 3 所示。
圖3
系統配置
Figure3.
System configuration
在整個 web 端數據處理過程中，我們需要經過下面兩個關鍵步驟，如圖 4 所示：
（1）上傳所有的圖像數據，包括經 MeVisLab 預處理過的聯合圖像格式（joint photographic experts group，JPEG）和可縮放矢量圖形（scalable vector graphics，SVG）文件。在服務器中，使用 PHP 語言執行服務器程序，使用 MySQL 數據庫存放數據。同時，還需要一些腳本來編碼和解碼上傳的醫學圖像。
（2）調用服務器的 PHP 文本，將生成的 X3D 文件轉換成 JSON 格式。JSON 是一個輕量級的、基于文本交換格式的結構化數據，對序列化和網絡連接非常有用，因此能夠加速服務器與客戶端的通信速度，并且能夠節省服務器存儲空間。通過使用 AJAX 異步地與服務器通信，避免用戶提交每個交互請求后必須重新加載整個 web。
圖4
B/S 系統結構
Figure4.
B/S system structure
2.4 3D 圖像渲染
由于 X3D 運行時使用 X3DOM 能夠無縫地嵌入到 DOM，場景節點可以實時訪問和改變，包括旋轉、放縮、透明化等 3D 變化[18]。基于 X3DOM 技術，我們還能通過層疊樣式表（cascading style sheets，CSS）對任意 DOM 子樹做 3D 變形[19]。
在 web 中的 3D 應用包含了 canvas 元素，通過 JavaScript 程序與之相關聯，JavaScript 程序獲取 3D 圖形上下文，然后將 3D 場景繪制到這個 canvas 元素中[20]。3D 上下文通過 OpenGL ES 2.0 的應用程序編程接口直接操作圖形處理相關的硬件，進入到 WebGL 的圖形處理流水線中，這種方式在以往的瀏覽器中是沒有提供的。整個過程如圖 5 所示。
圖5
瀏覽器渲染流程
Figure5.
Browser rendering process
為了確保快速訪問整個網站，我們并沒有直接在 HTML 中嵌入 3D 模型。相反，我們通過 PHP 腳本將 3D 文本自動轉換成 JSON 格式存放在服務器中。與標準通用標記語言文本不同，JSON 格式在訪問特定場景的節點之前不需要被解析，比如頂點，光照材質，紋理等，這些場景都可以通過 JavaScript 對象在瀏覽器中解析[21]。瀏覽器動態地訪問請求 AJAX 事件的 3D 場景節點的 JSON 文本，我們可以直接從服務器中下載這些文本并且在瀏覽器中渲染出來，在網絡暢通的情況下，這個過程通常只需要幾秒鐘。
3 應用測試
3.1 測試環境
為了能夠讓圖像 3D 重建效率更高，我們的測試服務器配置的 CPU 是 Intel Xeon E3-1230 v3，主頻率 3.3 GHz，配備了 4 核，支持 8 線程。配備了 1 TB 的硬盤，用于存儲所接收的圖像。客戶機我們使用普通 PC 機、MAC 機、Ipad 4、三星 GALAXY S5，安裝了支持 WebGL 的多種瀏覽器。測試環境數據量不大，網絡使用普通網線和無線網在同一局域網中連接。
3.2 測試結果
本文采集了患者的腹部 CT 數據集作為實驗數據，共 110 張 JPEG 格式 CT 圖像作為數據集，每張圖像大小在 107～187 KB 之間，共計 13.5 MB。圖像數據來自德陽市人民醫院 PACS 系統，為了隱私起見，屏蔽了患者的個人信息。在整個系統中，首先在服務器的 MeVisLab 中使用 MC 算法對采集到圖像數據集進行 3D 重建，然后輸出為 X3D 格式并存儲到數據庫中。再由 PHP 文本將其轉換成 JSON 格式，瀏覽器接收到數據并解碼，通過調用 WebGL 功能在 web 中將 3D 圖像渲染出來，效果如圖 6 所示。
圖6
瀏覽器渲染效果
Figure6.
Results of browser rendering
如圖 6 所示，重建的 3D 骨骼圖像可以在瀏覽器中成功渲染，也可以通過 WebGL 實現旋轉、縮放功能，并且在移動手機端也能進行上述操作，基本實現了 3D 醫學圖像的跨平臺顯示，圖像清晰，可瀏覽性較強。
本文設計實現了患者腹部骨骼的 3D 重建以及在瀏覽器解析渲染，針對 HTML 5 與 WebGL 跨平臺的特性，分別在 Windows、MAC OS、Andriod 和 IOS 下做相應測試。測試主要包括了瀏覽器響應時間和渲染幀數，具體數據如表 1 所示。
表1
多種瀏覽器渲染性能測試結果
Table1.
Results of performance render test for multiple browsers
如表 1 所示，示例的患者骨骼 3D 圖像可以在 4 種操作系統下通過 HTML 5、WebGL 渲染出來。從表 1 測試數據可以看出，圖像渲染的性能在 PC 端遠遠高于移動端。這是由于 PC 端的硬件（尤其是 CPU 和 GPU）性能更為強大，因此各方面的性能都優于移動端。
在獨立顯卡的 OpenGL 4.3 支持下，PC 端也完全支持 OpenGL ES 2.0，渲染幀數較高，并且做縮放、旋轉操作沒有延遲和卡頓的現象，顯示都極為流暢。在各個品牌的瀏覽器下做測試也沒有顯著的性能差別，這與瀏覽器內核開源化有一定關系。
相對來說，移動端的性能需要一定程度的提升，響應時間較長，顯示幀數不高，當對圖像操作過于頻繁時，會出現一點延遲和卡頓的情況，但也能滿足 3D 圖像的重建與顯示，靜態的圖像質量與分辨率同 PC 端并沒有明顯差別。
同時，該平臺并沒有大規模應用在實際的醫療環境中，在一定規模的醫院中，醫學圖像特別是 CT 與 MRI 數據量龐大。這就意味著當多個客戶端發起請求時，服務器進行 3D 重建所需要占用的 CPU 資源將會比較高。因此，使用 MeVisLab 對 CT 或者 MRI 數據集進行 3D 重建預處理，將生成的 X3D 文件存儲在服務器數據中，能夠避免業務高峰期服務器 CPU 負載過高，但同時也將需要更多空間存儲預處理圖像數據。
4 討論
目前，基于 HTML5、WebGL、X3D 技術實現 3D 圖形的可視化具有很強的適應性，克服了傳統應用程序對于多平臺和多系統兼容性、可移植性差的問題。同時，MeVisLab 提供了相當多的醫學圖像處理功能，不僅是骨骼，還包括人體各個器官的圖像處理。因此，我們可以在此基礎上開發、繪制更多種類的醫學圖像，將其應用于可視化 web 平臺上。在互聯網高速發展的今天，相信基于 web 平臺的應用將會取得長足的發展。同時，基于 B/S 平臺的交互式和可視化醫學影像平臺，對醫療影像數據的跨平臺化、移動化有重要影響，將進一步促進遠程會診、遠程醫療教學的發展。
