本發(fā)明涉及虛擬現(xiàn)實(shí)領(lǐng)域，特別涉及一種基于WebVR的虛擬現(xiàn)實(shí)全景漫游的實(shí)現(xiàn)方法。

背景技術(shù)：

虛擬現(xiàn)實(shí)(Virtual Reality，簡(jiǎn)稱VR)，即利用計(jì)算機(jī)技術(shù)模擬產(chǎn)生三維的虛擬世界，讓使用者及時(shí)、沒(méi)有限制地感知虛擬空間內(nèi)的事物。虛擬現(xiàn)實(shí)技術(shù)利用視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)、嗅覺(jué)等對(duì)人體進(jìn)行全方位欺騙，達(dá)到讓使用者"身臨其境"的效果。近年來(lái)，虛擬現(xiàn)實(shí)技術(shù)蓬勃發(fā)展，各大廠商也紛紛進(jìn)入虛擬現(xiàn)實(shí)領(lǐng)域大展拳腳，該領(lǐng)域的投資并購(gòu)不勝枚舉，2016年更是被稱為VR元年。據(jù)Deloitte(德勤)預(yù)測(cè)，2016年全球虛擬現(xiàn)實(shí)(VR)市場(chǎng)規(guī)模將達(dá)到數(shù)十億美元，其中7億來(lái)自硬件銷售；其它來(lái)自內(nèi)容。內(nèi)容收入主要來(lái)源于游戲銷售，每個(gè)游戲的銷售在5-40美元之間，總收入可達(dá)到3億美元。VR耳機(jī)約為250萬(wàn)，游戲軟件1000萬(wàn)。2016年，VR收入絕大部分來(lái)自上億美元的核心游戲者，而非偶發(fā)或PC游戲者。2017年，全球VR收入將增加，從中期看，收入可增加到百億美元。

在PC端上的VR應(yīng)用蓬勃發(fā)展的背景下，提供更為逼真的虛擬現(xiàn)實(shí)實(shí)現(xiàn)方法顯得尤為必要。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的在于克服現(xiàn)有技術(shù)的缺點(diǎn)與不足，提供一種基于WebVR的虛擬現(xiàn)實(shí)全景漫游的實(shí)現(xiàn)方法，用戶通過(guò)在瀏覽器端上查看導(dǎo)游地圖并選擇地點(diǎn)后，可進(jìn)入到由WebVR技術(shù)構(gòu)建的全景漫游中，無(wú)需佩戴虛擬現(xiàn)實(shí)頭顯或眼鏡，只需拖動(dòng)屏幕或轉(zhuǎn)動(dòng)手機(jī)的方向，便可看到漫游場(chǎng)景中周圍的景色，且通過(guò)點(diǎn)擊場(chǎng)景中的交互點(diǎn)，可以切換到臨近的相應(yīng)場(chǎng)景中，給用戶帶來(lái)身臨其境的體驗(yàn)。

本發(fā)明的目的通過(guò)以下的技術(shù)方案實(shí)現(xiàn)：

一種基于WebVR的虛擬現(xiàn)實(shí)全景漫游的實(shí)現(xiàn)方法，包含以下步驟：

S1、在實(shí)際地點(diǎn)采集照片，記錄地形，并對(duì)照片進(jìn)行預(yù)處理工作；

S2、獲得預(yù)處理的照片后，將對(duì)應(yīng)同一個(gè)地點(diǎn)的一組照片進(jìn)行拼接，生成360°全景圖片；

S3、獲得360°全景圖片后，使用WebVR的Three.js技術(shù)生成全景場(chǎng)景并設(shè)置好場(chǎng)景的交互點(diǎn)；

S4、依據(jù)獲得的地形信息，進(jìn)行導(dǎo)游地圖的描繪，并表明提供全景漫游的點(diǎn)；

S5、由步驟S4獲得全景漫游場(chǎng)景，運(yùn)行時(shí)檢測(cè)設(shè)備是否具有陀螺儀，以確定轉(zhuǎn)換場(chǎng)景中視角的方式。

步驟S1中，所述預(yù)處理工作包括圖像增強(qiáng)、特征區(qū)域提取。

所述步驟S1，具體為：

S1-1、選擇數(shù)碼相機(jī)，使用變形小的中焦或長(zhǎng)焦進(jìn)行拍攝，拍攝的途中不改變焦距；

S1-2、數(shù)碼相機(jī)的曝光參數(shù)使用手動(dòng)曝光，并注意同一組照片的拍攝過(guò)程中不改變光圈分辨率，且必須使用固定白平衡；

