VR全景圖配置平臺及其在辦事大廳中的應用

陸志林

（上海萬達信息系統有限公司，上海 200231）

0 引 言

隨著經濟的發展和人們生活節奏的加快，人們越來越期待方便快捷的生活方式，促使線上購物、訂餐以及辦事逐漸成為社會生活的主流方式。商家通過文字、圖片、聲音以及視屏等方式宣傳自己的產品和服務，給顧客更好的體驗和代入感。為了達到更好的宣傳效果，虛擬現實（Virtual Reality，VR）技術應運而生[1,2]。

VR技術通過計算機模擬實際場景，實現線上人機與現實的交互，達到身臨其境的效果。目前，它的高級方案是3D建模，但是對設計人員的專業水平要求較高、耗時較長以及虛實同步難以實現[3]。于是，它衍生出了VR全景圖，通過拍攝全景圖來替代建模，廣泛應用于辦事大廳和展館等領域[4]。政府部門長期致力于提高線下辦事大廳的辨識度、辦事的便捷度以及服務的滿意度等工作，而線上展示、宣傳以及互動相對薄弱。VR全景圖技術可以彌補該方面的不足[5]。

1 平臺設計和創新

1.1 VR全景圖配置平臺架構

VR全景圖配置平臺采用“1+2”的整體架構，1代表1個素材庫，2代表配置平臺和互動平臺。平臺架構如圖1所示。

圖1 平臺架構

素材庫為場所管理者在線的資料存儲空間，用于存儲全景圖片、普通圖片、視頻以及音頻等，便于在VR場景設計時靈活取材。配置平臺完成全局沙盤、場景組合、封面、背景音樂配置、單個場景視角設置、巡航設置、視頻嵌入配置、圖片嵌入配置、文字嵌入配置、超鏈接、圖片、文本、便攜式文檔格式（Portable Document Format，PDF）、視頻、音頻、電話以及導航等熱點配置。互動平臺包括移動端和個人計算機（Personal Computer，PC）端場景展示，支持觸摸和陀螺儀，支持分享、點贊、留言，支持與外部系統互動。

1.2 VR全景圖場景設計過程

辦事大廳的VR全景圖設計一般經歷5個階段，分別為場景編排、全景圖拍攝、全景圖參數設置、全景圖交互設置以及多端展示。設計過程如圖2所示。

圖2 設計過程

場景編排需在辦事大廳中確定VR全景圖的入口和出口、拍攝位置、拍攝全景圖數量以及設計交互點數量。根據場景編排，在確定的位置拍攝全景圖。拍攝時需注意光線和方向，避免場所流動人員過多帶來干擾。使用配置平臺上傳全景圖素材，再將素材中的全景圖串聯起來形成完整的場景演繹，然后配置VR場景中的熱點，和外接系統打通關聯。VR全景圖是現實環境的虛擬，也是線上辦事和互動的入口。在移動端和PC端通過觸摸或者陀螺儀展示。前4個環節是不斷迭代和不斷調整的過程，越接近現實，模擬效果越好。

1.3 平臺技術難點及方案創新

1.3.1 全景圖拍攝及三腳架背景擦除

全景圖的概念來源于英文單詞Panorama，是愛爾蘭畫家羅伯特·巴克為了描述他創作的愛丁堡全景畫提出的。我國的《清明上河圖》是經典的全景圖畫作之一。在數字化時代，全景圖是虛擬現實的有效手段。全景相機拍攝水平和垂直360°的圖片拼接，形成模擬人眼視覺720°范圍的3D景象，通過特定的播放工具查看時讓人身臨其境。

傳統的全景圖拼接方法對攝影人員的專業要求較高，通常需使用PTGui、AutoPano Giga等工具。本文研究的辦事大廳場景對場景圖片品質要求不高，使用全景相機一步拍攝成型。例如，采用GoPro MAX 360°全景運動相機，通過前后魚眼鏡頭和內置的圖形處理軟件直接合成720°（水平360°，垂直360°）全景圖。

GoPro MAX可以通過智能手機App遠程控制拍攝，避免拍攝人員自身的干擾，但機載軟件無法智能擦除三腳架底座。為降低操作門檻，無須專業的美工修圖。本研究的VR全景圖配置平臺可以通過貼圖覆蓋的方式修補。

