基于深度映射技術的WebVR 步進式全景漫游的實現

盧添進

摘要：傳統全景漫游是在單個視點內進行縮放和旋轉的操作，立體感不強，且在視點間轉換時由于缺少中間過渡的圖像信息，會出現視覺的跳躍。步進式全景漫游則是引入了全景場景的深度信息，并將二維的全景圖像還原成3D模型，從而呈現出一種全新的立體場景。文章以某高校校史館漫游項目為背景，研究了Blender逆向建模和Krpano深度映射技術在新式全景漫游中的應用，實現了全景圖像真三維數據構建行走前進平滑過渡效果的步進式全景漫游。同時，結合實際教學需求，運用交互技術深挖教學資源的展現與教學評價互動，在為漫游者提供了一個更平滑的場景切換觀感的沉浸式體驗的同時也能達成提升教學質量的目的。

關鍵詞：深度映射；實景逆向建模；3D模型；WebVR; 步進式全景漫游

中圖分類號：TP393 文獻標識碼：A

文章編號：1009-3044（2024）14-0110-04 開放科學（資源服務）標識碼（OSID） ：

0 引言

校史館作為學校歷史與文化的載體，不僅記載著學校發展過程中教學育人、科學研究、社會服務等的歷程和成果，也代表著學校的價值觀和精神風貌。校史館的建設對于提高校園文化品質和增強學校凝聚力具有重要作用。然而，傳統的校史館受時間與空間上的限制，學生很難在有限的時間里詳細觀摩和消化參觀的內容。

隨著信息技術的發展，特別是互聯網技術和基于圖形圖像算法的全景漫游技術的融合發展，為思想政治教育提供了一種線上線下相結合的教學新模式，也為新生入學思想政治教學的順利開展提供了解決方案。依托信息技術和圖形圖像技術的發展，將基于深度信息的全景圖像融合進三維模型，結合三維模型和全景VR漫游更強互動性和更具沉浸感體驗的特點，可以打破時間與空間的限制為參觀者提供更加便捷、真實、生動的體驗。

1 項目概述

高校校史館步進式全景漫游是基全景圖像深度信息的Blender建模和Krpano深度映射技術而構建的一個基于真三維數據的高質量全景漫游系統。以實景三維建模提升空間感與真實感，以步進式空間漫游提升沉浸感和舒適感，以圖像、音視頻等信息化互動提升活躍度與視覺沖擊是項目的優勢所在。項目占地面積1 400平方米，分為6個篇章（展區）。根據項目建設流程可分為數據采集、模型構建和漫游實現三個主要階段：

1） 數據采集：根據實際布局，項目篩選合適的全景拍攝點進行數據采集，包括照片、視頻和深度信息等。

2） 模型構建：根據采集的數據，使用建模軟件，依據全景圖像逆向構建校史館的3D模型，并利用深度映射技術進行深度信息的處理和映射。

3） 漫游實現：將3D模型和全景照片通過全景漫游開發軟件進行綁定。設計開發各種熱點，如：圖片熱點、嵌入視頻熱點、音頻熱點等，實現行走前進平滑過渡效果的步進式全景漫游。

2 需求分析

2.1 目標需求

項目資源應用于學校的入學教育與軍訓課程，根據人才培養方案和教學標準，要求實現如下目標：

1） 引導學生對校本文化初步認識，提升教與學的效率。

2） 豐富入學思想政治教育教學資源，提高入學教育的質量。

3） 解決實際參觀學習中學生只能走馬觀花式地簡單瀏覽，無法深入學習感悟的問題。

4） 將校史館模型化、數字化，為后期線上校史館的優化和資源豐富提供擴展接口。

2.2 技術需求

目前虛擬全景漫游，大部分還是點位跳轉方式，容易迷失方向，用戶體驗感比較差[1]。項目要求在實現傳統全景漫游功能效果的同時，進一步提高技術門檻，整合各類資源，打通技術壁壘，充分研究全景圖逆向建模技術和深度映射技術，采用步進式全景漫游的方式實現項目開發。

1） 建模技術：以實景全景圖構建校史館3D模型，這個模型需要高度精確，以便于展示校史館的每一個展區的細節。由于這個模型是基于深度信息建立的，所以它能夠將場景的深度信息也展現出來，讓用戶有一種身臨其境的感覺。

2） 深度信息的全景漫游技術：以深度信息為基礎，融合全景圖像與3D模型，使全景圖像在3D模型上實現全方位、多角度瀏覽場景的效果。可以通過使用Krpano、Pano2VR等軟件來實現，同時還需要優化漫游的性能和效果，包括提高漫游的渲染速度、降低內存消耗、提高漫游的交互性和用戶體驗等。

