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

劉 景,劉 豪,王夷非

1(河海大學 物聯網工程學院,常州 213022)

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

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

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

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

1 虛擬實驗室系統需求

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

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

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

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

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

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

2 系統設計

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

圖1 系統架構

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

2.1 系統功能模塊設計

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

圖2 功能模塊設計

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

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

2.2 人機交互

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

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

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

圖3 基于AJAX的交互架構

2.3 虛擬儀器的組件化封裝

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

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

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

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

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

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

3 系統實現與測試

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

圖4 仿真流程圖

具體仿真步驟如下:

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

圖5 實驗場景

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

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

圖6 路由器參數設置

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

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

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

圖7 Ping實驗

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

表1 模型的加載時間

4 結束語

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

1周洪,任正濤,胡文山,等.基于NCSLab 3D的虛擬遠程實驗系統設計與實現.計算機工程,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的虛擬電工電子網絡實驗室設計.計算機工程,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喬卉,龔慶武,江傳文.面向電力培訓的三維交互仿真平臺的設計與實現.電力自動化設備,2013,33(6):157-162.

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