S1-3、將數(shù)碼相機(jī)放于三腳架上平穩(wěn)旋轉(zhuǎn)，拍攝時(shí)須注意旋轉(zhuǎn)軸的垂直，圍繞拍攝的點(diǎn)平移拍攝；拍攝相鄰的兩幅圖片時(shí)必須要有一定的重疊；

S1-4、在各采景點(diǎn)重復(fù)步驟S1-1至S1-3，獲得對(duì)應(yīng)各采景點(diǎn)的多組照片，并以紙筆或照片的方式記錄各采景點(diǎn)在地形上的分布；

S1-5、對(duì)采集到的各組照片使用拉普拉斯運(yùn)算方法，進(jìn)行銳化處理，然后提取照片的特征線段。

所述步驟S2，具體為：

S2-1、對(duì)于對(duì)應(yīng)不同采景點(diǎn)的每一組照片，依據(jù)照片的特征線段，進(jìn)行基于最小偏差特征線段匹配，并將相鄰圖像根據(jù)運(yùn)算所得的平移參數(shù)進(jìn)行疊加，生成原始的360°全景圖片；

S2-2、為實(shí)現(xiàn)圖片間的無(wú)縫連接，對(duì)原始的360°原始圖片進(jìn)行加權(quán)平滑處理，利用圖片間基于像素按權(quán)值疊加的方法，實(shí)現(xiàn)平滑過(guò)渡，得到無(wú)縫連接的360°全景圖片。

所述步驟S3，具體為：

S3-1、調(diào)用Three.js的THREE.Scene()創(chuàng)建場(chǎng)景，并對(duì)場(chǎng)景進(jìn)行實(shí)例化；

S3-2、為模擬人眼看物體的方式，在場(chǎng)景中選擇并創(chuàng)建透視投影照相機(jī)，并將其放置到場(chǎng)景的原點(diǎn)上方；

S3-3、在場(chǎng)景中創(chuàng)建渲染器，設(shè)定好渲染器的尺寸，并將其加入到場(chǎng)景中去；

S3-4、在場(chǎng)景中以原點(diǎn)為圓心，創(chuàng)建一個(gè)球體，并將得到的360°全景圖片作為球體的紋理；

S3-5、使用requestAnimationFrame()函數(shù)進(jìn)行實(shí)時(shí)渲染，保證視角變動(dòng)時(shí)，畫(huà)面會(huì)進(jìn)行相應(yīng)的變化；

S3-6、在已實(shí)現(xiàn)的全景場(chǎng)景中，以Three.JS在設(shè)定點(diǎn)上創(chuàng)建場(chǎng)景交互點(diǎn)并設(shè)置點(diǎn)擊監(jiān)聽(tīng)事件，交互點(diǎn)被點(diǎn)擊后，視角會(huì)跳轉(zhuǎn)至相鄰的相應(yīng)場(chǎng)景中。所述設(shè)定點(diǎn)一般為特殊的點(diǎn)，如出口等。

所述步驟S4，具體為：

使用HTML5技術(shù)，通過(guò)獲取到的采景點(diǎn)地形分布信息，在網(wǎng)頁(yè)上繪制導(dǎo)游地圖，并清晰表示每個(gè)全景漫游點(diǎn)，且漫游點(diǎn)提供點(diǎn)擊后跳轉(zhuǎn)至相應(yīng)全景漫游場(chǎng)景的服務(wù)。

所述步驟S5，具體為：

使用HTML5調(diào)用原生API檢測(cè)設(shè)備是否具有陀螺儀，若設(shè)備不具有陀螺儀，則全景場(chǎng)景中視角的轉(zhuǎn)換設(shè)定為以鼠標(biāo)拖拉的模式，通過(guò)監(jiān)聽(tīng)鼠標(biāo)的相應(yīng)事件實(shí)現(xiàn)；若設(shè)備具有陀螺儀，則將全景場(chǎng)景中視角的轉(zhuǎn)換設(shè)定為以陀螺儀驅(qū)動(dòng)的模式，通過(guò)deviceorientation事件檢測(cè)設(shè)備的方向變化并相應(yīng)地改變?nèi)皥?chǎng)景中的視角。

本發(fā)明與現(xiàn)有技術(shù)相比，具有如下優(yōu)點(diǎn)和有益效果：

