基于Krpano的現(xiàn)代農(nóng)業(yè)園區(qū)VR全景漫游系統(tǒng)的設(shè)計與實現(xiàn)

柯佳宏李勇

(1.四川省地質(zhì)礦產(chǎn)勘查開發(fā)局區(qū)域地質(zhì)調(diào)查隊，四川 成都 610213；2.四川省計算機(jī)研究院，四川 成都 610041)

引言

2022年初，國務(wù)院印發(fā)《“十四五”推進(jìn)農(nóng)業(yè)農(nóng)村現(xiàn)代化規(guī)劃》，提出推進(jìn)鄉(xiāng)村產(chǎn)業(yè)園區(qū)化融合化發(fā)展，支持有條件的縣(市、區(qū))建設(shè)現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園。現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園，是打造現(xiàn)代農(nóng)業(yè)示范的載體、現(xiàn)代農(nóng)業(yè)技術(shù)裝備集成的載體、新主體“雙創(chuàng)”的載體、優(yōu)勢特色農(nóng)業(yè)發(fā)展的載體、農(nóng)村一二三產(chǎn)業(yè)融合的載體?，F(xiàn)代農(nóng)業(yè)園區(qū)作為資本、科技、人才等要素的集聚區(qū)，對全面推進(jìn)鄉(xiāng)村振興戰(zhàn)略，實現(xiàn)農(nóng)業(yè)農(nóng)村現(xiàn)代化有著重要意義。近年來，隨著計算機(jī)技術(shù)和虛擬現(xiàn)實技術(shù)的發(fā)展，VR全景技術(shù)廣泛應(yīng)用于智慧旅游、智慧校園、數(shù)字博物館等領(lǐng)域[1]。VR全景技術(shù)以其強(qiáng)烈的沉浸感和交互性，給用戶身臨其境的視覺體驗展現(xiàn)目標(biāo)對象環(huán)境。隨著國家大力發(fā)展現(xiàn)代農(nóng)業(yè)園區(qū)建設(shè)，園區(qū)已有田園風(fēng)光景色、農(nóng)產(chǎn)品生長環(huán)境、人居環(huán)境等迫切需要一個輕量級方便的系統(tǒng)向大眾推廣和展示。

以成都崇州市現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園為研究區(qū)域，利用無人機(jī)航拍獲取園區(qū)空中VR全景圖，利用單反相機(jī)和全景云臺獲取園區(qū)農(nóng)產(chǎn)品商店室內(nèi)VR全景圖，并收集整理園區(qū)特色農(nóng)產(chǎn)品溯源資料數(shù)據(jù)，基于Krpano平臺和HTML5技術(shù)，接入園區(qū)線上商城系統(tǒng)，開發(fā)現(xiàn)代農(nóng)業(yè)園區(qū)VR全景漫游系統(tǒng)。系統(tǒng)實現(xiàn)了園區(qū)農(nóng)業(yè)景觀VR全景漫游、在線農(nóng)產(chǎn)品銷售以及在線農(nóng)產(chǎn)品溯源一體化等功能。本系統(tǒng)將VR全景技術(shù)、電商和農(nóng)產(chǎn)品溯源進(jìn)行有效結(jié)合的模式，打造現(xiàn)代農(nóng)業(yè)園區(qū)展示新平臺，對促進(jìn)農(nóng)業(yè)信息化發(fā)展、農(nóng)業(yè)旅游、農(nóng)民增收具有非常重大的意義。

1 系統(tǒng)需求分析

1.1 數(shù)據(jù)需求

系統(tǒng)數(shù)據(jù)需求主要有以下幾點：現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園區(qū)農(nóng)業(yè)景觀VR全景數(shù)據(jù)；現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園區(qū)農(nóng)特產(chǎn)品展覽銷售館室內(nèi)VR全景數(shù)據(jù)；現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園區(qū)特色農(nóng)產(chǎn)品溯源數(shù)據(jù)和電子商城鏈接數(shù)據(jù)。

1.2 功能需求

結(jié)合系統(tǒng)的開發(fā)背景以及用戶需求，功能需求主要有以下幾點：農(nóng)業(yè)景觀的720°全景VR瀏覽，支持VR設(shè)備為用戶提供逼真的景觀瀏覽體驗；農(nóng)產(chǎn)品VR全景展廳功能，將傳統(tǒng)的農(nóng)特館展廳以720°全景的方式為用戶帶來不一樣的購買體驗；農(nóng)產(chǎn)品在線銷售功能，用戶在瀏覽農(nóng)產(chǎn)品VR全景的時候可以直接購買該產(chǎn)品；農(nóng)產(chǎn)品在線溯源功能，為用戶提供農(nóng)產(chǎn)品的施肥、用藥、氣候、土壤等信息指標(biāo)展示；支持PC端、移動端瀏覽器播放，并且針對不同端有不同優(yōu)化，只需要瀏覽器訪問網(wǎng)頁便可以加載訪問系統(tǒng)；支持視頻插入到全景，實現(xiàn)園區(qū)宣傳片播放展示。

