基于VR虛擬漫游技術的交互設計應用研究

姬喆

摘 ?要： 虛擬現實技術是指利用計算機多媒體技術從人的嗅覺、視覺、觸覺和聽覺等多方面來全方位模擬環境，讓人們在計算機構筑的虛擬環境中有身處其中之感，借助于人機交互可以獲得各種信息。文中首先對系統的設計目標和功能結構設計展開分析，然后在Web上利用VR技術來完成相應虛擬校園系統的開發。在此過程中對虛擬現實技術進行概述，并結合校園導向標識系統設計所需提出借助于VR實現該導向系統的可行性方案;最后給出虛擬校園系統的整體框架、所需技術與實現策略，同時還對該系統的交互與建模方法進行了論述。

關鍵詞： 虛擬現實技術; 校園漫游系統; 交互設計; 三維模型; 虛擬系統開發; 人機交互

中圖分類號： TN919.85?34 ? ? ? ? ? ? ? ? ? ? ?文獻標識碼： A ? ? ? ? ? ? ? ? ? ? ? ? 文章編號： 1004?373X（2019）15?0086?05

Applied research on interaction design based on VR virtual roaming technology

JI Zhe

（ Xiamen University of Technology， Xiamen 361024， China）

Abstract： The virtual reality （VR） technology can make people seem to be in the virtual environment built by the computer have a sense of being in it， and obtain all kinds of information by means of the help of human?computer interaction. The design objectives and functional structure of the system are analyzed in this study. The development of the corresponding virtual campus system is completed with VR technology on Web2.0. In this process， the VR technology is summarized， and then the feasible scheme of realizing the guidance system with the help of VR technology is proposed according to the design requirements of the campus guidance sign system. The overall framework， required technology and implementation strategy of the virtual campus system are given. The interaction and modeling methods of the system are discussed.

Keywords： virtual reality technology; campus roaming system; interaction design; 3D model; virtual system development; man?machine interaction

0 ?引 ?言

隨著科學技術的不斷發展，計算機、平板、手機等智能設備的日漸普及，網絡迅猛飛速的發展，傳統圖片與文字等相關交互模式已經很難滿足民眾的多元化需求，沉浸式或者多元化的交互模式無疑會成為今后重要的發展趨勢。虛擬現實（VR）技術也由此受到極大關注與發展。該技術就是將計算機、多媒體、仿真等技術進行融合，構筑一個仿真的虛擬三維環境，可以讓民眾產生一種身臨其境的真實感，對激發人們的創新思維與想象力有著頗為重要的作用。當前虛擬視景系統開始得到廣泛應用，其價值也日益凸顯，本文就對該系統所涉及的關鍵技術進行分析，其目的就是構筑一個融合易用、實用于一體化的虛擬視景系統平臺，該平臺的技術關鍵就是構筑近乎真實的虛擬環境。本文對該平臺進行開發，并對其中所涉及的關鍵技術進行重點討論。這種技術不僅能夠給用戶帶來更好的真實感，同時還能很好地滿足人們多元化的交互需求，可以讓人們沉浸于逼真的虛擬環境中，進而產生一種身處其中的感覺。

1 ?系統的設計目標和功能結構設計

1.1 ?虛擬校園漫游系統設計流程

虛擬校園漫游系統應該表現出虛擬環境中的地形、花草樹木、校內建筑等對象的三維模型，在形態、光照、質感等方面都十分逼真，使參考者能在構筑的栩栩如生的虛擬校園中漫游，并實現和系統之間的交互功能。在虛擬漫游系統的開發過程中，首先要對虛擬場景進行一個整體的規劃與設計，虛擬校園漫游系統設計的一般流程如下：

1） 實地考察，測量場景的外觀、結構數據，利用照相機、攝像機等工具拍攝真實的場景圖片，收集場景的設計圖紙等資料。

2） 利用圖像處理軟件對事先收集的圖片進行預處理，留作幾何建模后作為紋理貼圖。

3） 設計系統的總體結構。

4） 根據收集的數據及要建立的虛擬場景特點確定開發的技術路線及開發平臺。

5） 利用建模軟件建立場景環境及實體模型。

6） 利用仿真軟件把建好的模型整合在一起，然后通過仿真軟件或編程實現漫游控制，完成場景漫游系統的開發。

圖1為場景漫游系統設計的流程圖。

圖1 ?虛擬漫游系統設計的主要流程

1.2 ?虛擬校園漫游系統設計目標

在構筑虛擬校園系統時必須要創建相應的三維模型庫，這樣才能使得系統更具有真實性，并能為師生提供更為豐富的交互模式。虛擬校園漫游系統設計要求：

1） 交互窗體需要做到最大限度的簡單化，可以使得不同層次用戶都能在界面上對系統功能進行清晰了解，同時還能對系統展開操作，進而實現漫游。