3） 呈現與交互設計技術：將全景漫游嵌入HTML5網頁中，給用戶提供PC端、移動端等在線瀏覽體驗。

3 技術分析

全新Blender建模技術和Krpano深度映射技術在項目中發揮了重要作用。Blender建模技術可以快速、準確地構建出校史館的3D模型，而Krpano深度映射技術則可以將深度信息與全景照片精確地映射到模型中，從而實現更加真實的全景漫游效果。

3.1 Blender 建模技術

Blender全景建模技術是一種創新的三維建模方法，它通過將一系列實景二維圖像轉換為三維模型，實現了快速和準確的3D建模。在項目建設中，通過使用Blender建模技術，能夠以高效的方式構建出校史館的復雜3D模型。這種技術的應用使開發者能夠更好地還原建筑的結構和展區的細節，為參觀者提供一個更加真實、立體的視覺體驗。

使用Blender全景建模技術，需要掌握以下幾個關鍵步驟：

1） 采集圖像：使用高品質的全景相機或專業相機拍攝建筑物或其他場景的多角度照片，以便用于建模。

2） 拼接圖像：將采集的多張照片拼接成一個完整的球形或立方體圖像。這一步需要使用專門的拼接軟件，如PTGui等來實現。

3） 建立深度模型：使用建模軟件，如Blender、3Dmax等軟件，根據拼接好的圖像逆向構建3D模型。且通過計算機視覺算法計算圖像中物體的景深等，建立場景的深度模型，這個過程需要花費一定的時間和精力，因為需要根據照片中的細節和紋理進行模型細分、紋理映射等操作。

4） 優化輸出模型深度信息：完成 3D模型的構建的同時還需要對模型深度信息進行優化輸出，以提高渲染速度、降低內存消耗和保證深度信息的準確性等。

3.2 Krpano 深度映射技術

Krpano深度映射Depthmap技術通過將深度信息與全景照片精確地映射到模型中，為瀏覽者提供了一種真實的全景漫游效果[3]。在全景漫游項目中，這種技術使可以將校史館的各個展區的細節呈現得更為真實和準確。參觀者在使用全景漫游功能時，會有一種身臨其境的感覺，仿佛是真的在現場參觀一樣。這種真實感的增加在還原項目實景的同時，更提高了用戶的使用體驗。

這種技術需要掌握以下幾個關鍵點：

1） 獲取深度信息：首先需要獲取圖像的深度信息，這可以通過使用深度相機或通過計算圖像中物體的景深來實現。

2） 映射深度信息：將獲取的深度信息映射到3D 模型上，這可以通過使用Krpano等軟件來實現。

3） 創建全景漫游：使用Krpano等軟件，將映射好深度信息的全景圖像導入，并添加控制全景漫游的代碼，這可以通過使用HTML5語言、XML可擴展標記語言和JavaScript等編程語言來實現。

4） 優化漫游：完成全景漫游的創建后，需要優化漫游的性能和效果，這包括優化漫游的渲染速度、降低內存消耗、提高漫游的交互性和用戶體驗等。

3.3 呈現交互技術

基于HTML5的和JS的交互呈現技術是通過使用Krpano Viewer 提供的swfkrpano.js 腳本和它提供的API來實現的。同時，也需要編寫一些JavaScript腳本來實現一些特殊功能，例如添加熱點、切換視角、控制光源等。另外，為了更好地展示全景漫游，可以添加一些文字、圖片、音頻等多媒體元素，以便于為用戶提供更加豐富的視覺和聽覺體驗。

4 功能實現

項目中所使用的圖像數據采集、三維建模以及WebVR 呈現技術等，可以高質量地還原全景漫游。漫游者在行走前進的過程中可以獲得平滑的過渡效果，結合JS交互技術的深度開發，將3D模型以及動畫、圖片熱點、嵌入視頻熱點、網頁媒體資源、平面視頻熱點、解說音頻熱點等內容融合呈現在瀏覽者眼前，實現更加真實、立體且具有交互性的效果。

4.1 圖像信息采集

實景逆向建模技術是一種新的建模技術，它以全景圖像為基礎，通過“投影”的方式，逆向構建3D模型。為了3D模型的精確性，在建模前需要通過專業的圖像采集設備和合成軟件，采集與合成各場景的全景圖像[2]。項目共有19 個場景，為了呈現出最佳效果，項目選用佳能EOS R5微單相機，采用魚眼鏡頭，按照8+2拍攝方法（每45度角采集一個圖像，天、地各采集1個圖像）采集原始圖像。為了讓最終呈現的圖像達到最佳對比度與明暗度，項目還采用HDR（HighDynamic Range） 圖像優化技術，對每個采集點的每個角度都拍攝5張曝光值不同的照片，再通過軟件Pho?tomatix 將他們合成為一張高動態范圍的照片，用Lightroom優化色彩，以保證各角度的圖像都處在最佳顯示效果。

