李琨　賈立偉　石曉明

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

關(guān)鍵詞：Web3D；WebGL；醫(yī)學虛擬實驗室；虛擬人體三維模型；網(wǎng)頁交互技術(shù)

1概述

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

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

2Web3D技術(shù)與WebGL技術(shù)概述

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

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

3系統(tǒng)分析與設(shè)計

3.1系統(tǒng)需求

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

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

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

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

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

3.2后臺數(shù)據(jù)庫的設(shè)計

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

3.3系統(tǒng)功能模塊

通過上述兩方面內(nèi)容的分析，可以按功能將系統(tǒng)結(jié)構(gòu)分為用戶管理、課程管理、測試和數(shù)據(jù)庫備份四個模塊（如圖2所示）。

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

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

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

（4）數(shù)據(jù)庫備份模塊：用于數(shù)據(jù)庫管理員對數(shù)據(jù)庫中的數(shù)據(jù)進行備份、恢復、統(tǒng)計等操作。

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

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

4.1系統(tǒng)功能模塊

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

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

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

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

4.2 WebGL技術(shù)實現(xiàn)模型在網(wǎng)頁端的顯示

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