Web 與VR 結(jié)合的植物實(shí)驗(yàn)教學(xué)系統(tǒng)建設(shè)

林志瑋，楊素慧，黃聯(lián)發(fā)

（福建農(nóng)林大學(xué) 計(jì)算機(jī)與信息學(xué)院，福建 福州 350002）

1 VR 技術(shù)用于高校植物實(shí)驗(yàn)教學(xué)的必要性

我國國土遼闊，跨越熱帶、亞熱帶、溫帶和寒帶，植物的物種多樣性高度富集[1]。在眾多植物中，不乏具有食用或藥用等價(jià)值的植物，也存在危害生境的植物，認(rèn)識植物及其病害是利用和保護(hù)植物的前提。植物實(shí)驗(yàn)教學(xué)是植物學(xué)課程中的重要一環(huán)，教學(xué)內(nèi)容包括課程實(shí)驗(yàn)、野外實(shí)習(xí)、畢業(yè)設(shè)計(jì)、創(chuàng)新實(shí)踐4 部分，涉及植物細(xì)胞與整體的宏觀微觀理解、鑒別科屬采集標(biāo)本、設(shè)計(jì)實(shí)驗(yàn)撰寫論文、參加科研項(xiàng)目及競賽等一系列植物實(shí)驗(yàn)教學(xué)內(nèi)容，有助于提高學(xué)生對所學(xué)植物的深入認(rèn)識，是提高學(xué)生動(dòng)手能力和思辨能力的必要途徑[2-4]。

VR 技術(shù)用于植物實(shí)驗(yàn)教學(xué)具有眾多優(yōu)點(diǎn)：

（1）沉浸式體驗(yàn)。中國植物種類眾多，若想盡可能多地觀察植物，實(shí)地考察不易實(shí)現(xiàn)。早期植物實(shí)驗(yàn)教學(xué)是將植物照片與文字匯編為植物百科全書，但檢索和查閱信息比較費(fèi)時(shí)。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，快速檢索植物變?yōu)榭赡?。已有二維信息系統(tǒng)可完成植物物種的鑒別，使用者輸入植物名稱、設(shè)置參數(shù)后，系統(tǒng)會呈現(xiàn)檢索內(nèi)容，但視覺感受不理想，且無法給予用戶觸覺體驗(yàn)[5]。VR 技術(shù)用于植物實(shí)驗(yàn)教學(xué)可令學(xué)生對植物的認(rèn)識途徑由二維拓寬到三維，且增加了觸覺感官的調(diào)動(dòng)。

（2）沒有時(shí)間限制。對于單株植物，其生長周期包括萌發(fā)、生長發(fā)育、開花結(jié)果、產(chǎn)生新的種子并逐漸凋亡。不同的植物生長周期不同，既有一年生植物，也有多年生植物。VR 技術(shù)用于植物實(shí)驗(yàn)教學(xué)，可呈現(xiàn)植物一年四季乃至整個(gè)生命周期的狀態(tài)，減少學(xué)生觀察植物的時(shí)間成本。對于一個(gè)植物種群，從其出現(xiàn)到滅絕是一個(gè)漫長的過程，使用VR 技術(shù)記錄的種群進(jìn)化過程，是一筆寶貴的財(cái)富[6]。

（3）突破空間限制。許多珍稀植物（例如高山植物）生長在環(huán)境惡劣、人難以到達(dá)的地方。將最初采集植物的數(shù)據(jù)資料輸入植物教學(xué)系統(tǒng)后，可以將這些空間上難以接近的植物呈現(xiàn)給學(xué)生，降低野外實(shí)習(xí)發(fā)生意外的風(fēng)險(xiǎn)。

（4）保證實(shí)驗(yàn)的完整性。VR 技術(shù)用于植物實(shí)驗(yàn)教學(xué)，由于沒有實(shí)驗(yàn)場地要求和時(shí)間的限制，能夠較好地保證植物實(shí)驗(yàn)的完整實(shí)施。