2 VR全景圖制作

2.1 現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園區(qū)農(nóng)業(yè)景觀VR全景數(shù)據(jù)

農(nóng)業(yè)景觀VR全景數(shù)據(jù)的制作主要步驟[2]：根據(jù)園區(qū)景觀的分布確定好航拍的點位，將無人機(jī)在點位一定高度懸停，把無人機(jī)相機(jī)調(diào)整到水平視角開始拍攝，朝1個方向橫向旋轉(zhuǎn)水平拍攝，拍攝1圈8張圖片，每張照片20%左右的重合度；水平方向拍攝1圈以后，把相機(jī)鏡頭向下45°，然后再拍攝1圈，拍攝要求和水平方向一樣；在垂直地面拍攝1張地面照片即可；拍攝完成以后，使用PTGui軟件拼接制作2∶1比例的平面全景圖(.JPG)，最后將全景圖導(dǎo)入Photoshop中進(jìn)行調(diào)色和補(bǔ)天(補(bǔ)地)等處理，獲得園區(qū)農(nóng)業(yè)景觀VR全景數(shù)據(jù)。

2.2 現(xiàn)代農(nóng)業(yè)產(chǎn)業(yè)園區(qū)農(nóng)特館室內(nèi)VR全景數(shù)據(jù)

室內(nèi)VR全景數(shù)據(jù)采用單反相機(jī)、廣角鏡頭、三腳架和全景云臺設(shè)備采集，主要步驟[3]：將鏡頭對焦模式調(diào)整為手動對焦，將對焦環(huán)調(diào)整至無限遠(yuǎn)，以保證拍攝的全景圖像遠(yuǎn)處畫面也能清晰呈現(xiàn)，在焦段設(shè)置中需要注意的是全畫幅相機(jī)鏡頭為8mm，半畫幅相機(jī)為12mm，在拍攝過程中不要調(diào)整焦距，以免拍攝出的圖片因鏡頭節(jié)點發(fā)生變化而導(dǎo)致圖片無法拼合，為保證相機(jī)成像的質(zhì)量，根據(jù)環(huán)境調(diào)整相機(jī)的感光度、曝光補(bǔ)償、焦段、光圈值；架設(shè)相機(jī)三腳架，安裝云臺和相機(jī)，確保相機(jī)水平方向與地面平行；調(diào)整相機(jī)角度，根據(jù)云臺指針上方刻度分別調(diào)整水平、上斜、下斜方向，并確保對焦清晰后，依3個方向繞云臺下方刻度0°、60°、120°、180°、240°、300°各拍攝1張，共計水平6張為1組，上斜6張為1組，下斜6張為1組，總計水平、上斜、下斜共18張，最后調(diào)整云臺上方刻度垂直向上90°，分別垂直向上和向下拍攝1張；拍攝完成以后，使用PTGui和Photoshop制作獲得農(nóng)特館室內(nèi)VR全景數(shù)據(jù)。

3 系統(tǒng)設(shè)計

3.1 系統(tǒng)架構(gòu)設(shè)計

系統(tǒng)基于Krpano開發(fā)實現(xiàn)VR全景漫游展示，基于百度地圖API服務(wù)實現(xiàn)VR全景的位置定位。系統(tǒng)采用B/S模式架構(gòu)設(shè)計，邏輯結(jié)構(gòu)分別為數(shù)據(jù)層、服務(wù)層和應(yīng)用層3層結(jié)構(gòu)。數(shù)據(jù)層主要是制作完成的全景圖數(shù)據(jù)和農(nóng)產(chǎn)品溯源數(shù)據(jù)等。服務(wù)層使用百度地圖API for JavaScript等地圖功能，可將百度地圖(街道圖和衛(wèi)星影像圖)嵌入到用戶端，供Krpano應(yīng)用程序調(diào)用。應(yīng)用層主要是基于Krpano框架二次開發(fā)[4]，通過對Krpano框架內(nèi)部XML數(shù)據(jù)的解析和重構(gòu)，開發(fā)實現(xiàn)了全景定位、全景控制、全景交互、全景漫游、農(nóng)產(chǎn)品溯源等功能。系統(tǒng)整體架構(gòu)設(shè)計如圖1所示。

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

3.2 系統(tǒng)功能設(shè)計

