基于WebGL 技術(shù)的虛擬計(jì)算機(jī)實(shí)驗(yàn)室構(gòu)建和設(shè)計(jì)*

李紅波，薛 茹

（廣西師范大學(xué) 職業(yè)技術(shù)師范學(xué)院，廣西 桂林，541004）

引言

計(jì)算機(jī)相關(guān)課程是對(duì)理論和實(shí)踐有較高要求的課程，在實(shí)驗(yàn)室設(shè)備不能完全跟上教學(xué)要求的情況下，需要借助虛擬現(xiàn)實(shí)技術(shù)建設(shè)虛擬實(shí)驗(yàn)室，以解決職業(yè)院校傳統(tǒng)實(shí)驗(yàn)資源匱乏的問(wèn)題。從易開(kāi)發(fā)、易操作角度出發(fā)，采用瀏覽器/服務(wù)器（Browser/Server，B/S）模式來(lái)建設(shè)虛擬實(shí)驗(yàn)系統(tǒng)[1]，用戶可通過(guò)瀏覽器訪問(wèn)Web 端程序并進(jìn)行操作。以這樣的方式構(gòu)建的虛擬計(jì)算機(jī)實(shí)驗(yàn)室，可讓學(xué)生在逼真的實(shí)驗(yàn)環(huán)境下進(jìn)行學(xué)習(xí)，有助于激發(fā)學(xué)生的學(xué)習(xí)熱情并提高其實(shí)踐能力。

1 虛擬實(shí)驗(yàn)室概述

1.1 虛擬現(xiàn)實(shí)技術(shù)

虛擬現(xiàn)實(shí)技術(shù)（Virtual Reality Technology，簡(jiǎn)稱VR Technology）由美國(guó)VPL 公司董事長(zhǎng)杰伊·拉尼爾（Jaron Lanier）于上世紀(jì)八十年代初首次提出，也被稱作靈境技術(shù)。虛擬現(xiàn)實(shí)技術(shù)以計(jì)算機(jī)技術(shù)為主要技術(shù)，綜合多媒體技術(shù)與仿真技術(shù)，并借助三維圖像技術(shù)和傳感技術(shù)等高新科學(xué)技術(shù)[2]，從而生成一種三維動(dòng)態(tài)交互式虛擬環(huán)境。用戶佩戴特定的虛擬設(shè)備，比如虛擬眼鏡或特殊頭盔顯示器等，把自身從現(xiàn)實(shí)世界中分離出來(lái)，用戶的視、聽(tīng)、觸等感覺(jué)器官進(jìn)入到一個(gè)逼真的虛擬世界中，產(chǎn)生身臨其境的感覺(jué)。

虛擬現(xiàn)實(shí)技術(shù)的三個(gè)顯著特性分別是沉浸性（Immersion）、交互性（Interaction）和想象性（Imagination），根據(jù)英文縮寫(xiě)通常把這三個(gè)特性簡(jiǎn)稱為“3I”特性[3]。 因此，虛擬現(xiàn)實(shí)技術(shù)也被定義為“沉浸式交互想象”的3I 模型。沉浸性，是指用戶通過(guò)使用專門(mén)的頭盔顯示器、3D 眼鏡、數(shù)據(jù)手套等設(shè)備，再利用計(jì)算機(jī)技術(shù)模擬出所需的虛擬環(huán)境，把自己的視、聽(tīng)、觸等感官感覺(jué)帶入到一個(gè)虛擬的空間，使用戶產(chǎn)生如同在真實(shí)世界中的感覺(jué)，完全沉浸其中并與虛擬世界中的物體進(jìn)行交互。交互性，是指使用者借助特定的虛擬現(xiàn)實(shí)設(shè)備（例如數(shù)據(jù)手套）對(duì)虛擬場(chǎng)景中的虛擬物體進(jìn)行操控，虛擬對(duì)象會(huì)按照用戶給出的指令即時(shí)做出一定的反饋，實(shí)現(xiàn)人機(jī)深層次交互。想象性，是指虛擬現(xiàn)實(shí)可以把人們頭腦中的抽象想法或不存在的事物具體化創(chuàng)建出來(lái)，并且模擬現(xiàn)實(shí)生活中的場(chǎng)景，從而加深用戶對(duì)抽象概念的理解，同時(shí)也可能引發(fā)新的想象和構(gòu)思。這種虛擬環(huán)境提供了豐富的想象空間，人們?cè)谶@個(gè)虛擬空間中可以加深對(duì)某個(gè)事物的認(rèn)識(shí)。

