基于X3DOM的3D虛擬實驗室①

劉 景,劉 豪,王夷非

1(河海大學 物聯(lián)網(wǎng)工程學院,常州 213022)

2(常州市圖形圖像與骨科植入物數(shù)字化技術重點實驗室,常州 213022)

實驗教學作為學生獲取和掌握知識的主要手段之一,是現(xiàn)代教學中不合或缺的一部分.傳統(tǒng)的實驗室由于建設成本較高、場地不足、實驗設備易損壞和開放性受到較大限制等問題,難以滿足實驗教學的需要.如何構建出內容豐富、訓練效果高和不受時間空間限制的開放式實驗環(huán)境是高等院校當前需要解決的重要問題之一.近年來,隨著計算機技術、通信技術與虛擬現(xiàn)實技術的快速發(fā)展,虛擬實驗室作為一種嶄新的教學方式越來越受到人們的關注.虛擬實驗室讓學生可以隨時隨地的完成實驗任務.并通過豐富的虛擬實驗內容,讓學生的學習方式由被動轉為主動,提高學習效果.

當前,虛擬實驗室主要分為遠程控制和軟件仿真兩種形式.遠程控制虛擬實驗室需要提供真實的實驗儀器,實驗人員通過遠程計算機控制這些實驗儀器來完成實驗.如武漢大學[1]開發(fā)了三維網(wǎng)絡化控制系統(tǒng)實驗室NCSLab3D,通過瀏覽器來遠程控制實驗設備,實現(xiàn)了實驗教學設備的共享.在這類實驗中,一個實驗儀器無法被多人同時操作,實驗資源利用率低,其發(fā)展受到了一定的限制.軟件仿真實驗室是通過計算機技術和軟件技術對實驗過程、實驗操作、實驗現(xiàn)象和實驗結果進行模擬和分析.希臘國立大學[2]開發(fā)了B/S架構的MASTERS VLab,對MATLAB進行了二次開發(fā),構建了圖形用戶界面,無需編程,用戶通過拖拽就可完成實驗.卡內基梅隆大學[3]建造了虛擬工程學習實驗室(VESLL),通過可視化、在線游戲的方式來幫助用戶學習STEM(科學、技術、工程、數(shù)學)知識.浙江大學[4]網(wǎng)絡實驗室陳仲明、朱善安等開發(fā)了虛擬電工電子網(wǎng)絡實驗室,該平臺采用Modelica進行統(tǒng)一建模,將每個實驗設計成一個Flex插件,可以靈活的擴展實驗.大連理工大學[5]提出了采用Virtools平臺來構建三維高仿真HPLC虛擬實驗室,在三維環(huán)境下動態(tài)模擬各種參數(shù)的色譜數(shù)據(jù).軟件仿真實驗室采用虛擬的儀器設備來進行實驗,開發(fā)方式靈活,開發(fā)成本低,成為了虛擬實驗室開發(fā)的主要方向.近年來,隨著網(wǎng)絡技術和虛擬現(xiàn)實技術研究的不斷深入,虛擬實驗室正朝著網(wǎng)絡化、高度仿真化和專業(yè)化的方向發(fā)展.

本文采用B/S(瀏覽器/服務器)結構,基于開源三維渲染引擎X3DOM,以X3D作為三維數(shù)據(jù)描述格式.采用Javascript開發(fā)組件庫,設計并實現(xiàn)了三維在線虛擬實驗室系統(tǒng).

1 虛擬實驗室系統(tǒng)需求

為了達到實驗教學目標的要求,該系統(tǒng)應能滿足如下要求:

(1)用戶可以隨時隨地使用PC機通過瀏覽器進入實驗室,無需下載插件;

(2)仿真度高,實驗場景逼真度高,實驗設備外觀、功能應與真實設備基本一致,三維環(huán)境中的光照、材質符合實際情況;

(3)方便使用,能夠多角度觀察實驗設備,實驗設備具有放大、縮小、平移和旋轉功能,能夠場景漫游;

(4)實驗設備具有一定的智能性,如用戶可以通過點擊電源開關來打開或關閉燈光,漫游走到門面前時門能夠自動打開或關閉等.

(5)實時性高,能夠及時響應用戶請求,實驗過程中幀數(shù)穩(wěn)定在每秒30幀以上.

2 系統(tǒng)設計

