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

背景技術：

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

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

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

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

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

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

S1、在實際地點采集照片，記錄地形，并對照片進行預處理工作；

S2、獲得預處理的照片后，將對應同一個地點的一組照片進行拼接，生成360°全景圖片；

S3、獲得360°全景圖片后，使用WebVR的Three.js技術生成全景場景并設置好場景的交互點；

S4、依據獲得的地形信息，進行導游地圖的描繪，并表明提供全景漫游的點；

S5、由步驟S4獲得全景漫游場景，運行時檢測設備是否具有陀螺儀，以確定轉換場景中視角的方式。

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

所述步驟S1，具體為：

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

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

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

S1-4、在各采景點重復步驟S1-1至S1-3，獲得對應各采景點的多組照片，并以紙筆或照片的方式記錄各采景點在地形上的分布；

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

所述步驟S2，具體為：

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

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

所述步驟S3，具體為：

S3-1、調用Three.js的THREE.Scene()創(chuàng)建場景，并對場景進行實例化；

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

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

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

S3-5、使用requestAnimationFrame()函數(shù)進行實時渲染，保證視角變動時，畫面會進行相應的變化；

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

所述步驟S4，具體為：

使用HTML5技術，通過獲取到的采景點地形分布信息，在網頁上繪制導游地圖，并清晰表示每個全景漫游點，且漫游點提供點擊后跳轉至相應全景漫游場景的服務。

所述步驟S5，具體為：

使用HTML5調用原生API檢測設備是否具有陀螺儀，若設備不具有陀螺儀，則全景場景中視角的轉換設定為以鼠標拖拉的模式，通過監(jiān)聽鼠標的相應事件實現(xiàn)；若設備具有陀螺儀，則將全景場景中視角的轉換設定為以陀螺儀驅動的模式，通過deviceorientation事件檢測設備的方向變化并相應地改變全景場景中的視角。

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

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

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

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

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

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

附圖說明

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

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

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

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

圖5為根據記錄的地形信息描繪導游地圖的流程圖。

圖6為檢測陀螺儀以確定視角轉換模式的流程圖。

具體實施方式

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

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

S1、在實際地點采集照片，記錄地形，并對照片進行預處理工作；

S2、獲得預處理的照片后，將對應同一個地點的一組照片進行拼接，生成360°全景圖片；

S3、獲得360°全景圖片后，使用WebVR的Three.js技術生成全景場景并設置好場景的交互點；

S4、依據獲得的地形信息，進行導游地圖的描繪，并表明提供全景漫游的點；

S5、由步驟S4獲得全景漫游場景，運行時檢測設備是否具有陀螺儀，以確定轉換場景中視角的方式。

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

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

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

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

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

S1-4、在各采景點重復步驟S1-1至S1-3，獲得對應各采景點的多組照片，并以紙筆或照片的方式記錄各采景點在地形上的分布；

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

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

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

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

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

S3-1、調用Three.js的THREE.Scene()創(chuàng)建場景，并對場景進行實例化；

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

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

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

S3-5、使用requestAnimationFrame()函數(shù)進行實時渲染，保證視角變動時，畫面會進行相應的變化；

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

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

依據步驟1.4中記錄的地形信息，使用HTML5技術在Canvas上繪制導游地圖。

使用HTML5技術，在繪制好的地圖上添加與虛擬現(xiàn)實全景場景相對應的地點，并定義好點擊監(jiān)聽事件，當點擊發(fā)生時，頁面跳轉至相應的虛擬現(xiàn)實全景場景中。

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

使用HTML5調用原生API檢測設備是否具有陀螺儀，若設備不具有陀螺儀，則全景場景中視角的轉換設定為以鼠標拖拉的模式，通過監(jiān)聽鼠標的相應事件實現(xiàn)；若設備具有陀螺儀，則將全景場景中視角的轉換設定為以陀螺儀驅動的模式，通過deviceorientation事件檢測設備的方向變化并相應地改變全景場景中的視角。

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