依據(jù)虛擬現(xiàn)實(shí)技術(shù)的沉浸度，可將虛擬現(xiàn)實(shí)系統(tǒng)主要?jiǎng)澐殖煞浅两?、半沉浸式和沉浸式三種類型[4]。非沉浸式虛擬現(xiàn)實(shí)系統(tǒng)（也稱為桌面虛擬系統(tǒng)），通常由個(gè)人計(jì)算機(jī)呈現(xiàn)三維動(dòng)畫(huà)，創(chuàng)設(shè)基于電腦屏幕的虛擬場(chǎng)景，用戶通過(guò)鼠標(biāo)、操縱桿、鍵盤(pán)等輸入設(shè)備進(jìn)行簡(jiǎn)單交互，此系統(tǒng)成本較低，普及率更高。半沉浸式虛擬現(xiàn)實(shí)系統(tǒng)是在桌面虛擬系統(tǒng)的基礎(chǔ)上，提供一些外部感官追蹤設(shè)備，以改善用戶的沉浸感體驗(yàn)，加強(qiáng)人與虛擬系統(tǒng)之間的交互性。沉浸式系統(tǒng)需要一些專門(mén)的虛擬裝備，以及緊貼頭部和身體的跟蹤設(shè)備，讓使用者產(chǎn)生較強(qiáng)的浸入感，從多種感官體驗(yàn)上營(yíng)造更真實(shí)的環(huán)境效果，使用戶全身心投入到虛擬世界中。

1.2 虛擬實(shí)驗(yàn)室

虛擬實(shí)驗(yàn)室是基于Web 技術(shù)和虛擬仿真技術(shù)搭建的開(kāi)放型網(wǎng)絡(luò)虛擬實(shí)驗(yàn)教學(xué)系統(tǒng)，它是現(xiàn)實(shí)教學(xué)實(shí)驗(yàn)室的虛擬化與數(shù)字化。[5]虛擬實(shí)驗(yàn)室是虛擬現(xiàn)實(shí)技術(shù)運(yùn)用在教育領(lǐng)域中的一種重要形式，它具有低成本、高效率、強(qiáng)交互性以及多功能等特點(diǎn)，人們已逐漸意識(shí)到虛擬實(shí)驗(yàn)室在教育中的重要價(jià)值，尤其是對(duì)實(shí)踐教學(xué)的推動(dòng)作用。計(jì)算機(jī)專業(yè)的教學(xué)與實(shí)踐內(nèi)容隨著技術(shù)的發(fā)展需實(shí)時(shí)更新，同時(shí)具備計(jì)算機(jī)系統(tǒng)更新速度快、理論教學(xué)與實(shí)踐教學(xué)需結(jié)合、學(xué)生知識(shí)水平不同等特點(diǎn)。由于學(xué)校存在經(jīng)費(fèi)不足、實(shí)訓(xùn)場(chǎng)地不足、機(jī)房管理困難等問(wèn)題，學(xué)生的實(shí)踐機(jī)會(huì)不多，現(xiàn)有的教學(xué)設(shè)備不能滿足學(xué)生專業(yè)發(fā)展的需求，因此學(xué)生實(shí)踐能力難以提高。為處理這些問(wèn)題，我們希望依靠虛擬現(xiàn)實(shí)技術(shù)搭建計(jì)算機(jī)虛擬實(shí)驗(yàn)室，幫助學(xué)校培養(yǎng)專業(yè)型人才。在虛擬計(jì)算機(jī)實(shí)驗(yàn)室中，學(xué)生能夠更直觀地理解相關(guān)的專業(yè)理論知識(shí)，既可以親自動(dòng)手操作，又可以通過(guò)實(shí)踐驗(yàn)證學(xué)習(xí)過(guò)程中提出的假設(shè)問(wèn)題。虛擬計(jì)算機(jī)實(shí)驗(yàn)室設(shè)備易于維護(hù)，可降低學(xué)校教學(xué)成本，提高實(shí)踐安全性，突破時(shí)空的限制，同時(shí)能夠?qū)崿F(xiàn)學(xué)生的自主學(xué)習(xí)和促進(jìn)學(xué)習(xí)個(gè)性化，是當(dāng)今計(jì)算機(jī)教育的發(fā)展趨勢(shì)。