根據(jù)虛擬實驗室的特點和開發(fā)需要,采用B/S(瀏覽器/服務器)的體系架構,如圖1所示.服務器端分為Web服務器和數(shù)據(jù)庫服務器.Web服務器為用戶提供網(wǎng)上信息瀏覽服務,存儲了HTML、CSS、Javascript和圖片等文件.Web服務器通過“請求-響應”的方式與客戶端進行通信,瀏覽器發(fā)出請求,Web服務器做出響應.數(shù)據(jù)庫服務器用于存儲三維模型文件,場景配置文件.用戶通過局域網(wǎng)或Internet網(wǎng)訪問Web服務器,再通過Web服務器訪問數(shù)據(jù)庫服務器.

圖1 系統(tǒng)架構

客戶端是虛擬實驗系統(tǒng)的核心,客戶端仿真實驗采用MVC(模型-視圖-控制器)的設計模式.模型用來存放所有的數(shù)據(jù)對象,如一個虛擬儀器模型,可以存放屬性以及所有與模型相關的邏輯(模型的讀、取等),當控制器從服務器上獲取數(shù)據(jù)或有新的數(shù)據(jù)產(chǎn)生時,產(chǎn)生的數(shù)據(jù)就被封裝成模型實例.視圖中的三維場景通過X3DOM渲染.X3DOM是X3D的擴展,可以直接以HTML的形式顯示3D內容,集成了CSS樣式并支持HTML5事件,X3DOM引入了WebGL,可以通過硬件加速(GPU)渲染,無需插件[6].控制器用于處理和響應事件,三維場景加載時,控制器會為場景添加監(jiān)控事件,監(jiān)控場景中數(shù)據(jù)的變化并處理,實時更新場景.另外,為了避免數(shù)據(jù)的重復創(chuàng)建,減少服務器請求次數(shù),提高系統(tǒng)實時性,客戶端具有緩存機制,將需要重復使用的數(shù)據(jù)(如三維模型,圖片)進行存儲,當再次需要時,可直接在瀏覽器緩存區(qū)取數(shù)據(jù),無需再次發(fā)送請求.

2.1 系統(tǒng)功能模塊設計

實驗中涉及的實驗設備較多,功能較為復雜,對仿真平臺的渲染效果、實時性和交互性有較高的要求.為了降低代碼的耦合度,實現(xiàn)代碼復用,提高系統(tǒng)的可擴展性,采用模塊化的開發(fā)方式,自頂向下將一個復雜的系統(tǒng)逐步劃分為若干模塊,系統(tǒng)的功能模塊主要分為三部分:通信模塊、三維仿真模塊和實驗仿真模塊,每個模塊又可分為多個功能獨立的模塊.其中,網(wǎng)絡通信模塊負責客戶端與服務器之間的信息交流,通過對Javascript腳本和CSS樣式文件進行合并,減少HTTP請求數(shù),提高頁面響應速度,保證系統(tǒng)實時性.如圖2所示.

圖2 功能模塊設計

三維仿真模塊主要是實現(xiàn)三維實驗場景的構建、渲染、調度與管理.用戶可以通過鼠標鍵盤對虛擬環(huán)境中的實驗設備進行實時控制.具體包含模型的調入、合成、編輯與渲染,交互控制,場景文件的生成等功能.該模塊分為三個部分:場景管理、圖形渲染和交互控制.場景管理負責創(chuàng)建和管理三維場景,實驗中斷和結束時提供存儲功能;圖形渲染負責瀏覽器中場景的展示與模型的優(yōu)化;交互控制負責處理交互事件,提供方便快捷的交互方式.

虛擬實驗室中虛擬實驗的種類較多,不同實驗的實驗原理、實驗過程和實驗的展示方式等有所同,實驗仿真模塊為不同的實驗提供了統(tǒng)一的接口,對虛擬實驗進行統(tǒng)一管理.該模塊又可分為實驗設備仿真模塊、實驗任務管理模塊、仿真結果展示模塊;實驗設備仿真模塊實現(xiàn)設備的視覺屬性和邏輯功能[7]的仿真,視覺屬性描述了設備的三維屬性,包括名稱、材質、大小和位置等,邏輯功能主要描述了設備的邏輯結構,包括設備的數(shù)據(jù)信息、交互控制信息和設備的功能屬性等.實驗任務管理模塊負責實驗指導,實驗視屏的管理,用戶在進入實驗前,可以根據(jù)實驗指導做好技術準備,了解實驗原理,實驗過程等相關信息.仿真結果展示模塊提供可視化的數(shù)據(jù)顯示.