2） 該系統需要結合校園實景完成虛擬環境構筑，可以真實展現出校園的景觀，使得人們產生身臨其境之感。

3） 為了促使該系統中的三維圖像更為逼真，就需要注重紋理的細節，使得相應紋理影射變得更為詳細。

4） 在構筑虛擬物體模型時需要使用更為真實的材質，并引入明暗效應。

5） 該系統可以支持多角度的對校園的景觀進行瀏覽，這樣才能使得漫游功能變得更為優秀。

6） 系統需要有良好的碰撞檢測功能，防范存在穿墻功能。

7） 系統要有良好的跨平臺與可擴展屬性。

1.3 ?虛擬校園漫游系統結構功能

由于場景之中的諸多對象是借助于空間相對關系完成相應的組織，所以還需要構筑相應的對象，并以此作為基準對對象位置進行明確。道路是虛擬校園系統中的關鍵對象，可以產生相應的基線功能，對應的建模流程為：

1） 構筑校園主干道模型，利用該道路將校園細分成諸多模塊，然后對每一塊的主要建筑景點加以明確。

2） 對相關區域內的關鍵建筑進行相應的三維建模。其中，樓梯建模可以細分成空心與實心建筑模型，前者僅僅完成框架的構筑，譬如教學樓與宿舍樓;后者的樓體則涵蓋了相應的內部細節，主要涉及的樓體包括圖書館與多媒體教學樓等。在樓體建模環節，首先要完成相應實心樓體模型設計，然后再對公共特征樓體進行設計，在這些樓體之中，要遴選那些具有代表性的樓體進行建模，而針對其他樓體則可以利用簡單性的變化即可。

3） 對不同區塊的相關景觀構成進行建模，譬如草地、路燈以及各種類型的景觀樹等。

4） 對諸多模型進行優化、整合，進而成功構筑一個總體的場景模型。

虛擬校園漫游子系統的具體框架如圖2所示。

圖2 ?虛擬校園系統架構圖

2 ?基于VR虛擬校園漫游設計與實現

2.1 ?數據采集

在采集數據時，必須要到現場進行測繪與分析，然后才能更好地對其進行相應的建模。其中，考察的內容包括校園的建筑分布、道路的走向、不同的建筑風格等，而且在考察之時需要選擇一個晴朗的天氣環境，要保證有著充足的光照度，然后拍攝相關關鍵性物體，比如樓體、道路等。此外，還需要采集一些小型紋理性圖片，譬如門窗、磚紋、草地等，然后將其用作貼圖，使得相關建模對象更具有真實感。

2.2 ?系統建模

1） 天空和地面等背景模型的建模

為了讓虛擬環境更具有真實性，需要為其添置真實的藍天、綠地等，這樣就能夠使得這個虛擬環境立足于真實的場景。在VR技術中，VRML提供一個背景節點對象，也就是所謂的Background，這樣就能夠通過它完成相關參數的設置，進而完成虛擬校園系統的背景建模。

圖3 ?大地與天空的背景

通常大地需要配置為淺綠色，其原因主要有以下幾點：在真實環境之中，顏色具有非確定性;若是將大地顏色配置成土地的顏色，那么道路的顏色就難以確定;由于構筑的是虛擬環境，所以可以借鑒某些必要的想象內容，而綠地對于民眾而言是一種美好的想象之一，而且它本身與路面也頗為相近，十分契合人們對校園的感觀。

2） 樹、路燈等輔助性模型的建模

在本次系統開發過程中選用的工具為VRML，結合該語言的獨特優勢，進一步提出相應的遞歸分形算法，具體思路為：將strArr[[n]]與某棵樹信息進行對應，而strArr[[n-1]]對應的則是樹枝，后者通過方式[T]（）進行組合便能構成前者，而這些樹枝則是進一步由更為簡單的樹枝所構成，亦即strArr[[n]-2]，而對應的構成方式亦為[T]（），于是就形成了相應的遞歸，使得由最為簡單的樹枝strArr[0]、枝干與樹葉完成整棵樹的建模。在該VRML語言之中可以將這些細節進行很好的展現，具體的遞歸算法可以表示為：

算法的主要步驟為：

① 借助于Indexed Face Set節點能夠完成形態各異、顏色不同樹葉的集合構造，這樣就能夠借助于該基礎性的元素進行不斷的遞歸算法，完成相應枝干集合的構造。

② 在樹葉集合之中可以結合所需節點加以復制與重用，針對所需的枝干節點也可以在相應的集合中進行遴選，最后再借助于translation與rotate域將枝干與樹葉進行旋轉與平移操作，由此便能構成一個更為簡單的樹枝。