完成各角度圖像采集后，再根據采集的圖像信息，通過PTGui軟件拼接與微調，最終合成各個場景的全景圖像，并通過Photoshop軟件批量調整色階與明亮度等，完成全景圖像的批處理。

4.2 實景逆向建模

實景逆向建模是指根據實景全景圖的圖像參數，如攝像機高度等信息，通過三維建模軟件everpano或者Blender進行逆向建模[4]。項目選用的是blender建模軟件，通過Blender軟件將每個場景全景圖逐個導入，根據投影信息，結合PanoCamAdder+1.7插件進行的場景導入和參數設置，通過擠壓拉伸模型等的方式進行逆向建模操作。在場景全景圖像導入時一定要注意正確地填寫攝像機高度（即采集圖像時相機的高度），以保證全景圖像能正確地投影到模型上面。

4.3 深度映射/深度圖技術還原3D 效果，實現平滑過渡

深度圖通常是指像素顏色（通常是灰度）定義到某個曲面的距離（或“深度”） 的圖像。

例如，球面全景圖像加上相關球面深度圖圖像- 深度圖中的灰色調越深，距離曲面越遠。

通過深度圖的輔助，就可以將深度圖信息附加到原圖上，還原出所需要的立體層次，即裸眼3D效果。

項目中每個場景通過krpano Depthmap深度映射/ 深度圖技術，實現了場景間行走平滑過渡效果。關鍵實現代碼如下：

<！--深度映射/深度圖-->

根據深度信息，應用JS初始場景代碼如下：

<！[CDATA[krpano.jynav =[

[["001"，"scene_001"]，["002"，"003"，]，[0.000，15.000，0.000]]，

[["002"， "scene_002"]， ["001"， "003"，]， [-486.153，15.006，-43.124]]，

[["003"， "scene_003"]， ["001"， "002"， "019"，]，[-1103.691，15.006，356.440]]，…];]]>

4.4 添加與控制熱點，實現場景交互

傳統的VR全景漫游是在Krpano中通過修改Xml 文件和通過JS操作兩種方式來添加熱點，但是步進式漫游是基于一個“ 完整模型”進行開發，即項目中所有的熱點都是在大場景中默認顯示。因此，為了達到更好地展現效果，必須將全部熱點在tour.xml主文件中進行隱藏，然后再針對不同的場景單獨顯示對應的熱點。另外，針對項目熱點數量較多的問題，項目還對熱點進行了分類，并通過新生成了.xml文件分類儲存圖片熱點。關鍵代碼實現如下：

<！--隱藏所有熱點-->

set（hotspot[hots1].visible，false）;

set（hotspot[hots2].visible，false）;

set（hotspot[hots3].visible，false）;…

<！--在對應的場景顯示熱點-->

if（xml.scene == scene_001，

set（hotspot[hots1].visible，true）;

set（hotspot[vrtooltip_hots1].visible，true）;）;

if（xml.scene == scene_002，

set（hotspot[hots2].visible，true）;

set（hotspot[hots3].visible，true）;

set（hotspot[hots4].visible，true）;

set（hotspot[hots5].visible，true）;）;

if（xml.scene == scene_003，

set（hotspot[hots6].visible，true）;）;…

漫游作品資源還兼顧著提升思想政治教學質量的目標，為達成教學目標，漫游作品資源須運用交互技術深入挖掘課程教學資源，如在植入普通圖片、視頻熱點的后，增加網頁媒體資源和考核模塊等交互功能等。網頁媒體資源可以為學生提供更加豐富多樣的學習資源，包括各種在線課程、學習資料、教學視頻等。通過將這些資源整合到漫游作品中，學生可以在輕松的氛圍中探索和學習，提高學習效果。考核模塊的加入可以為學生提供自我評估和反饋的機會。在漫游作品中，學生可以隨時進行自我測試和評估，了解自己的學習進度和能力水平。同時，教師也可以通過考核模塊對學生的學習情況進行跟蹤和評估，以便更好地指導學生的學習。交互功能的增加可以增強學生與教師之間的互動和交流。通過在漫游作品中植入討論區、問答環節等交互功能，學生可以隨時向教師提問或與其他學生進行交流，提高學習的參與度和積極性。

關鍵代碼實現如下：

onloaded= "delayedcall（0， add_iframe（'html/zzw.html'， 1280， 680））;"/>

onclick="delayedcall（set（visible，false））">