2.2 人機交互

在虛擬實驗室中用戶可以多角度的觀察實驗器件,控制實驗器件(平移、旋轉、放大、縮小等),查看實驗器件的屬性.因此良好的交互體驗對虛擬實驗室尤為關鍵.如何提供持續(xù)的、穩(wěn)定的和實時的交互方式是虛擬實驗室開發(fā)的重點.實現(xiàn)方式主要有兩種:靜態(tài)方式和動態(tài)方式.

靜態(tài)方式是根據(jù)X3D提供的Script節(jié)點,通過節(jié)點間的結合來達到交互效果,不使用外部程序.這種方式的交互代碼一般包含在X3D文件中,交互的邏輯比較簡單,可操控性不強,不適合在復雜的交互場景中使用.

動態(tài)方式是通過外部的邏輯來控制交互事件的產(chǎn)生,X3DOM將X3D場景內容作為HTML5的DOM節(jié)點直接嵌入頁面中,通過Javascript腳本語言為DOM節(jié)點添加交互事件.當用戶與三維場景之間產(chǎn)生交互事件時,瀏覽器捕獲事件并做出響應.為了滿足數(shù)據(jù)實時更新的需要,采用AJAX技術.如圖3所示,AJAX充當客戶端和服務器端文件傳送的工具,基于X3D標準編碼的 3D文件可以通過AJAX在異步條件下由服務器端傳送到客戶端,在客戶端通過Javascript腳本語言并利用X3DOM標準提供的接口將 3D文件插入三維場景中,這樣通過瀏覽器就可以看到三維的物體[8].同時為了避免用戶出現(xiàn)操作失誤的情況,采用堆棧的方式存儲了用戶的操作步驟,讓用戶可以方便的撤銷當前操作.

圖3 基于AJAX的交互架構

2.3 虛擬儀器的組件化封裝

組件是對數(shù)據(jù)和方法的簡單封裝.系統(tǒng)運行過程中需要通過解析模型文件來獲取數(shù)據(jù)變量.系統(tǒng)的交互控制模塊,場景的載入與存儲,虛擬儀器的參數(shù)配置模塊都從建立的數(shù)據(jù)模型中獲取數(shù)據(jù)來完成各自的功能.采用解析XML模板文件產(chǎn)生數(shù)據(jù)源來進行變量封裝.在實驗中,將模型的基本信息如ID、大小、位置和旋轉等存儲在XML中,統(tǒng)一管理,方便傳輸.

方法的封裝是虛擬儀器邏輯功能的封裝,在虛擬實驗室中虛擬儀種類多,功能復雜,因此封裝過程中應盡量保持共同封閉原則,避免因組件中一個類的變化而影響其他組件的變化.封裝的具體過程如下:

(1)初始化(init).包括變量名的創(chuàng)建,DOM節(jié)點的定義,XML模板解析數(shù)據(jù)的傳入,相關類的引入;

(2)事件綁定(bind).在實驗過程中,用戶只關心如何通過鼠標鍵盤對虛擬實驗器件進行操作,而事件如何與HTML元素進行綁定以及事件觸發(fā)后如何處理是事件綁定關注的重點.通過動態(tài)綁定為一個節(jié)點同時綁定多個事件,在事件觸發(fā)的時候按照一定的順序執(zhí)行.

(3)渲染(render).將腳本文件中的數(shù)據(jù)渲染到HTML頁面上.為了產(chǎn)生最快的渲染速度,頁面渲染時應盡量減少下載所有關鍵資源所需要的網(wǎng)絡往返的數(shù)量,減少關鍵資源的大小.采用異步執(zhí)行Javascript腳本文件的方式,避免因瀏覽器解析阻塞強迫瀏覽器等待CSSOM (CSS Object Model View)并且停止DOM的構造.

(4)銷毀現(xiàn)場(distory).銷毀不再引用的對象,釋放內存.

3 系統(tǒng)實現(xiàn)與測試

本節(jié)以計算機網(wǎng)絡課程中的Ping實驗作為展示實例.介紹虛擬實驗室的仿真過程.仿真流程圖如圖4所示.

圖4 仿真流程圖

具體仿真步驟如下:

