基于WebGL技術的醫(yī)學虛擬實驗室的設計與實現

李琨　賈立偉　石曉明

摘要：目前，在我國醫(yī)學高職高專院校的教學過程中，存在著諸如教學模具不足、實物標本稀缺、實驗器材昂貴以及醫(yī)學實驗操作存在風險等問題，使得醫(yī)學高職高專院校的實驗教學效果難以達到預期。為了解決上述問題，基于WebGL技術設計并實現符合我國醫(yī)學高職高專院校教育教學需要的醫(yī)學虛擬實驗室系統。基于WebGL技術的醫(yī)學虛擬實驗室系統的實施必將在提高醫(yī)學教育技術、改善教學實驗環(huán)境和優(yōu)化教學過程、培養(yǎng)具有創(chuàng)新意識和創(chuàng)新能力的人才以及減少教學成本等方面發(fā)揮重要作用。

關鍵詞：Web3D；WebGL；醫(yī)學虛擬實驗室；虛擬人體三維模型；網頁交互技術

1概述

目前，在我國醫(yī)學高職高專院校的教學過程中，存在著諸如教學模具不足、實物標本稀缺、實驗器材昂貴以及醫(yī)學實驗操作存在風險等問題，而且許多實操練習都是通過觀看教學視頻來進行的，醫(yī)學生的實際動手能力并沒有得到訓練。對于以培養(yǎng)高素質醫(yī)學技能型人才為目標的高職高專院校來說，實驗教學效果難以達到預期。隨著“互聯網+”時代的到來，以網絡技術和虛擬現實技術為基礎的Web3D技術，以其逼真的場景模擬功能、友好的交互能力在提高學生學習興趣、強調教學的重難點內容，培養(yǎng)學生實操技能等方面能夠起到積極的作用；特別是其良好的網絡傳輸性能，使得不受時間、場所、內容等因素限制的“線上學習”活動成為可能。

當然，國外許多商業(yè)公司和科研機構已經開發(fā)出了技術比較成熟的用于教學的虛擬現實產品。但是，這些產品對于國內大部分醫(yī)學院校來說還是具有很大的局限性（比如產品價格太高，操作系統語言環(huán)境陌生等）。醫(yī)學高職高專院校的學生要想熟練操作這些產品并不是一件容易的事。因此非常有必要開發(fā)出適合我國醫(yī)學高職高專院校教學實情的醫(yī)學仿真實驗系統。本文將基于WebGL技術對符合我國醫(yī)學高職高專院校教育教學需要的醫(yī)學虛擬實驗室進行設計與實現。

2Web3D技術與WebGL技術概述

Web 3D技術是互聯網與虛擬現實技術相結合的產物，讓人們利用網頁瀏覽器與三維虛擬世界進行交互性操作，以達到身臨其境的視覺體驗。當前，主流的Web3D技術有Java3D、Flash3D、VRML等技術。但是，由于這些Web3D技術的應用開展較早，往往自身存在著一些固有的缺點（如兼容性低、不能完全支持硬件加速、技術復雜且開發(fā)周期長、瀏覽器需要安裝播放插件等問題）。在“互聯網+”時代下，人們希望隨時隨地都可以通過移動終端設備快速便捷地訪問互聯網資源。由于智能移動設備間存在著差異性，使得這些主流Web3D技術難以適應所有操作系統平臺的運行要求。因此，迫切需要一些新的技術能夠解決“互聯網+”時代下Web3D技術的應用難題。

