1、v 演講人：劉海娜演講人：劉海娜 v指導(dǎo)老師：林予松指導(dǎo)老師：林予松 v研究現(xiàn)狀研究現(xiàn)狀 v研究意義研究意義 v研究過程研究過程 v研究結(jié)果研究結(jié)果 v下一步工作下一步工作 主要內(nèi)容介紹主要內(nèi)容介紹 v傳統(tǒng)的傳統(tǒng)的360度度全景全景漫游漫游技術(shù)技術(shù)主要有主要有VRML、 Java、QuickTime、Flash等等，但是這些技，但是這些技 術(shù)術(shù)大多大多需要需要插件支持插件支持或或特定的播放特定的播放格式才能格式才能 在客戶端實現(xiàn)漫游、人機交互等功能，圖像在客戶端實現(xiàn)漫游、人機交互等功能，圖像 的渲染能力也有限，這在損害用戶體驗的同的渲染能力也有限，這在損害用戶體驗的同 時也大大阻礙了全景技術(shù)的

2、進(jìn)一步時也大大阻礙了全景技術(shù)的進(jìn)一步發(fā)展發(fā)展。 研究現(xiàn)狀研究現(xiàn)狀 v隨著隨著Web標(biāo)準(zhǔn)化運動的發(fā)展，出現(xiàn)了一種跨標(biāo)準(zhǔn)化運動的發(fā)展，出現(xiàn)了一種跨 平臺、跨瀏覽器的技術(shù)：平臺、跨瀏覽器的技術(shù)：HTML5，它，它為開發(fā)為開發(fā) 者提供了一個者提供了一個更加更加開放、開放、完整完整的平臺，不必的平臺，不必 依賴第三方插件即可做出高級的圖像依賴第三方插件即可做出高級的圖像、動畫、動畫 以及過渡以及過渡效果效果，它它還提供了多線程還提供了多線程處理以及處理以及 更多的交互功能，易于實現(xiàn)大型程序的復(fù)雜更多的交互功能，易于實現(xiàn)大型程序的復(fù)雜 效果。效果。 HTML5HTML5 v采用采用HTML5技術(shù)來實現(xiàn)技術(shù)

3、來實現(xiàn)360度全景漫游系統(tǒng)度全景漫游系統(tǒng)， 可以改善可以改善傳統(tǒng)的全景傳統(tǒng)的全景漫游漫游技術(shù)技術(shù)的的插件支持插件支持、 內(nèi)存內(nèi)存占用率高、渲染效果有限、表現(xiàn)性能欠占用率高、渲染效果有限、表現(xiàn)性能欠 佳等問題佳等問題，也帶來很多新的內(nèi)容和特性。也帶來很多新的內(nèi)容和特性。 研究意義研究意義 全景漫游實現(xiàn)技術(shù)全景漫游實現(xiàn)技術(shù)功能功能開放性開放性穩(wěn)定性和執(zhí)行效率穩(wěn)定性和執(zhí)行效率平臺支持度平臺支持度流暢度流暢度 HTML5 HTML5不僅可以實現(xiàn)360 度全景漫游系統(tǒng)中的基本 功能，還具備自身的獨特 優(yōu)勢如語音搜索、離線操 作、本地存儲等。 HTML5是完全開放的， 有利于應(yīng)用的進(jìn)一步開發(fā) 和維護。 H

4、TML5不需要插件支持 即可實現(xiàn)復(fù)雜的交互效果， 結(jié)合其他技術(shù)實現(xiàn)的全景 系統(tǒng)僅需十幾兆的硬盤空 間，比較輕量級，加上多 線程的處理能力，系統(tǒng)穩(wěn) 定性和執(zhí)行效率提高。 HTML5是跨平臺的，為 開發(fā)移動平臺和PC兼容 的全景漫游產(chǎn)品提供可能。 HTML5實現(xiàn)360度全景漫 游時采用到WebGL技術(shù)， WebGL技術(shù)可以為 HTML5的canvas提供硬 件3D加速渲染，借助顯 卡在瀏覽器里顯示更流暢 的3D場景和模型。 Flash flash能實現(xiàn)傳統(tǒng)的360度 全景漫游中的功能，而涉 及到提高用戶體驗的一些 新興特性就顯得能力不足。 flash是相對封閉的，若加 入到系統(tǒng)中可能導(dǎo)致系統(tǒng) 的可