var iframe = document.createElement（"iframe"）;

iframe. style. position = "absolute"; iframe. style.left = 0;

iframe.style.top = 0; iframe.style.width = "100%";

iframe. style. height = "100%"; iframe. style. bor?der = 0;

iframe.src = args[1];

iframe.setAttribute（'id'，resolve（caller.name））;

caller.registercontentsize（args[2]， args[3]）;

caller.sprite.appendChild（iframe）;

caller. sprite. style. webkitOverflowScrolling ="touch";

caller.sprite.style.overflowY = "auto";

caller.sprite.style.overflowX = "auto";

<！[CDATA[

var lastIframe = document.getElementById（'iframe?layer'）;

lastIframe.parentNode.removeChild（lastIframe）;]]>

4.5 WebVR 展示的實現

XML和HTML是為不同的目的而設計，XML的出現彌補了HTML的一些不足，如XML設計的核心是包含和傳輸數據，而HTML設計的核心是顯示數據[5]。

應用HTML5代碼實現VR展示開發是基于VR技術的一種新型展示方式，可以將設計師的3D模型以及動畫等內容完美呈現在用戶眼前，實現更加真實、立體化的效果。HTML5代碼VR展示開發的核心工具是WebVR，它可以讓開發者通過JavaScript代碼實現對VR設備的控制，從而讓用戶可以沉浸在更加真實的虛擬現實世界中[6]。

項目使用krpano1.21生成WebVR.Xml源碼，通過webvr.js實現對VR設備的控制，部分代碼實現如下：

url="webvr.js"

mobilevr_support="true"

mobilevr_touch_support="true"

mobilevr_fake_support="true"

mobilevr_profile.normal="90|60|42|0|0|0"

mobilevr_profile.mobile="80|60|42|35|0.441|0.156"

mobilevr_wakelock="true"

fullscreen_mirroring= "false" mouse_pointerlock="true"

vr_cursor_onover= "if（handcursor， tween（hotspot[vr_cursor]. scale， 0.4， 0.1）; vr_auto_click（get（vr_time?out））;）;"

vr_cursor_onout= "tween（hotspot[vr_cursor]. scale，0.3，0.1）;"

onavailable="webvr_onavailable（）;" onunavailable=""

onunknowndevice="webvr_onunknowndevice（）;"

onvrcontrollers="webvr_onvrcontrollers（）;"

onentervr="webvr_onentervr（）;"

onexitvr="webvr_onexitvr（）;"

ondenied="webvr_ondenied（）;"/>

5 結論與展望

文章全面剖析了校史館步進式全景漫游項目設計開發的過程，研究實景逆向建模技術和Krpano1.21 版提供的深度映射Depthmap技術的真實應用場景、WebVR展示的實現等，并用校史館步進式漫游的案例進行了驗證。同時結合實際教學需求，以入學思想政治教學為切入點，運用交互技術深挖教學資源的展現與教學評價互動的實現。實驗結果表明，這些技術在有效地提高全景漫游的質量和體驗的同時，還可以激發學生的學習興趣，增強學生對學校的認同感，達成新生入學思想政治教學的目標，提升教與學的效率。未來，項目團隊將進一步優化和完善全景漫游系統，為瀏覽者提供更加便捷、豐富的學習資源，助力思想政治教育的高質量發展。

參考文獻：

[1] 賈亞娟，盧春光.基于圖像的虛擬現實全景漫游技術[J].科學技術創新，2022（10）：85-88.

[2] 陳潤靜，鄧健，何原榮，等.基于全景技術的測繪虛擬實驗室展示與實現[J].科教導刊，2021（11）：178-180.

[3] 曹俊江，昔克，李劍.基于Krpano的VR場景展示系統設計與實現[J].電子設計工程，2021，29（1）：83-86，91.

[4] 蔡新蕊.基于深度信息的Web VR立體全景漫游系統研究與實現[D]. 北京：北京郵電大學， 2021.

[5] 周春吟.HTML5與CSS 3在Web前端開發中的應用研究[J].信息與電腦（理論版），2021，33（21）：32-34.

[6] 古天馳，蘇龍生，劉子昂，等.基于WebVR的產品展示技術與實現[J].信息與電腦（理論版），2021，33（22）：10-13.

【通聯編輯：王 力】

基金項目：本文系全國高等院校計算機基礎教育研究會計算機基礎教育教學研究項目“新工科背景下基于WebVR 技術的項目資源模型設計與研究”（課題立項號：2020-AFCEC-214） 的研究成果；河源職業技術學院校級科技計劃課題“基于深度映射技術的校史館步進式全景漫游系統開發”（課題立項號：Hzykj202403）