根據(jù)系統(tǒng)功能需求分析情況，設(shè)計系統(tǒng)功能模塊主要全景漫游、農(nóng)產(chǎn)品溯源展示、全景地圖定位、全景查詢等。本系統(tǒng)功能模塊設(shè)計如圖2所示。

圖2 系統(tǒng)功能設(shè)計圖

3.3 開發(fā)環(huán)境

系統(tǒng)開發(fā)工具WebStorm，WebStorm是Jetbrains公司旗下1款JavaScript開發(fā)工具。被廣大JS開發(fā)者譽(yù)為“Web前端開發(fā)神器”、“最強(qiáng)大的HTML5編輯器”、“最智能的JavaScript IDE”等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強(qiáng)大的JS部分的功能。

系統(tǒng)開發(fā)語言HTML5[5]，是互聯(lián)網(wǎng)的新1代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的1種語言方式。廣義論及HTML5時，指的是包括HTML、CSS和JavaScript在內(nèi)的1套技術(shù)組合。HTML5能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)，如Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且能提供更多可以有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

開發(fā)平臺Krpano[6]，Krpano是1種基于體積小巧、靈活且以高性能著稱的三維全景播放器，其可以作為Flash和HTML5應(yīng)用程序。Krpano也是1款強(qiáng)大的全景圖制作工具，從全景圖的合成、切片到全景漫游的生成一應(yīng)俱全。Krpano還為開發(fā)者提供了1個簡單輕便的接口用于開發(fā)第3方插件，其中的HTML5JavaScript插件可實現(xiàn)Krpano與HTML5的完全結(jié)合，使用純代碼來擴(kuò)展或控制krpano。

4 系統(tǒng)實現(xiàn)

本系統(tǒng)基于Krpano和HTML5開發(fā)實現(xiàn)了全景漫游、農(nóng)產(chǎn)品溯源展示、全景地圖定位、全景查詢等功能。

4.1 全景漫游

在瀏覽器地址類輸入本系統(tǒng)訪問地址，即可進(jìn)入使用本系統(tǒng)。

4.1.1 小行星開場

進(jìn)入成功后，可以看到以下景觀球體旋轉(zhuǎn)的動畫，該初始動畫會按照設(shè)備性能以及用戶網(wǎng)絡(luò)速度持續(xù)數(shù)秒，設(shè)備性能越好網(wǎng)絡(luò)速度越快持續(xù)時間越短，如圖3所示。

圖3 小行星開場界面

4.1.2 全景漫游主界面

主界面窗口為VR全景圖片展示畫面，界面下部為導(dǎo)航欄，右側(cè)是地圖工具，右上角是工具欄，右下為溯源功能圖標(biāo)。導(dǎo)航欄控制著系統(tǒng)的瀏覽路徑，可以自由選擇想要瀏覽的全景場景，以及查詢每個點相關(guān)的信息。地圖工具負(fù)責(zé)顯示當(dāng)前瀏覽點的地理位置，方便用戶獲取該點詳細(xì)的地理信息。工具欄為用戶提供系統(tǒng)相關(guān)設(shè)置以及附屬功能，如圖4所示。

圖4 全景漫游界面

4.1.3 全景瀏覽功能

全景瀏覽是本系統(tǒng)最為主要的功能，能給用戶帶來仿真的景觀瀏覽體驗以及對感興趣的對象進(jìn)行查詢。全景圖中有一些地名以及抖動的圖，實現(xiàn)不同全景瀏覽點位切換，用戶可以通過點擊這些圖標(biāo)前往下1個全景觀測點。直升機(jī)圖標(biāo)表示天空中的觀測點，向前箭頭的圖標(biāo)表示沿道路的觀測點，向下的箭頭表示進(jìn)入建筑物內(nèi)或者附近地面的觀測點。每個界面都是通過觀測點相互鏈接，通過旋轉(zhuǎn)畫面均能找到。將鼠標(biāo)懸停于圖標(biāo)上，在圖標(biāo)的上方會出現(xiàn)彈窗。該彈窗是該圖標(biāo)所代表的觀測點的動態(tài)預(yù)覽界面，可以通過彈窗初步預(yù)覽該觀測點大致內(nèi)容，如圖5所示。

圖5 下一場景預(yù)覽

4.1.4 導(dǎo)航功能