1、本發(fā)明所使用的網(wǎng)頁(yè)技術(shù)，即HTML5技術(shù)，如WebGL、WebVR、Three.js和GLAM，創(chuàng)建虛擬現(xiàn)實(shí)體驗(yàn)，能夠?qū)⒒ヂ?lián)網(wǎng)帶入虛擬現(xiàn)實(shí)的世界。WebVR技術(shù)結(jié)合了VR和Web，讓人們可以直接利用JavaScript與WebGL構(gòu)建VR應(yīng)用。WebVR依托于WebGL技術(shù)的高速發(fā)展，利用GPU執(zhí)行計(jì)算以及游戲引擎技術(shù)針對(duì)芯片級(jí)的API優(yōu)化，提高了圖形渲染計(jì)算能力，大大降低開(kāi)發(fā)者進(jìn)入VR領(lǐng)域的門檻，同時(shí)WebVR還可以更好地結(jié)合云計(jì)算技術(shù)，補(bǔ)足VR終端的計(jì)算能力，加強(qiáng)交互體驗(yàn)。Web技術(shù)不僅使創(chuàng)作VR的成本更加低廉，而且大大降低技術(shù)門檻。另外Layabox和Egret這兩款HTML5引擎目前都已經(jīng)支持VR發(fā)布，而Chrome和Firefox瀏覽器也開(kāi)始支持WebVR。

2、本發(fā)明在WebVR的開(kāi)發(fā)中，所用到的Three.js技術(shù)是源自GitHub的一個(gè)開(kāi)源項(xiàng)目，是由JavaScript編寫(xiě)的WebGL的第三方庫(kù)。作為一款運(yùn)行在瀏覽器中的3D引擎，它提供了包括照相機(jī)、光影、材質(zhì)等各種對(duì)象，可用于創(chuàng)建各種三維場(chǎng)景。

3、本發(fā)明只憑普通的數(shù)碼相機(jī)照出的照片，即可合成360全景圖片，進(jìn)而構(gòu)建虛擬現(xiàn)實(shí)全景場(chǎng)景，無(wú)需購(gòu)置昂貴的全景攝像機(jī)。

4、本發(fā)明運(yùn)行于網(wǎng)頁(yè)端，無(wú)論是PC還是移動(dòng)設(shè)備，都能方便地通過(guò)訪問(wèn)網(wǎng)頁(yè)的方式獲取虛擬現(xiàn)實(shí)全景漫游的體驗(yàn)。

5、體驗(yàn)本發(fā)明的虛擬現(xiàn)實(shí)全景漫游，不需要佩戴專門的虛擬現(xiàn)實(shí)頭顯或眼鏡，比較親民。

附圖說(shuō)明

圖1為本發(fā)明所述一種基于WebVR的虛擬現(xiàn)實(shí)全景漫游的實(shí)現(xiàn)方法的流程圖。

圖2為采集照片、記錄地形及照片預(yù)處理的流程圖。

圖3為將預(yù)處理的照片拼接成360全景圖的流程圖。

圖4為將獲取到的360全景圖片制作為虛擬現(xiàn)實(shí)全景漫游的流程圖。

圖5為根據(jù)記錄的地形信息描繪導(dǎo)游地圖的流程圖。

圖6為檢測(cè)陀螺儀以確定視角轉(zhuǎn)換模式的流程圖。

具體實(shí)施方式

下面結(jié)合實(shí)施例及附圖對(duì)本發(fā)明作進(jìn)一步詳細(xì)的描述，但本發(fā)明的實(shí)施方式不限于此。

如圖1，一種基于WebVR的虛擬現(xiàn)實(shí)全景漫游的實(shí)現(xiàn)方法，包含以下步驟：

S1、在實(shí)際地點(diǎn)采集照片，記錄地形，并對(duì)照片進(jìn)行預(yù)處理工作；

S2、獲得預(yù)處理的照片后，將對(duì)應(yīng)同一個(gè)地點(diǎn)的一組照片進(jìn)行拼接，生成360°全景圖片；

S3、獲得360°全景圖片后，使用WebVR的Three.js技術(shù)生成全景場(chǎng)景并設(shè)置好場(chǎng)景的交互點(diǎn)；

S4、依據(jù)獲得的地形信息，進(jìn)行導(dǎo)游地圖的描繪，并表明提供全景漫游的點(diǎn)；

S5、由步驟S4獲得全景漫游場(chǎng)景，運(yùn)行時(shí)檢測(cè)設(shè)備是否具有陀螺儀，以確定轉(zhuǎn)換場(chǎng)景中視角的方式。

步驟S1中，所述預(yù)處理工作包括圖像增強(qiáng)、特征區(qū)域提取。

如圖2，所述步驟S1，具體為：

S1-1、選擇數(shù)碼相機(jī)，使用變形小的中焦或長(zhǎng)焦進(jìn)行拍攝，拍攝的途中不改變焦距；

S1-2、數(shù)碼相機(jī)的曝光參數(shù)使用手動(dòng)曝光，并注意同一組照片的拍攝過(guò)程中不改變光圈分辨率，且必須使用固定白平衡；