為了給學(xué)生更好的沉浸式植物實(shí)驗(yàn)體驗(yàn)，開發(fā)了基于Web 的VR 植物實(shí)驗(yàn)教學(xué)系統(tǒng)。

2 結(jié)合Web 和VR 的植物實(shí)驗(yàn)教學(xué)系統(tǒng)開發(fā)

在基于Web 的VR 植物實(shí)驗(yàn)教學(xué)系統(tǒng)中，教師負(fù)責(zé)開啟服務(wù)器與Kinect 體感設(shè)備，學(xué)生只需使用自己的移動(dòng)設(shè)備訪問該網(wǎng)站，并將手機(jī)放入紙板（cardboard）頭盔形成VR 眼鏡，就可以透過VR 眼鏡進(jìn)入該VR 教學(xué)網(wǎng)站。該網(wǎng)站內(nèi)置文字、語音、動(dòng)畫，含有豐富手部操作的人機(jī)互動(dòng)方式，學(xué)生可體驗(yàn)聽覺、視覺、觸覺的沉浸式虛擬現(xiàn)實(shí)教學(xué)。VR 植物實(shí)驗(yàn)教學(xué)系統(tǒng)的架構(gòu)分為前端UI 層、展示層、業(yè)務(wù)層、系統(tǒng)運(yùn)行環(huán)境、硬件層，如圖1 所示。

圖1 系統(tǒng)架構(gòu)圖

前端用戶界面（UI）層采用HTML + CSS + jQuery設(shè)計(jì)，頁面轉(zhuǎn)換模擬書本翻頁的效果，二維植物或昆蟲圖片采用旋轉(zhuǎn)木馬輪播特效，植物多級科屬采用伸縮導(dǎo)航。該層的文件格式包括html、css、json 和jpg等，3D 模型由json 文件反序列化得到。

展示層涉及LayaAir 3D 引擎以及WebSocket 互動(dòng)通信協(xié)議，使用LayaAir 引擎實(shí)現(xiàn)3D 植物的原地旋轉(zhuǎn)，自定義放大、縮小的動(dòng)畫效果，并在前端UI 層中渲染場景。WebSocket 協(xié)議可實(shí)現(xiàn)由服務(wù)端向客戶端主動(dòng)推送信息，減少服務(wù)端和客戶端的連接次數(shù)，降低資源浪費(fèi)。

業(yè)務(wù)層由前端業(yè)務(wù)層與后端業(yè)務(wù)層構(gòu)成。前端業(yè)務(wù)層負(fù)責(zé)3D 引擎中資源的數(shù)據(jù)化處理，為3D 引擎提供可供解析的模型數(shù)據(jù)、燈光和天空等場景組成因素的設(shè)置、模型位置和大小的設(shè)置，重點(diǎn)是對3D 植物模型進(jìn)行動(dòng)畫處理以及用戶交互方式的處理與整合；后端的業(yè)務(wù)層負(fù)責(zé)處理Kinect 體感設(shè)備接收到的人體肢體動(dòng)作數(shù)據(jù)。

系統(tǒng)運(yùn)行環(huán)境層要求主機(jī)的運(yùn)行系統(tǒng)至少為Windows8 系統(tǒng)，并安裝Kinect 2.0 的SDK，使用node.js搭建服務(wù)器。

硬件層包括VR+植物實(shí)驗(yàn)教學(xué)系統(tǒng)運(yùn)行時(shí)所需要使用的硬件設(shè)備：（1）負(fù)責(zé)實(shí)現(xiàn)與用戶進(jìn)行復(fù)雜交互的Kinect 體感設(shè)備，本系統(tǒng)開發(fā)使用Kinect 2.0 版本；（2）個(gè)人PC 設(shè)備，作為系統(tǒng)服務(wù)器使用。