1.3.2 全景圖播放及視角調整

720°全景圖本質是一張球形圖，平鋪后會產生圖形扭曲，而普通的Web播放方式無法體驗虛擬效果。本文基于three.js框架實現全景圖播放，將全景圖翻轉（圖片正面向內、背面向外）后貼到球體上，并將透視相機放置到球體內中心稍偏位置（讓導軌控制器形成圍繞球心旋轉的距離）來模擬人眼的視覺效果，通過導軌控制器控制相機旋轉。該過程與用戶站在線下辦事大廳中的某一處向四周張望的效果相似。

當上述效果在移動或者PC屏幕上展示時，還需考慮全景圖播放的起始位置、透視相機的遠小近大的視場角以及水平和垂直觀看限位等參數。基于three.js球體模型的全景圖播放，可以通過球體轉動或者相機轉動來設定起始位置。透視相機可以通過更改視場角參數獲得較好的透視效果。水平和垂直限位可以通過導軌控制器的參數設定。合適的參數設定有助于全景圖更加接近真實的效果。

1.3.3 觸屏以及陀螺儀過渡

為了讓用戶體驗到“身臨其境”的效果，PC端觀看時支持鼠標的左右上下移動。移動端觀看時支持觸屏左右上下移動和陀螺儀的設備方向同步。使用鼠標移動和觸屏移動，均是通過導軌控制器改變相機的位置，而相機的朝向不變（世界坐標中心）。實際上相機的軌跡是球坐標系運動。

在移動端觸摸改變相機軌跡后，交由設備方向控制器即陀螺儀控制，此時需傳輸相機的位姿信息，消除設備位姿和相機位姿之間的誤差，實現軌道控制器和設備方向控制器前后接管相機時平滑過渡。但是，該方式存在矛盾，如設備方向向下即看地，而觸摸移動可以看天。通常可采取2種優化方案。一種是增加使用陀螺儀的控制按鈕。如果使用陀螺儀，則相機切換到陀螺儀設備的位姿。該方案的缺點是全景圖有大的跳動，如從看天突然跳躍到看地。另一種是軌道控制器和設備方向控制器不同時控制相機，而是軌道控制器控制相機，設備方向控制器控制場景，實現虛擬場景觀感的平滑過渡，但與實際陀螺儀方向不符時會出現位姿混亂問題，需適時調整水平或垂直方向參數來糾偏。

1.3.4 視屏嵌入及調整

辦事大廳墻面上會掛著播放展示宣傳和統計分析視頻的液晶屏幕。建立虛擬場景，要求全景圖配置平臺具備視頻嵌入能力。全景圖是球形圖，液晶屏是矩形平面，需解決如何將矩形平面放入球體而不露出“角”。確定矩形平面幾何中心點的坐標，該中心點的運動形成1個小球形坐標系，矩形平面中心點在小球形坐標系的球面上，不在全景圖上露出“角”。

矩形平面中心點初始化坐標采用正對屏幕的坐標如(0，0，-z)，其中-z代表具體的數值。

矩形平面的移動即矩形中心點的球面移動，通過改變中心點相對于原點的θ和?角（類似于經緯度）實現，坐標系的轉化如圖3所示。

圖3 坐標轉換

1.3.5 互動熱點設置

在VR全景圖中，為模擬實際場景，除嵌入視頻外還有點擊互動。點擊查看某一業務的說明，可以是文字、圖片、視頻以及音頻等。在全景圖上疊加動畫效果的位圖，吸引用戶點擊，該互動點稱為“熱點”。常用的熱點包括超鏈接、圖片、文本、PDF、視頻、音頻、電話以及導航等，此處要能夠方便觸發打開熱點內容，使用DIV層的技術實現彈出窗口，使得平臺的配置化設置更加靈活。

2 案例介紹

使用本平臺為上海市虹口區、普陀區以及金山區的辦事大廳和展覽館等配置開發了VR全景圖，得到了用戶較好的評價，并取得了較好的經濟效益。案例截圖如圖4所示。

圖4 案例截圖

3 結 論

通過不斷的技術探索和創新，VR全景圖配置平臺日趨完善，降低了VR技術在生活實踐中的開發門檻，簡單的外設結合強大的配置能力，使得線下場景躍然于屏幕，并通過靈活的互動配置，使得線下場景更加接近現實。