2 WebGL 概述

虛擬現(xiàn)實(shí)技術(shù)在教學(xué)中的運(yùn)用為改變傳統(tǒng)教學(xué)模式提供了新思路，通過(guò)構(gòu)建高度仿真的實(shí)驗(yàn)平臺(tái)，可替代傳統(tǒng)教學(xué)形式下無(wú)法完全實(shí)現(xiàn)的實(shí)驗(yàn)，提高實(shí)驗(yàn)教學(xué)的效果。以往多是借助VRML 技術(shù)實(shí)現(xiàn)虛擬現(xiàn)實(shí)平臺(tái)的建設(shè)，但VRML 存在需要安裝專用插件、頁(yè)面渲染效果差以及交互擴(kuò)展能力弱等不足，WebGL 技術(shù)可很好地解決了這些問(wèn)題。

2.1 WebGL 概念

Khronos 組織提出的WebGL（Web Graphics Library）是一種3D繪圖協(xié)議，它由HTML5、JavaScript 和著色器語(yǔ)言GLSL 組成，以O(shè)penGL ES 2.0 為標(biāo)準(zhǔn)應(yīng)用程序編程接口（API），如圖1所示[6-8]。WebGL 技術(shù)利用JavaScript，可以在HTML5 的Canvas 元素中繪制三維圖形，它通過(guò)統(tǒng)一、跨平臺(tái)、標(biāo)準(zhǔn)的OpenGL 接口直接為Canvas 圖形實(shí)時(shí)渲染提供硬件三維加速，在網(wǎng)頁(yè)中顯示更流暢的三維場(chǎng)景和模型，創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)可視化[9-10]。WebGL 程序由在中央處理器（CPU）中運(yùn)行的JavaScript 和在圖形處理器（GPU）中運(yùn)行的GLSL 分別編寫(xiě)的程序組成。目前，大多數(shù)流行的瀏覽器（包括Google Chrome，F(xiàn)irefox，Opera和Safari 等）都支持WebGL 標(biāo)準(zhǔn)。

圖1 WebGL 技術(shù)結(jié)構(gòu)

2.2 WebGL 優(yōu)勢(shì)

跨平臺(tái)的WebGL 可以在任何操作系統(tǒng)上運(yùn)行，并且可以在手機(jī)、平板電腦和臺(tái)式計(jì)算機(jī)等設(shè)備上加載，WebGL 技術(shù)在虛擬實(shí)驗(yàn)室構(gòu)建中的優(yōu)勢(shì)如下：

（1）WebGL 技術(shù)標(biāo)準(zhǔn)允許通過(guò)自己的腳本在Web 上生成三維網(wǎng)頁(yè)，解決了傳統(tǒng)三維網(wǎng)頁(yè)顯示需要插件支持的問(wèn)題，它內(nèi)嵌在瀏覽器中，不需要安裝瀏覽器插件就可以進(jìn)行三維場(chǎng)景的搭建以及交互性操作。

（2）WebGL 是一個(gè)開(kāi)源的三維技術(shù)標(biāo)準(zhǔn)，供所有開(kāi)發(fā)者免費(fèi)使用，能夠降低學(xué)校開(kāi)發(fā)成本。

（3）WebGL 提供硬件三維圖形加速渲染，圖形繪制速度快，提高開(kāi)發(fā)的效率。

（4）WebGL 開(kāi)發(fā)難度低，圖像質(zhì)量高，人機(jī)交互性好，應(yīng)用前景寬廣。

3 WebGL 在虛擬計(jì)算機(jī)實(shí)驗(yàn)室構(gòu)建中的設(shè)計(jì)