5、靠性及安全性降低。 flash技術(shù)實現(xiàn)的全景系統(tǒng) 一般需要占用幾百兆的硬 盤空間，flash插件也會占 用系統(tǒng)帶寬，效率比較低 下，而且容易導(dǎo)致系統(tǒng)崩 潰。 flash由于其封閉、私有、 能耗等問題一直不太受到 移動平臺的歡迎，在移動 平臺的開發(fā)也舉步維艱。 flash從版本10開始引入顯 卡硬件加速功能，但同時 也產(chǎn)生很多兼容性問題， 如flash播放綠屏、插件卡 死、顏色失真等。 與傳統(tǒng)與傳統(tǒng)flashflash技術(shù)實現(xiàn)的全景系統(tǒng)對比技術(shù)實現(xiàn)的全景系統(tǒng)對比 v系統(tǒng)主要以系統(tǒng)主要以HTML語言構(gòu)建框架，使用語言構(gòu)建框架，使用CSS 來控制界面整體效果，系統(tǒng)主要分為三部分：來控制界面整體效果，

6、系統(tǒng)主要分為三部分： 導(dǎo)航地圖、全景圖場景、導(dǎo)航條。導(dǎo)航地圖、全景圖場景、導(dǎo)航條。 研究過程研究過程 v鼠標(biāo)放上導(dǎo)航標(biāo)志，導(dǎo)航地圖可以由鼠標(biāo)控鼠標(biāo)放上導(dǎo)航標(biāo)志，導(dǎo)航地圖可以由鼠標(biāo)控 制滑入滑出，通過導(dǎo)航熱點地圖，用戶可以制滑入滑出，通過導(dǎo)航熱點地圖，用戶可以 切換到地圖中所示的不同切換到地圖中所示的不同場景場景。 導(dǎo)航地圖導(dǎo)航地圖 v用戶通過鼠標(biāo)可以對圖像進(jìn)行放大、縮小、用戶通過鼠標(biāo)可以對圖像進(jìn)行放大、縮小、 移動觀看等操作，實現(xiàn)水平移動觀看等操作，實現(xiàn)水平360度視角，垂直度視角，垂直 180度視角的度視角的環(huán)視環(huán)視。 v全景圖場景部分的實現(xiàn)主要全景圖場景部分的實現(xiàn)主要由由canvas以及以

7、及 WebGL技術(shù)的一個第三方圖形庫技術(shù)的一個第三方圖形庫three.js來來 完成完成。 全景漫游場景全景漫游場景 vJavaScript語言結(jié)合語言結(jié)合three.js內(nèi)置函數(shù)實現(xiàn)四內(nèi)置函數(shù)實現(xiàn)四 個鼠標(biāo)事件個鼠標(biāo)事件 （onDocumentMouseDown( event )、 onDocumentMouseMove( event )、 onDocumentMouseUp( event )、 onDocumentMouseWheel( event )）從而）從而 實現(xiàn)實現(xiàn)360全景中的旋轉(zhuǎn)、縮放等全景中的旋轉(zhuǎn)、縮放等功能功能。 鼠標(biāo)事件鼠標(biāo)事件 全景場景實現(xiàn)流程圖全景場景實現(xiàn)流程圖 v導(dǎo)

8、航導(dǎo)航菜單菜單部分部分主要具備以下功能主要具備以下功能： v鼠標(biāo)懸停到對應(yīng)的選項上該選項會被放大，鼠標(biāo)懸停到對應(yīng)的選項上該選項會被放大， 顯示對應(yīng)功能的顯示對應(yīng)功能的名稱名稱，該，該框架框架部分主要部分主要通過通過 JavaScript語言以及語言以及Jquery中中Interface組件組件 來來完成完成。 導(dǎo)航導(dǎo)航菜單菜單 v語音識別可以語音識別可以幫助用戶直接通過語音來搜索幫助用戶直接通過語音來搜索 內(nèi)容，省去了人工輸入的麻煩內(nèi)容，省去了人工輸入的麻煩，提高，提高了搜索了搜索 效率，對于一些場景很多的系統(tǒng)以及缺乏鍵效率，對于一些場景很多的系統(tǒng)以及缺乏鍵 盤支持的設(shè)備來講，此項功能的優(yōu)越性