S1-3、將數(shù)碼相機(jī)放于三腳架上平穩(wěn)旋轉(zhuǎn)，拍攝時(shí)須注意旋轉(zhuǎn)軸的垂直，圍繞拍攝的點(diǎn)平移拍攝；拍攝相鄰的兩幅圖片時(shí)必須要有一定的重疊；

S1-4、在各采景點(diǎn)重復(fù)步驟S1-1至S1-3，獲得對(duì)應(yīng)各采景點(diǎn)的多組照片，并以紙筆或照片的方式記錄各采景點(diǎn)在地形上的分布；

S1-5、對(duì)采集到的各組照片使用拉普拉斯運(yùn)算方法，進(jìn)行銳化處理，然后提取照片的特征線段。

如圖3，所述步驟S2，具體為：

S2-1、對(duì)于對(duì)應(yīng)不同采景點(diǎn)的每一組照片，依據(jù)照片的特征線段，進(jìn)行基于最小偏差特征線段匹配，并將相鄰圖像根據(jù)運(yùn)算所得的平移參數(shù)進(jìn)行疊加，生成原始的360°全景圖片；

S2-2、為實(shí)現(xiàn)圖片間的無(wú)縫連接，對(duì)原始的360°原始圖片進(jìn)行加權(quán)平滑處理，利用圖片間基于像素按權(quán)值疊加的方法，實(shí)現(xiàn)平滑過(guò)渡，得到無(wú)縫連接的360°全景圖片。

如圖4，所述步驟S3，具體為：

S3-1、調(diào)用Three.js的THREE.Scene()創(chuàng)建場(chǎng)景，并對(duì)場(chǎng)景進(jìn)行實(shí)例化；

S3-2、為模擬人眼看物體的方式，在場(chǎng)景中選擇并創(chuàng)建透視投影照相機(jī)，并將其放置到場(chǎng)景的原點(diǎn)上方；

S3-3、在場(chǎng)景中創(chuàng)建渲染器，設(shè)定好渲染器的尺寸，并將其加入到場(chǎng)景中去；

S3-4、在場(chǎng)景中以原點(diǎn)為圓心，創(chuàng)建一個(gè)球體，并將得到的360°全景圖片作為球體的紋理；

S3-5、使用requestAnimationFrame()函數(shù)進(jìn)行實(shí)時(shí)渲染，保證視角變動(dòng)時(shí)，畫(huà)面會(huì)進(jìn)行相應(yīng)的變化；

S3-6、在已實(shí)現(xiàn)的全景場(chǎng)景中，以Three.JS在設(shè)定點(diǎn)上創(chuàng)建場(chǎng)景交互點(diǎn)并設(shè)置點(diǎn)擊監(jiān)聽(tīng)事件，交互點(diǎn)被點(diǎn)擊后，視角會(huì)跳轉(zhuǎn)至相鄰的相應(yīng)場(chǎng)景中。所述設(shè)定點(diǎn)一般為特殊的點(diǎn)，如出口等。

如圖5，所述步驟S4，具體為：

依據(jù)步驟1.4中記錄的地形信息，使用HTML5技術(shù)在Canvas上繪制導(dǎo)游地圖。

使用HTML5技術(shù)，在繪制好的地圖上添加與虛擬現(xiàn)實(shí)全景場(chǎng)景相對(duì)應(yīng)的地點(diǎn)，并定義好點(diǎn)擊監(jiān)聽(tīng)事件，當(dāng)點(diǎn)擊發(fā)生時(shí)，頁(yè)面跳轉(zhuǎn)至相應(yīng)的虛擬現(xiàn)實(shí)全景場(chǎng)景中。

如圖6，所述步驟S5，具體為：

使用HTML5調(diào)用原生API檢測(cè)設(shè)備是否具有陀螺儀，若設(shè)備不具有陀螺儀，則全景場(chǎng)景中視角的轉(zhuǎn)換設(shè)定為以鼠標(biāo)拖拉的模式，通過(guò)監(jiān)聽(tīng)鼠標(biāo)的相應(yīng)事件實(shí)現(xiàn)；若設(shè)備具有陀螺儀，則將全景場(chǎng)景中視角的轉(zhuǎn)換設(shè)定為以陀螺儀驅(qū)動(dòng)的模式，通過(guò)deviceorientation事件檢測(cè)設(shè)備的方向變化并相應(yīng)地改變?nèi)皥?chǎng)景中的視角。

上述實(shí)施例為本發(fā)明較佳的實(shí)施方式，但本發(fā)明的實(shí)施方式并不受上述實(shí)施例的限制，其他的任何未背離本發(fā)明的精神實(shí)質(zhì)與原理下所作的改變、修飾、替代、組合、簡(jiǎn)化，均應(yīng)為等效的置換方式，都包含在本發(fā)明的保護(hù)范圍之內(nèi)。