虛擬實(shí)驗(yàn)教學(xué)可以提升教學(xué)的趣味性，從而激發(fā)學(xué)生的學(xué)習(xí)興趣，輔助完成現(xiàn)實(shí)中不可能操作的實(shí)驗(yàn)。因此，虛擬實(shí)驗(yàn)教學(xué)在計(jì)算機(jī)教學(xué)中占有非常重要的地位，建立虛擬計(jì)算機(jī)實(shí)驗(yàn)室是保障計(jì)算機(jī)專業(yè)教學(xué)質(zhì)量的重要手段?，F(xiàn)在很多職業(yè)院校著手搭建本校的虛擬實(shí)驗(yàn)室，WebGL 技術(shù)免去了安裝瀏覽器插件的麻煩，同時(shí)作為一個(gè)開(kāi)源標(biāo)準(zhǔn)，它不需要交納任何費(fèi)用，學(xué)校借助該標(biāo)準(zhǔn)開(kāi)發(fā)虛擬實(shí)驗(yàn)室可以大大節(jié)省成本。

3.1 三維場(chǎng)景構(gòu)建中WebGL 的關(guān)鍵技術(shù)

3.1.1 HTML 準(zhǔn)備

Canvas 是HTML5 中的畫(huà)布元素，它既可以作為頁(yè)面的組成部分，也可以填充全部頁(yè)面，使用WebGL 開(kāi)發(fā)自己的三維圖形，可與HTML5 的制作內(nèi)容無(wú)縫整合。本地?cái)?shù)據(jù)庫(kù)的Web 功能增加和展現(xiàn)性能增強(qiáng)是HTML5 最顯著的特點(diǎn)。[10]WebGL通過(guò)在HTML5 的Body 中添加Canvas 元素并綁定Onload 事件來(lái)初始化環(huán)境，基本框架如下：

，然后通過(guò)代碼var canvas=document.getElementById（'canvas'）獲取Canvas 元素。這是虛擬實(shí)驗(yàn)室制作的初始步驟，后期開(kāi)發(fā)人員可以根據(jù)需要再修改之間的內(nèi)容。

3.1.2 交互處理

用戶借助計(jì)算機(jī)與實(shí)驗(yàn)對(duì)象通過(guò)交互功能產(chǎn)生聯(lián)系，人機(jī)交互是虛擬實(shí)驗(yàn)室最重要的部分，實(shí)驗(yàn)的真實(shí)感也完全由交互環(huán)節(jié)決定。[11]在虛擬計(jì)算機(jī)實(shí)驗(yàn)室中，學(xué)生可以利用鼠標(biāo)和鍵盤(pán)等輸入設(shè)備操控實(shí)驗(yàn)?zāi)Ｐ托D(zhuǎn)、移動(dòng)和拾取，也可用鼠標(biāo)滾輪進(jìn)行放大和縮小。靈活自如的交互控制可使三維場(chǎng)景更生動(dòng)形象，加深學(xué)生沉浸感，充分鍛煉他們的動(dòng)手能力，使其在現(xiàn)實(shí)操作中展現(xiàn)更好的技術(shù)。JavaScript 配合WebGL 實(shí)現(xiàn)虛擬實(shí)驗(yàn)的交互功能設(shè)計(jì)，它是一種嵌入在HTML5 文件中的腳本語(yǔ)言，基于對(duì)象和事件驅(qū)動(dòng)，能夠?qū)χT如鼠標(biāo)單擊、拖拽等用戶事件做出響應(yīng)并處理。[12]在WebGL 運(yùn)行過(guò)程中，使用JavaScript 調(diào)用Canvas 元素，設(shè)置Canvas 的初始大小，獲取WebGL 的上下文，還要用JavaScript 解析加載模型數(shù)據(jù)。

3.1.3 渲染處理

WebGL 是一組圖形API（應(yīng)用程序編程接口），允許用JavaScript 控制GPU 的渲染過(guò)程進(jìn)行三維繪圖。通過(guò)JavaScript 實(shí)現(xiàn)圖像渲染，定義初始函數(shù)：function Init（）{var canvas = document.getElementById（'canvas'）；webgl=canvas.getContext（“webgl”）；}，該函數(shù)在頁(yè)面加載時(shí)被調(diào)用，目的是建立WebGL 上下文環(huán)境并對(duì)呈現(xiàn)內(nèi)容進(jìn)行渲染。著色器是一段使用GLSL 編寫(xiě)的簡(jiǎn)短程序，GPU 是它的運(yùn)行場(chǎng)所。著色器是實(shí)現(xiàn)圖形渲染的核心，通常由片段著色器（Fragment shader）與頂點(diǎn)著色器（Vertex shader）組成，WebGL 要求開(kāi)發(fā)人員為每個(gè)對(duì)象提供一個(gè)著色器。WebGL 渲染流程如圖2[13]所示。