9、就更盤支持的設(shè)備來講，此項功能的優(yōu)越性就更 加加明顯明顯。 v通過通過即可實現(xiàn)即可實現(xiàn)語音語音 識別識別。 語音識別語音識別 vHTML5提供了對離線應(yīng)用開發(fā)的支持，借助提供了對離線應(yīng)用開發(fā)的支持，借助 于該功能，在與因特網(wǎng)斷開的情況下，用戶于該功能，在與因特網(wǎng)斷開的情況下，用戶 也可以訪問相關(guān)站點和應(yīng)用，若取得與因特也可以訪問相關(guān)站點和應(yīng)用，若取得與因特 網(wǎng)的連接，會自動更新緩存數(shù)據(jù)網(wǎng)的連接，會自動更新緩存數(shù)據(jù)。 v目前目前，最新的主流瀏覽器中幾乎都已經(jīng)提供，最新的主流瀏覽器中幾乎都已經(jīng)提供 對對HTML5離線操作的支持，一些應(yīng)用如離線操作的支持，一些應(yīng)用如 Gmail，Zoho，Remem

10、ber The Milk， Word Press等都已經(jīng)提供相應(yīng)的離線操作。等都已經(jīng)提供相應(yīng)的離線操作。 離線離線存儲存儲 離線離線存儲存儲示例示例 Hi NIHAO! CACHE MANIFEST ex1.html 1.css 1.js v測試主要包括三測試主要包括三方面方面： v一、一、功能測試功能測試 v二、二、性能測試性能測試 v三、三、兼容性測試兼容性測試 系統(tǒng)測試系統(tǒng)測試 v功能性測試結(jié)果表明功能性測試結(jié)果表明系統(tǒng)基本可以實現(xiàn)各個模塊的系統(tǒng)基本可以實現(xiàn)各個模塊的 預(yù)定預(yù)定功能，具體如下：功能，具體如下： 1.通過鼠標(biāo)可以對圖像進(jìn)行放大、縮小、移動觀看等操作， 實現(xiàn)水平360度視角，

11、垂直180度視角的環(huán)視 2.鼠標(biāo)放上導(dǎo)航標(biāo)志，導(dǎo)航地圖可以由鼠標(biāo)控制滑入滑出， 通過導(dǎo)航熱點地圖，用戶可以切換到地圖中所示的不同場 景 3.導(dǎo)航菜單各項按鈕基本都可以正常運行，但是語音識別、 語音解說、離線操作等功能僅能夠在特定的瀏覽器上顯示。 功能測試功能測試 v性能測試主要包括系統(tǒng)的穩(wěn)定性，可靠性。性能測試主要包括系統(tǒng)的穩(wěn)定性，可靠性。 測試結(jié)果表明，程序在整體上具有較好的性測試結(jié)果表明，程序在整體上具有較好的性 能，但是在一些細(xì)節(jié)上，還不是太成熟完善，能，但是在一些細(xì)節(jié)上，還不是太成熟完善， 主要表現(xiàn)在：主要表現(xiàn)在： 場景漫游過程中可能會出現(xiàn)圖片變形場景漫游過程中可能會出現(xiàn)圖片變形 鼠標(biāo)控制放大縮小時邊界情況處理的不太好鼠標(biāo)控制放大縮小時邊界情況處理的不太好 異常處理機制還不太完善異常處理機制還不太完善 性能測試性能測試 瀏覽器名稱瀏覽器名稱兼容性兼容性 IE9+，除語音識別、離線操作外，其他 功能均正常 Firefox3.0+，除語音識別外，其他功能均正 常 Safari3.0+，除語音識別外，其他功能均正 常 Chrome3.0+，各項功能均正常 Opera10.0+，除語音識別、離線操作外，其 他功能均