導(dǎo)航功能主要是通過導(dǎo)航欄操作的，主要由前進(jìn)、后退、自由選擇、信息查詢工具組成。右箭頭按鈕為前進(jìn)按鈕，鼠標(biāo)點擊或者在觸摸屏幕上輕觸按鈕，界面便可以進(jìn)入下1個預(yù)設(shè)的觀測點。左箭頭按鈕為后退按鈕，鼠標(biāo)點擊或者在觸摸屏幕上輕觸按鈕，界面便可以退回到上1個預(yù)設(shè)的觀測點。導(dǎo)航欄中部為觀測點自由選擇按鈕，鼠標(biāo)左鍵點擊或者在觸摸屏幕上輕觸按鈕，將會彈出觀測點列表窗口。

在觀測點列表窗口中陳列整個系統(tǒng)中的全景觀測點，用戶可以不按預(yù)設(shè)自由選擇需要進(jìn)行瀏覽的觀測點。值得注意的是，該列表的順序同時也是預(yù)設(shè)的瀏覽路徑。導(dǎo)航欄上方是信息查詢工具，通過點擊鼠標(biāo)左鍵或者觸摸觸發(fā)，信息窗口彈出。

4.2 地圖功能

地圖功能是對全景瀏覽功能的補(bǔ)充和完善，在切換不同觀測點的過程中用戶可以通過地圖功能了解該觀測點的地理空間位置以及其他觀測點的位置關(guān)系。地圖的功能主要有地圖基礎(chǔ)操作、地圖點擊查詢、地圖底圖切換功能。

4.2.1 地圖基礎(chǔ)操作

地圖放大，地圖縮小，地圖平移功能。

4.2.2 地圖點擊查詢

地圖點擊查詢切換功能是地圖功能的核心，使用該功能可以在地圖上選擇用戶需要的全景瀏覽觀測的點位，將空間信息和全景聯(lián)系在一起，對全景瀏覽起到一定輔助作用。地圖中全景點位通過圖標(biāo)標(biāo)注在地圖底圖上，存在的全景瀏覽觀測點位為藍(lán)色，當(dāng)前頁面加載的點位顯示為綠色。用戶通過點擊各點來切換點位，左側(cè)全景瀏覽界面便會加載點位，待進(jìn)度條讀完便可瀏覽，如圖6所示。

圖6 地圖點擊查詢

4.2.3 地圖底圖切換功能

用戶可以通過地圖底圖切換功能來達(dá)到使用不同底圖應(yīng)對不同工作的需求。地圖的底圖切換功能包括2種，矢量化的二維地圖和柵格衛(wèi)星圖像。用戶可以根據(jù)自己的需求進(jìn)行選擇，如圖7所示。

圖7 衛(wèi)星地圖加載

4.3 農(nóng)產(chǎn)品溯源功能

點擊功能圖標(biāo)，以幻燈片播放的形式展示，溯源信息。農(nóng)產(chǎn)品在線溯源功能為用戶提供施肥、農(nóng)藥使用、氣候報告、農(nóng)產(chǎn)品生長報告等信息，如圖8所示。

圖8 農(nóng)產(chǎn)品生長溯源

4.4 農(nóng)產(chǎn)品購買功能

系統(tǒng)提供農(nóng)產(chǎn)品在線購買功能，并接入傳統(tǒng)商城嵌入到本系統(tǒng)。為用戶提供商品在線購買，點擊圖標(biāo)即可立即購買以及查看商品詳細(xì)圖片，如圖9和圖10所示。

圖9 農(nóng)產(chǎn)品在線購買

圖10 農(nóng)產(chǎn)品圖片查看

5 結(jié)論

本文通過系統(tǒng)需求調(diào)研與分析，采集現(xiàn)代農(nóng)業(yè)園區(qū)地面和空中全景原始影像數(shù)據(jù)并制作全景圖，基于Krpano全景開發(fā)框架發(fā)布現(xiàn)代農(nóng)業(yè)園區(qū)VR全景展示系統(tǒng)實現(xiàn)現(xiàn)代農(nóng)業(yè)園區(qū)交互式全景漫游，基于HTML5技術(shù)開發(fā)實現(xiàn)VR全景地圖查詢、農(nóng)產(chǎn)品溯源和農(nóng)產(chǎn)在線購買功能。本系統(tǒng)充分利用VR全景的實景展示技術(shù)優(yōu)勢，接入現(xiàn)代農(nóng)業(yè)園區(qū)的農(nóng)產(chǎn)品溯源和在線商城，大大提升了園區(qū)的展示效果，并為園區(qū)農(nóng)產(chǎn)品的銷售提供用戶入口，增強(qiáng)了用戶對園區(qū)農(nóng)產(chǎn)品的生長環(huán)境的認(rèn)識。同時，為現(xiàn)代農(nóng)業(yè)園區(qū)的農(nóng)業(yè)旅游推廣也提供新的展示方式，增加園區(qū)的推廣渠道，間接提高園區(qū)的經(jīng)濟(jì)收入。