③ 將樹枝節點用作分形元，并對其進行復制，然后使用上述兩域與scale域對這些節點進行旋轉、縮放與平移等操作，也就是過[T]（）處理使得這些樹枝轉變成更為復雜的樹枝節點。

④ 對上述三個步驟進行重復，便能構成更為復雜的分形樹。譬如將第一個葉狀分支進行縮小，然后對其進行旋轉平移處理，便能得到三個副本，隨后再為其配制樹狀分枝，于是就變成了圖4b），接著再利用復制、旋轉等處理，便能得到圖4c）。

圖4 ?分形技術下的樹模型構筑過程演示圖

3） 樓群等建筑物的建模

在具體校園中樓群無疑是極為重要的建筑主體對象，而且整體數量也頗多，想要高效真實地完成該主體的建模工作，就需要根據具體情形進行建模。在此過程中可以使用VRML中所涉及的幾何與外觀節點來實現。通過這兩個節點完成樓群三維模型構筑，接著利用相應的紋理圖像等技術使之得到貼圖，具體流程為：

① 按照校園地形分布情況，借助于Canoma這款三維軟件完成相關的建筑模型圖片遴選，為后續的分塊拼合提供基礎。

② 因為建筑模型存在差異性紋理，為此需要對該模型諸多分塊的相關面進行選擇，然后對關鍵點與控制點進行選擇，并將模型相關面加以渲染，于是便能使得模型更加契合真實環境。

③ 為了使得系統在較多模型之下不會對系統實時性能帶來影響，因此需要將相關建筑模型作為一個整體進行單獨輸出，亦即是Export，而[*.WRL]則是其導出格式。

2.3 ?碰撞檢測

在VR技術中，需要使用者能夠按照十分真實的方式與虛擬環境中諸多模型進行交互，也就是說，這些對象需要有真實環境的物理屬性。為此在VR技術中提供物體之間的碰撞檢測功能，其中包括“動?靜”物與“動?動”物之間的碰撞檢測。以視線為基礎的向前線段探測無疑是較為常用的檢測之法，具體過程包括：

1） 明確視點[V]，在具體虛擬環境中即為使用者的頭部區域;

2） 基于視線沿著運動向的距離用[d]表示，選擇其中的一個點用[M]表示;

3） 將[V]與[M]進行對接，形成線段;

4） 計算和[VM]有著相交關系的對象，若沒有，則當前沒有碰撞;若存在多個相交對象，則選擇與[V]最近的交點即[C]作為碰撞監測點，此時[VC]即為碰撞距離。

在此碰撞算法中，不同實體模型的構成為多邊形，相應線段與物體之間存在著求交運算，此時需要從兩點進行考量：線段和長方體之間的對接;線段和多邊形之間的對接。然而，若視點與對象距離遠超過線段長度，那么只需要判斷它們難以相交即可，無需計算出交點。所以，該虛擬系統只需要計算出視點與物體包圍范圍之內是否有相交即可。

2.4 ?虛擬場景交互

本文系統的最大優勢就是交互具有良好的實時性，該VRML語言有著極強的交互性能，可以分成兩類：第一，交互節點構成視場、感應器與插值節點等;第二，編程節點可以借助于程序設計來形成。在前者交互環節，系統形成的事件被交互節點所捕獲，然后加以處理。隨后借助于Route/To傳遞至場景，使得后者形成改變。若是交互操作復雜還能借助于Java來完成，這樣該VRML交互功能就能得到更大的拓展。此外，虛擬校園系統中的交互與動畫都是事件在經過相應階段之后構成，具體流程如圖5所示。

圖5 ?以交互事件路徑為基礎的流程

2.5 ?系統優化

對于三維場景而言，實際上就是將瀏覽器用作默認視點，進而對相關場景描述文件進行解釋，若是鼠標或者相關箭頭被觸發，或者是在場景中進行走動，那么視點就會動態改變。由于復雜場景渲染所需資源極大，為了確保實時性，對系統進行優化就十分重要。

1） 對可視距離進行明確。此時每次渲染只需要對該距離之內場景進行渲染，因為人們在虛擬環境中也只能看到局部，很難對整個場景進行瀏覽。

2） 利用層次細節模型亦即LOD進行優化。這種方式對遠處不重要對象采用較少多邊形進行建模，而近處則使用更多的多邊形進行建模，這樣也能夠通過動態調整節約系統資源。

3） 將一個復雜的三維場景進行切分使之形成較小的場景，然后再進行分階段下載與裝入，這樣就能明顯提升執行效率。

3 ?系統發布

為了使得該系統有著更高的體驗度與真實感，將VRML開發的相關模型置入相應的網頁之中。這樣就能夠與HTML，JavaScript進行融合，通過網頁使用該三維虛擬漫游系統。圖6中給出相應的全景圖，同時，圖6b）還給出了相應的計算機學院內部細節圖。