圖2 WebGL 渲染流程圖

3.2 虛擬計(jì)算機(jī)實(shí)驗(yàn)室設(shè)計(jì)

3.2.1 虛擬計(jì)算機(jī)實(shí)驗(yàn)室體系架構(gòu)與功能模塊

虛擬計(jì)算機(jī)實(shí)驗(yàn)室體系架構(gòu)分為兩部分：客戶端和數(shù)據(jù)端，使得界面和后臺(tái)分離。如圖3 所示?？蛻舳耸窃赪eb 瀏覽器中呈現(xiàn)給學(xué)生的三維虛擬界面，學(xué)生先在用戶登錄界面利用賬號(hào)和密碼進(jìn)入虛擬計(jì)算機(jī)實(shí)驗(yàn)室；再觀看具有真實(shí)感的計(jì)算機(jī)實(shí)驗(yàn)演示視頻、實(shí)踐指導(dǎo)講解；然后進(jìn)行虛擬交互操作及虛擬仿真實(shí)驗(yàn)考核?？蛻舳吮普娴娜S場(chǎng)景搭建主要使用WebGL 技術(shù)，同時(shí)結(jié)合HTML5 和JavaScript 來(lái)實(shí)現(xiàn)，這是虛擬實(shí)驗(yàn)室能否給用戶帶來(lái)沉浸感的關(guān)鍵部分。數(shù)據(jù)端把所有用戶信息儲(chǔ)存于后臺(tái)，利用數(shù)據(jù)庫(kù)對(duì)學(xué)生學(xué)習(xí)的數(shù)據(jù)進(jìn)行儲(chǔ)存、分析和備份，以及共享和獲取其他同類院校的虛擬實(shí)驗(yàn)教學(xué)資源。數(shù)據(jù)庫(kù)選擇運(yùn)行性能穩(wěn)定、速度較快的MySQL 數(shù)據(jù)庫(kù)，它的源代碼免費(fèi)開(kāi)放，因此成本低且易于維護(hù)。學(xué)生在客戶端的學(xué)習(xí)、實(shí)驗(yàn)操作等信息都保存在數(shù)據(jù)庫(kù)中，教師借助這些數(shù)據(jù)的分析，對(duì)學(xué)生進(jìn)行個(gè)性化指導(dǎo)，系統(tǒng)將教師的指導(dǎo)及時(shí)反饋給學(xué)生，促進(jìn)學(xué)生提高自主學(xué)習(xí)的積極性。