目前常用的VR 設(shè)備可分為2 種：一種是由谷歌等公司研發(fā)、已投入市場的成熟產(chǎn)品，如Oculus VR眼鏡、愛普生VR 眼鏡及延伸產(chǎn)品；另一種是專門為特定人群設(shè)計(jì)的VR 設(shè)備，如軍用作戰(zhàn)裝備仿真。本系統(tǒng)使用的VR 設(shè)備較前者加入了Kinect 體感設(shè)備來捕捉用戶動(dòng)作信息，用戶可通過肢體動(dòng)作與VR 世界互動(dòng)，而不僅局限于轉(zhuǎn)動(dòng)頭部改變視角；而較后者，由于用手機(jī)與紙板頭盔形成VR 眼鏡，大幅降低了系統(tǒng)開發(fā)成本和開發(fā)門檻，適合在高校普及使用。另外，本系統(tǒng)采用B/S 架構(gòu)，只需維護(hù)服務(wù)器，從而降低了維護(hù)成本 。

3 結(jié)合Web 與VR 的植物實(shí)驗(yàn)教學(xué)系統(tǒng)構(gòu)成

VR+植物實(shí)驗(yàn)教學(xué)系統(tǒng)包含系統(tǒng)功能模塊和教學(xué)單元，二者相輔相成，構(gòu)建出完整的植物實(shí)驗(yàn)教學(xué)系統(tǒng)，如圖2 所示。

系統(tǒng)功能模塊用于多模態(tài)、多角度地進(jìn)行植物實(shí)驗(yàn)教學(xué)，例如以動(dòng)畫、文字、語音、圖像等模態(tài)，從宏觀至微觀介紹植物病蟲害預(yù)防和治理課程中的重點(diǎn)知識，采用先進(jìn)的教學(xué)手段達(dá)到豐富教學(xué)內(nèi)容、開拓教學(xué)形式、提升教學(xué)水平的效果。

圖2 VR+植物實(shí)驗(yàn)教學(xué)系統(tǒng)

3.1 植物展示模塊和病蟲害介紹模塊

植物展示模塊以及病蟲害介紹模塊是VR+植物教學(xué)系統(tǒng)中的核心模塊，其功能為以平滑動(dòng)畫為主、文字語音為輔的方式介紹植物及病蟲害的以下內(nèi)容：

（1）植物名稱、科屬、外部形態(tài)等植物信息，如圖3 所示。

（2）植物受到病蟲害后外部形態(tài)、內(nèi)部構(gòu)造，害蟲分布、習(xí)性、危害等病蟲害信息。

植物動(dòng)畫包括植物生長動(dòng)畫、植物病變動(dòng)畫、植物治愈動(dòng)畫、植物病變進(jìn)度的微觀動(dòng)畫等。

圖3 系統(tǒng)植物介紹場景

植物生長動(dòng)畫與植物病變進(jìn)度的微觀動(dòng)畫同屬于逐幀動(dòng)畫，不同的是植物生長動(dòng)畫每一幀就是一個(gè)植物模型。為保持畫面的連貫性，本系統(tǒng)的逐幀動(dòng)畫最低播放要求為25 幀/s，最終呈現(xiàn)流暢的植物生長動(dòng)畫，且時(shí)間軌跡覆蓋春、夏、秋、冬4 個(gè)季節(jié)，如圖4 所示。另外，植物生長動(dòng)畫采用分組進(jìn)行，以求達(dá)到不同植株的生長速度不一的景象。本系統(tǒng)的植物生長動(dòng)畫的植物模型目前約有60 個(gè)，今后將與相關(guān)部門合作，持續(xù)擴(kuò)充系統(tǒng)素材庫。

圖4 系統(tǒng)植物生長動(dòng)畫

植物病變進(jìn)度的微觀動(dòng)畫每一幀就是一張圖片，為了配合植物病變動(dòng)畫的時(shí)長，微觀動(dòng)畫用到的圖片達(dá)102 張，時(shí)長約為5 s。植物病變動(dòng)畫與植物治愈動(dòng)畫都為材質(zhì)動(dòng)畫，通過改變模型材質(zhì)達(dá)到動(dòng)畫效果。