(1)仿真開始:解析XML模板數(shù)據(jù)文件,根據(jù)XML中的參數(shù),從虛擬儀器組件庫中預加載實驗所需的組件,導入三維模型,UI組件渲染場景初始信息,實驗室場景如圖5所示,可以通過漫游觀察實驗室全景.

圖5 實驗場景

(2)虛擬儀器組件載入:用戶根據(jù)實驗需要,加載實驗所需的虛擬儀器組件,Web瀏覽器解析Javascript腳本文件,將虛擬儀器的三維坐標,大小,旋轉角度等信息顯示在頁面上.用戶調整視角,通過鼠標鍵盤調整虛擬儀器位置.

(3)參數(shù)配置:根據(jù)實驗目標設置實驗參數(shù)(如IP地址),如圖6所示.

圖6 路由器參數(shù)設置

(4)仿真運行:檢測參數(shù)配置是否正確,根據(jù)系統(tǒng)參數(shù)運行實驗.

(5)仿真結果顯示:動態(tài)顯示實驗結果,智能提示錯誤信息,如圖7所示.

(6)實驗存儲:可以在實驗的任何時候保存實驗信息,避免因突發(fā)狀況不能完成實驗.

圖7 Ping實驗

在實驗過程中模型的加載速度是系統(tǒng)實時性的集中體現(xiàn),本文以計算機網(wǎng)絡實驗過程中常用的模型為例,對單個模型在不同瀏覽器中的載入時間進行了測試.測試PC機采用Inter(R)Core(TM)i5-2450的CPU,NVIDIA GeForce 610M的GPU,8G內存.采用x3d文件格式進行網(wǎng)絡傳輸.為了避免偶然因數(shù)對模型加載速度的影響,采用相同環(huán)境下同一模型加載10次后取平均值的方式進行實驗測試,測試結果如表1所示.從表中可以看出,當前4種常用的瀏覽器都可以對虛擬實驗系統(tǒng)進行訪問,且模型的加載速度.

表1 模型的加載時間

4 結束語

為了實現(xiàn)開放實驗室建設的目標,本文提出了基于X3DOM虛擬實驗室的方法和建設思路,采用X3DOM作為三維渲染引擎,無需插件,沉浸性強.以組件的方式對實驗設備進行封裝,易于擴展.經(jīng)過實驗測試表明,該系統(tǒng)交互性好,實時性高,能夠達到實驗教學的目的,同時也體現(xiàn)了虛擬實驗室在實驗教學上的優(yōu)勢.下一步的工作是完善實驗設備組件庫,豐富虛擬實驗內容.

1周洪,任正濤,胡文山,等.基于NCSLab 3D的虛擬遠程實驗系統(tǒng)設計與實現(xiàn).計算機工程,2016,42(10):20-25,31.[doi:10.3969/j.issn.1000-3428.2016.10.004]

2Alexiadis DS,Mitianoudis N.MASTERS:A virtual lab on multimedia systems for telecommunications,medical,and remote sensing applications.IEEE Transactions on Education,2013,56(2):227-234.[doi:10.1109/TE.2012.2210224]

3August SE,Hammers ML,Murphy DB,et al.Virtual engineering sciences learning lab:Giving STEM education a second life.IEEE Transactions on Learning Technologies,2016,9(1):18-30.[doi:10.1109/TLT.2015.2419253]

4施正寅,朱善安.基于Modelica的虛擬電工電子網(wǎng)絡實驗室設計.計算機工程,2012,38(11):287-289.[doi:10.3969/j.issn.1000-3428.2012.11.087]

5劉志廣,王艷嬙,王姣姣,等.三維高仿真HPLC虛擬實驗室的構建與研究.計算機與應用化學,2012,29(12):1483-1487.[doi:10.3969/j.issn.1001-4160.2012.12.018]

6Birr S,M?nch J,Sommerfeld D,et al.The liveranatomyexplorer:A WebGL-based surgical teaching tool.IEEE Computer Graphics and Applications,2013,33(5):48-58.[doi:10.1109/MCG.2013.41]

7喬卉,龔慶武,江傳文.面向電力培訓的三維交互仿真平臺的設計與實現(xiàn).電力自動化設備,2013,33(6):157-162.

8楊俊峰,黎建輝,楊風雷.深層網(wǎng)站Ajax頁面數(shù)據(jù)采集研究綜述.計算機應用研究,2013,30(6):1606-1610,1616.