圖6 ?系統效果圖

4 ?結 ?論

將CAD與3D Max等軟件系統進行融合，可以更好地構筑真實的三維模型，然后借助于VRML代碼使得這些模型對象與人們在VR系統中進行交互。VR與網絡技術的融合，可以構筑一個更為方便使用的融合影像、聲音等諸多多媒體元素為一體的3D虛擬環境，它不僅對立體模型進行復制，同時還能在其中進行漫游，產生身臨其境之感。

參考文獻

[1] 李麗，謝丁龍.基于VR的建筑與城市虛擬實驗平臺設計研究[J].電化教育研究，2012（6）：79?82.

LI Li， XIE Dinglong. Design and research of virtual experimental platform for architecture and city based on VR [J]. Research on audio?visual education， 2012（6）： 79?82.

[2] HUANG Y C， BACKMAN K F， BACKMAN S J， et al. Explo?ring the implications of virtual reality technology in tourism marketing： an integrated research framework [J]. International journal of tourism research， 2016， 18（2）： 116?128.

[3] BUHALIS D， LAW R. Progress in information technology and tourism management： 20 years on and 10 years after the Internet—the state of e?tourism research [J]. Tourism management， 2008， 29（4）： 609?623.

[4] SCHUEMIE M J， VAN DER STRAATEN P， KRIJN M， et al. Research on presence in virtual reality： a survey [J]. Cyberpsychology & behavior， 2001， 4（2）： 183?201.

[5] 呂屏，楊鵬飛，李旭.基于VR技術的虛擬博物館交互設計[J].包裝工程，2017（24）：137?141.

LU Ping， YANG Pengfei， LI Xu. Virtual museum interactive design based on VR technology [J]. ?Packaging engineering， 2017（24）： 137?141.

[6] MCCABE S， SHARPLES M， FOSTER C. Stakeholder engagement in the design of scenarios of technology?enhanced tourism services [J]. Tourism management perspectives， 2012（4）： 36?44.

[7] YOVCHEVA Z， BUHALIS D， GATZIDIS C. Smartphone augmented reality applications for tourism [J]. E?review of tourism research （ERTR）， 2012， 10（2）： 63?66.

[8] 陳立偉，羅云，李曉燕，等.基于VEGA的旅游景點漫游系統設計[J].計算機工程與設計，2005，26（3）：617?618.

CHEN Liwei， LUO Yun， LI Xiaoyan， et al. Design of tourist attractions roaming system based on VEGA [J]. Computer engineering and design， 2005， 26（3）： 617?618.

[9] BERG L P， VANCE J M. Industry use of virtual reality in pro?duct design and manufacturing： a survey [J]. Virtual reality， 2017， 21（1）： 1?17.

[10] SHERMAN W R， CRAIG A B. Understanding virtual reality： interface， application and design [M]. [[S. l.]：] Morgan Kaufmann， 2018.

[11] THIRUVENGADA H， DERBY P， FOSLIEN W， et al. The influence of virtual world interactions toward driving real world behaviors[C]// International conference on virtual and mixed reality?systems and applications. Orlando： Lecture notes in computer science， 2011： 100?109.

[12] YANG X Y， ZHAN Q C， WANG W W. Research and application for virtual exhibition room of product design based on multimedia network technology [C]// IEEE International Conference on Computer?aided Industrial Design & Conceptual Design. Wenzhou： IEEE， 2010： 111?116.

[13] LI X， CHEN D， WANG L， et al. Research and development of distributed VR driving system based on virtools [C]// Proceedings of the 10th International Conference on CSCW in Design， CSCWD 2006. Southeast University， Nanjing， China： IEEE， 2006： 15?18.

[14] MARTINEZ D， LAWSON J Y L， MOLINA J P， et al. A framework to develop VR interaction techniques based on OpenInterface and AFreeCA [C]// IFIP TC 13 International Confe?rence on Human?computer Interaction. Lisbon： Springer?Verlag， 2011： 101?104.

[15] RADEMACHER M H， SCHNEIDER M， DABS C. Design and evaluation of a VR?user?interface based on a common tablet?PC [C]// Proceedings of the 26th Annual BCS Interaction Specialist Group Conference on People and Computers. Birmingham： BCS Learning & Development Ltd.， 2012： 369?373.

[16] 張小萍，薛駿蜂，王君澤，等.基于VR的建筑物仿真與交互技術[J].測繪科學，2011，36（5）：162?165.

ZHANG Xiaoping， XUE Junfeng， WANG Junze， et al. Buil?ding simulation and interaction technology based on VR [J]. Surveying and mapping science， 2011， 36（5）： 162?165.