植物生長動(dòng)畫是對當(dāng)下野外植物考察的替代與加強(qiáng)工具。首先，對于某些生長于險(xiǎn)峻地形的珍貴植物，如高山植物，可先由專業(yè)人士采集植物的三維數(shù)據(jù)，錄入系統(tǒng)植物素材庫，從而幫助無法到達(dá)實(shí)地觀察的群體了解珍貴植物，擴(kuò)大對植物的觀察次數(shù)及觀察人數(shù)，避免野外考察發(fā)生意外的風(fēng)險(xiǎn)。其次，植物生長周期緩慢，每一年和每一季節(jié)植物的外觀和內(nèi)部形態(tài)都有很大不同，借助VR 技術(shù)展示植物生長動(dòng)畫，可動(dòng)態(tài)呈現(xiàn)植物的生長變化，能豐富課堂內(nèi)容呈現(xiàn)方式，提高學(xué)生的學(xué)習(xí)積極性。

3.2 病蟲害防治模塊

病蟲害防治模塊是用戶交互功能中的一個(gè)重要模塊。病蟲害防治模塊不僅為用戶提供選單供用戶自行選擇簡單操作，還允許用戶親自實(shí)踐，例如用戶可操作虛擬放大鏡觀察植物的病害。該模塊通過體感設(shè)備偵測用戶的肢體動(dòng)作并作出判斷，用戶可以用手控制虛擬場景中的小刀，對指定的植物進(jìn)行病蟲害防治操作，如圖5 所示。

病蟲害防治模塊有多樣互動(dòng)設(shè)計(jì)。用戶進(jìn)入網(wǎng)站后，可通過旋轉(zhuǎn)頭部選擇植物模型，握拳后張開手掌以喚起輪盤選單，通過左右滑動(dòng)選單輪盤，搭配發(fā)病組合或者進(jìn)入系統(tǒng)自定義病變情況，然后左手持小刀或其他工具刮除植物病變組織，再用右手給植物涂抹保護(hù)劑或蠟等保護(hù)物質(zhì)，最后包扎塑料布，結(jié)束操作。互動(dòng)操作充分調(diào)動(dòng)了學(xué)生的眼睛和雙手，可以培養(yǎng)學(xué)生實(shí)踐動(dòng)手的能力，鞏固學(xué)生對植物知識的掌握。

圖5 用戶進(jìn)行病蟲害防治操作

3.3 教學(xué)單元

Web 與VR 結(jié)合的植物實(shí)驗(yàn)教學(xué)系統(tǒng)能夠運(yùn)行多個(gè)教學(xué)單元。教學(xué)單元的選取參考了相關(guān)課程建設(shè)方案，聽取了相關(guān)專家的建議，并發(fā)揮出本校的學(xué)科優(yōu)勢。教學(xué)單元包括植物病害癥狀及病原物形態(tài)觀察、糧食作物與茶樹病害識別與防治、蔬菜與果蔬病害識別與防治等，單元下設(shè)多個(gè)實(shí)驗(yàn)任務(wù)，使實(shí)驗(yàn)內(nèi)容具有趣味性、連貫性和完整性，培養(yǎng)了學(xué)生的動(dòng)手實(shí)踐能力和思維創(chuàng)造性，滿足了植物實(shí)驗(yàn)教學(xué)的需要[7-8]。

4 結(jié)語

VR+植物教學(xué)系統(tǒng)整合 LayaAir 3D 引擎搭配HTML5 前端、node.js 后臺、基于Windows 的Kinect交互設(shè)備這3 項(xiàng)技術(shù)。該系統(tǒng)在瀏覽器端實(shí)現(xiàn)VR，用Kinect 設(shè)備實(shí)現(xiàn)了良好的交互性，使植物學(xué)實(shí)驗(yàn)效果有較大的提高。作為該系統(tǒng)的進(jìn)一步建設(shè)設(shè)想，將在系統(tǒng)中增加傳感器，為用戶提供更加真實(shí)的植物操作體驗(yàn)，如加入植物氣味的制造裝置，為學(xué)生識別植物和植物病變提供更豐富的信息[9]。