虛擬計(jì)算機(jī)實(shí)驗(yàn)室主要分為三個(gè)功能模塊：學(xué)生、教師和管理員，如圖4 所示。學(xué)生在終端設(shè)備上注冊(cè)個(gè)人信息并登錄虛擬實(shí)驗(yàn)室；可以通過(guò)終端屏幕觀看實(shí)驗(yàn)演示視頻和瀏覽實(shí)驗(yàn)指導(dǎo)內(nèi)容，自主進(jìn)行課程的預(yù)習(xí)和復(fù)習(xí)；通過(guò)鼠標(biāo)、鍵盤(pán)等輸入設(shè)備進(jìn)行虛擬實(shí)驗(yàn)的操作練習(xí)；在虛擬實(shí)驗(yàn)室平臺(tái)發(fā)布學(xué)習(xí)中遇到的問(wèn)題，在線與同學(xué)和教師交流討論；完成測(cè)試與考核，查看學(xué)習(xí)成績(jī)及教師評(píng)語(yǔ)，依據(jù)反饋成績(jī)進(jìn)行自我糾錯(cuò)。教師在注冊(cè)登錄虛擬實(shí)驗(yàn)室后，可以查看本班學(xué)生信息，方便教學(xué)的常規(guī)管理；可以管理虛擬實(shí)驗(yàn)教學(xué)資源，發(fā)布實(shí)驗(yàn)教學(xué)演示和實(shí)驗(yàn)指導(dǎo)；可以監(jiān)控實(shí)驗(yàn)教學(xué)，及時(shí)掌握學(xué)生的實(shí)驗(yàn)進(jìn)度，督促學(xué)生開(kāi)展實(shí)驗(yàn)；可以在線指導(dǎo)學(xué)生的實(shí)驗(yàn)操作，進(jìn)行實(shí)時(shí)交流；可以批改學(xué)生的實(shí)驗(yàn)作業(yè)，組織實(shí)驗(yàn)考核，導(dǎo)出實(shí)驗(yàn)教學(xué)成績(jī)；根據(jù)數(shù)據(jù)庫(kù)提供的成績(jī)分析情況為學(xué)生定制專屬學(xué)習(xí)計(jì)劃。管理員負(fù)責(zé)管理實(shí)驗(yàn)室用戶信息，及時(shí)對(duì)用戶信息進(jìn)行添加、修改、刪除和查詢等；監(jiān)控虛擬計(jì)算機(jī)實(shí)驗(yàn)室的安全，及時(shí)檢測(cè)、排查安全隱患；定期更新與維護(hù)虛擬實(shí)驗(yàn)室系統(tǒng)。各個(gè)實(shí)驗(yàn)資源平臺(tái)的連接與維護(hù)都不能脫離管理員的操作。

圖3 虛擬計(jì)算機(jī)實(shí)驗(yàn)室體系

圖4 虛擬計(jì)算機(jī)實(shí)驗(yàn)室功能模塊

3.2.2 虛擬計(jì)算機(jī)實(shí)驗(yàn)室應(yīng)用

職業(yè)學(xué)校計(jì)算機(jī)組裝與維修課程主要包含計(jì)算機(jī)基礎(chǔ)知識(shí)、電腦主機(jī)組件裝配、OS 系統(tǒng)安裝和網(wǎng)絡(luò)接入等。[14]由于學(xué)校提供的實(shí)踐場(chǎng)地非常有限，而且擔(dān)心學(xué)生操作不當(dāng)造成計(jì)算機(jī)設(shè)備損壞，教師往往很少給學(xué)生動(dòng)手操作的機(jī)會(huì)。學(xué)生只能在課堂上邊看教師操作邊聽(tīng)其講解。而在虛擬計(jì)算機(jī)實(shí)驗(yàn)室搭建的交換機(jī)三維模型中，學(xué)生可以大膽動(dòng)手實(shí)踐，進(jìn)行網(wǎng)線連接和各種組件的拆裝，甚至可以任意操作驗(yàn)證各種假設(shè)，如圖5 所示。

圖5 交換機(jī)三維模型

4 結(jié)語(yǔ)

基于WebGL 技術(shù)構(gòu)建的虛擬計(jì)算機(jī)實(shí)驗(yàn)室具有教學(xué)成本低、教學(xué)效果好、教學(xué)功能全的特點(diǎn)。它徹底改變了傳統(tǒng)的計(jì)算機(jī)演示實(shí)驗(yàn)，突破環(huán)境和資源的限制，有效解決實(shí)驗(yàn)教學(xué)效果與實(shí)驗(yàn)條件之間的矛盾，有助于拓寬學(xué)生的知識(shí)面，提高學(xué)生實(shí)踐技能，激發(fā)學(xué)習(xí)興趣，拓展實(shí)驗(yàn)思維和促進(jìn)個(gè)性化學(xué)習(xí)。WebGL 技術(shù)搭建的虛擬計(jì)算機(jī)實(shí)驗(yàn)室是一種高性價(jià)比的計(jì)算機(jī)實(shí)驗(yàn)教學(xué)環(huán)境，更是傳統(tǒng)計(jì)算機(jī)教學(xué)的重要補(bǔ)充，將成為計(jì)算機(jī)實(shí)驗(yàn)教學(xué)發(fā)展的一個(gè)新方向，在職業(yè)院校高素質(zhì)計(jì)算機(jī)技術(shù)型人才培養(yǎng)中具有廣闊的應(yīng)用前景。