李紅波，薛 茹

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

引言

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

1 虛擬實驗室概述

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

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

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

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

1.2 虛擬實驗室

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

2 WebGL 概述

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

2.1 WebGL 概念

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

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

2.2 WebGL 優(yōu)勢

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

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

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

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

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

3 WebGL 在虛擬計算機實驗室構(gòu)建中的設(shè)計

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

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

3.1.1 HTML 準備

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

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

3.1.2 交互處理

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

3.1.3 渲染處理

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

圖2 WebGL 渲染流程圖

3.2 虛擬計算機實驗室設(shè)計

3.2.1 虛擬計算機實驗室體系架構(gòu)與功能模塊

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

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

圖3 虛擬計算機實驗室體系

圖4 虛擬計算機實驗室功能模塊

3.2.2 虛擬計算機實驗室應(yīng)用

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

圖5 交換機三維模型

4 結(jié)語

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