WebGL是一種基于OpenGL ES 2.0標準，可以通過HTML5的Canvas元素作為DOM接口訪問的一種實現Web交互式3D圖形渲染技術-引，它完美地解決了網頁端的GPU硬件加速以及瀏覽器插件依賴兩大難題。而基于WebGL技術開發(fā)項目，其源代碼實現較為繁雜，常常采用第三方庫來簡化開發(fā)。常用的第三方庫有Three.{s、SceneJS、BabylonJS、GLGE等，其中Three.js是JavaScript編寫的一款運行在瀏覽器中，而且能夠提供強大交互功能的3D引擎。本項目使用Three.js這個第三方庫來創(chuàng)建基于WebGL技術的醫(yī)學虛擬實驗室。

3系統分析與設計

3.1系統需求

（1）虛擬實驗室中包括數據庫管理員、教師和學生三類用戶，根據登錄用戶的類型來控制虛擬實驗室前后臺訪問權限。其中數據庫管理員擁有最高權限，可以增刪改查數據庫中的所有數據。

（2）教師用戶通過虛擬實驗室后臺自行添加、設置課程章節(jié)劃分，依據章節(jié)添加學習資源（主要包括三維模型文件、用于講解所用的音頻文件）。

（3）學生用戶使用鼠標來完成對虛擬人體三維模型的交互操作。

（4）增加章節(jié)測試和實驗考核模塊，教師利用此模塊用以檢查學生對知識的掌握情況。

（5）數據庫管理員可以對后臺數據庫中的數據進行備份、恢復、打印和導出。

3.2后臺數據庫的設計

本系統采用PHP+MYSQL的技術組合來實現虛擬實驗室系統的開發(fā)。根據對系統需求的分析，該系統的后臺數據庫可以劃分為用戶管理、課程管理和實驗測試三大模塊。其中，用戶管理和實驗測試兩個模塊并不是本系統的技術難點，因此本節(jié)以課程管理模塊為例，闡述后臺數據庫的設計方案。課程管理模塊的數據庫中主要包括cate、cottt'se、slteotl/'se、3dimg和music五張數據表（其關聯關系如圖1所示）。其中課程類別cate表中存放的是課程分類的基本信息，課程course表記錄的是子課程（即對課程實現模塊化后得到的基本教學單元）的基本信息，sltcourse表是選課表，3dimg表存放的是該子課程所用三維模型文件的存儲信息，music表存放的是該子課程講解所用音頻文件的存儲信息。

3.3系統功能模塊

通過上述兩方面內容的分析，可以按功能將系統結構分為用戶管理、課程管理、測試和數據庫備份四個模塊（如圖2所示）。

（1）用戶管理模塊：該模塊包括數據庫管理員、教師信息以及學生信息三個管理子模塊。用以管理三類用戶的基本信息和控制各類用戶的使用權限。

（2）課程管理模塊：該模塊包括課程信息、選課信息、課程類別以及模型文件管理四個管理子模塊。其中模型文件管理模塊用以增刪改查課程相關的三維圖形文件信息（包括模型文件所需的.obj、.mtl和.jpg文件的存儲位置信息）。

（3）測試模塊：該模塊包括單元測試和期末實驗測試兩個模塊，用以設置每個子課程所布置的章節(jié)測試內容，還可用作學期末實驗課程考核的測試。

（4）數據庫備份模塊：用于數據庫管理員對數據庫中的數據進行備份、恢復、統計等操作。

4醫(yī)學虛擬實驗室的實現

醫(yī)學虛擬實驗室的實現技術主要包括虛擬人體三維建模技術、網頁端的顯示技術、網頁端的交互技術。虛擬人體三維建模技術是虛擬現實技術的基礎。把建立的三維模型在網頁端顯示出來，即所謂的網頁端的顯示技術。網頁端的交互技術是醫(yī)學虛擬實驗室所需要的關鍵技術。本節(jié)以耳的解剖模型為例，闡述醫(yī)學虛擬實驗室的實現過程。

4.1系統功能模塊

虛擬三維人體器官或標本模型采用的是體模型建模，可以使用諸如3DSMAX、Blender等工具來實現建模。其中3DSMAX在三維建模領域開展較早，技術應用最成熟，可以利用的模型資源也最多。因此，本系統使用3DSMAX對虛擬人體三維模型進行建模。

按照人耳的解剖結構可將耳的結構分為外耳、中耳和內耳。利用多邊形建模方式在3DSMAX軟件中建立耳部解剖結構的完整模型（如圖3所示）。為增強其可視性，參照解剖學圖譜經過反復篩選和調整，選用合適材質文件為耳部結構進行著色。最后，將模型導出為3D模型文件（.obj格式文件）、材質文件（.mtl格式文件）和貼圖文件（如.jpg.png文件等）這三類資源文件。在此階段需要注意以下兩點內容：

（1）由于建立模型時使用的坐標系單位并不統一，直接導出obi文件會影響模型在網頁端的顯示，所以在導出文件之前根據實際設置模型的縮放比例。

（2）在導出材質文件時常常出錯或沒有貼圖文件，原因是使用了第三方插件渲染器（如VRay等）對模型進行了渲染，需要在導出文件之前將渲染器設置為默認掃描線渲染器，并使用標準材質重新貼圖才能解決此問題。

4.2 WebGL技術實現模型在網頁端的顯示

WebGL技術實現三維虛擬模型在網頁端顯示的基本方法是：首先利用Three.is的Scene0函數創(chuàng)建視圖場景；然后通過利用Three.js擴展庫MTLLoader.i，s中的MTLLoaderO函數加載模型所需的材質文件（.mtl文件）；當MTLLoader對象使用loadO函數加載成功后，利用Three.is擴展庫0BJLoader.is中的0BJLoaderO函數加載模型文件（.obj文件），將加載的模型加入Scene場景中。接下來，在場景中添加光源對象（多個點光源PointLight對象和自然光AmbientLight對象）、透視攝像機對象（PerspectiveCamera對象），并對這些對象設置光源位置和顏色，透視相機的角度、橫縱比等參數，以使三維虛擬模型達到較為逼真的視覺效果。最后使用Three.is中的WebGL渲染器（WebGLRenderer），為場景、相機和模型等元素按每次一幀實施動畫渲染，即可在網頁端顯示出人耳的三維虛擬模型（如圖4所示）。