【摘要】與基于三維建模的漫游系統(tǒng)相比，基于真實(shí)圖像的全景漫游系統(tǒng)由于采用真實(shí)的場景圖片，具有數(shù)據(jù)量小、開發(fā)周期短、場景逼真等優(yōu)點(diǎn)而在旅游、醫(yī)療、軍事訓(xùn)練等領(lǐng)域得到越來越廣泛的應(yīng)用。全景漫游系統(tǒng)制作平臺(tái)能夠?qū)⑴臄z的全景圖像經(jīng)過一系列的數(shù)學(xué)計(jì)算進(jìn)行投影顯示，控制實(shí)現(xiàn)不同場景間的自主漫游，結(jié)合計(jì)算機(jī)多媒體元素進(jìn)行展示，真實(shí)地還原、定位場景，增強(qiáng)用戶的交互性及身臨其境的體驗(yàn)感。HTML5是瀏覽器技術(shù)發(fā)展的趨勢，它使網(wǎng)頁設(shè)計(jì)變得更加集成化.本文通過借鑒相關(guān)的開源HTML5解決方案，在傳統(tǒng)的全景漫游制作平臺(tái)基礎(chǔ)上設(shè)計(jì)研發(fā)出一套能快速制作全景漫游系統(tǒng)的平臺(tái)。

【關(guān)鍵詞】虛擬漫游；全景圖像；HTML5技術(shù)

Application of HTML5 Technology in Large - scale Scenes Roaming System

Liang Zhongyi

Anhui Broadcasting Movie And Television College，Hefei City，Anhui Province，230000

Abstract：Compared with the three-dimensional model-based roaming system， the panoramic roaming system based on real image is more suitable for tourism， medical treatment， military training and so on because of its real scene picture， small amount of data， short development period and realistic scene. More and more applications. The Panorama Roaming System is capable of displaying panoramic images by a series of mathematical calculations. It can realize autonomous roaming between different scenes， combine with computer multimedia elements to display， realistically restore， locate scenes and enhance user interaction. Immersive sense of experience. With the help of panorama roaming system， ordinary users can make their own virtual roaming system quickly and conveniently according to their own industry demand. It is of great significance to the promotion of panoramic roaming technology in various industries.

Key words：Virtual tour； panorama image； HTML5 technology

1 三維場景漫游系統(tǒng)的發(fā)展概述

目前開發(fā)三維虛擬漫游平臺(tái)案例分為校園景色、城市景色、旅游景觀和數(shù)碼產(chǎn)品四個(gè)方面，其中數(shù)碼產(chǎn)品的虛擬全景技術(shù)是運(yùn)用技術(shù)更為先進(jìn)的內(nèi)景技術(shù)創(chuàng)作的，其余三項(xiàng)是運(yùn)用虛擬全景外全景技術(shù)制作的，通過兩種方法的應(yīng)用，可以很清楚的了解虛擬全景漫游系統(tǒng)的廣闊的應(yīng)用。采用的虛擬漫游系統(tǒng)技術(shù)起點(diǎn)高，成本低廉。技術(shù)方面采用了全景拍攝，JAVA開發(fā)，PhotoShop照片拼合，F(xiàn)lash交互控制，動(dòng)態(tài)網(wǎng)站開發(fā)等多項(xiàng)高端的計(jì)算機(jī)圖象綜合處理技術(shù)作品的導(dǎo)覽性、交互操作性強(qiáng)。可與flash技術(shù)以及其它多媒體技術(shù)實(shí)現(xiàn)無縫結(jié)合。而投入方面則開發(fā)周期短，開發(fā)成本相對(duì)較低。與傳統(tǒng)的三維建模渲染相比我們采用的拍攝制作周期更短，成本也相對(duì)較低。攝影的三維全景在發(fā)布過程中可以更具需求不同，靈活控制數(shù)據(jù)量的大小，而豐富的播放格式更適合網(wǎng)絡(luò)傳播。以HTML5技術(shù)為載體的全景技術(shù)制作虛擬漫游系統(tǒng)，具有復(fù)合的計(jì)算機(jī)技術(shù)含量，是目前計(jì)算機(jī)行業(yè)最熱點(diǎn)的應(yīng)用領(lǐng)域之一。

2HTML5及相關(guān)技術(shù)的發(fā)展

2.1 HTML5簡介

HTML5是用于在萬維網(wǎng)上構(gòu)造和呈現(xiàn)內(nèi)容的標(biāo)記語言。它是HTML標(biāo)準(zhǔn)的第五個(gè)和當(dāng)前版本，它由萬維網(wǎng)聯(lián)盟（W3C）在發(fā)布，以支持最新的多媒體，同時(shí)保持它易于人類可讀性，并通過計(jì)算機(jī)和設(shè)備瀏覽器，解析器等。HTML5包括詳細(xì)的處理模型，以鼓勵(lì)更多的互操作實(shí)現(xiàn)；它擴(kuò)展，改進(jìn)和合理化可用于文檔的標(biāo)記，并且為復(fù)雜的web應(yīng)用程序引入了標(biāo)記和應(yīng)用程序編程接口（API）。出于同樣的原因，HTML5也是跨平臺(tái)移動(dòng)應(yīng)用的候選者，因?yàn)樗耸褂玫凸脑O(shè)備設(shè)計(jì)的功能。它包括許多新的句法特征。為了本地包括和處理多媒體和圖形內(nèi)容，添加了新的，

2.3 CSS3技術(shù)分析

CSS是用于描述以標(biāo)記語言編寫的文檔的表示的樣式表語言，雖然最常用于設(shè)置以HTML和XHTML編寫的網(wǎng)頁和用戶界面的視覺風(fēng)格，但該語言可以應(yīng)用于任何XML文檔，包括純XML，SVG和XUL，并且適用于在語音或其他媒體。除了HTML和JavaScript之外，CSS是大多數(shù)網(wǎng)站使用的基礎(chǔ)技術(shù)，用于創(chuàng)建具有視覺吸引力的網(wǎng)頁，Web應(yīng)用程序的用戶界面和許多移動(dòng)應(yīng)用程序的用戶界面。CSS的設(shè)計(jì)主要是為了使文檔內(nèi)容與文檔表示分離，包括布局，顏色和字體等方面。這種分離可以改進(jìn)內(nèi)容可訪問性，在表示特性的規(guī)范中提供更多的靈活性和控制，通過在單獨(dú)的.css文件中指定相關(guān)的CSS來使多個(gè)HTML頁面共享格式化，并且減少結(jié)構(gòu)內(nèi)容中的復(fù)雜性和重復(fù)。

2.4 JavaScript技術(shù)分析

JavaScript是一種高級(jí)，動(dòng)態(tài)，無類型和解釋的編程語言，它已在ECMAScript語言規(guī)范中標(biāo)準(zhǔn)化。除了HTML和CSS，JavaScript是萬維網(wǎng)內(nèi)容生產(chǎn)的三個(gè)核心技術(shù)之一，大多數(shù)網(wǎng)站都使用它，Web瀏覽器都支持它而不需要插件。JavaScript是基于原型的第一類函數(shù)，使其成為一種多范式語言，支持面向?qū)ο?，命令式和函?shù)式編程風(fēng)格。它有一個(gè)用于處理文本，數(shù)組，日期和正則表達(dá)式的API，但不包括任何I / O，例如網(wǎng)絡(luò)，存儲(chǔ)或圖形設(shè)施，在嵌入它們的主機(jī)環(huán)境中依賴這些。

3基于HTML5技術(shù)的場景漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

HTML5等建模工具建立了良好的復(fù)雜模型，可以使用各種文件格式進(jìn)行存儲(chǔ)?？紤]到WebGL提供了一個(gè)由多邊形方法構(gòu)造的基本三維模型，它存儲(chǔ)在三角形網(wǎng)絡(luò)中。 VR-BWS軟件部分是基于面向?qū)ο蟮募夹g(shù)。三維圖形類，呈現(xiàn)場景類別的基本屬性，如：顏色類，紋理類，材質(zhì)類，對(duì)象面光源Dengjun方法使用Open GL功能包，軟件，各組該模塊使用OCX控件和COM接口作為標(biāo)準(zhǔn)。這可以大大節(jié)省開發(fā)時(shí)間，也提高了渲染速度。

每個(gè)對(duì)象在虛擬環(huán)境中包含用于存儲(chǔ)虛擬環(huán)境的兩個(gè)區(qū)域的形狀和外觀，模型文件的幾何模型應(yīng)該能夠提供這兩種信息。同時(shí)滿足虛擬建模技術(shù)的三個(gè)常用指標(biāo) - 交互顯示能力，交互操作能力，輕松構(gòu)建虛擬對(duì)象模型需求的能力。Open GL很容易在各種變換，著色，光，紋理，交互和動(dòng)畫中實(shí)現(xiàn)模型，但它只能提供建模函數(shù)的基本幾何元素，使得建模復(fù)雜模型的相對(duì)困難。 3DMAX如三維圖形建模工具可以方便建立各種特殊物理模型的復(fù)雜，但是難以進(jìn)行過程控制。因此，在3DMAX工具等復(fù)雜模型中建立了良好的Open GL，實(shí)現(xiàn)了控制和轉(zhuǎn)換他們的方便。

虛擬現(xiàn)實(shí)的最重要的特征是在控制手感動(dòng)態(tài)下的場景中的隨機(jī)變化中的人類交互。并提高了顯示性能的技術(shù)，包括硬件和軟件方面。在硬件方面，采用高速DSP芯片進(jìn)行實(shí)時(shí)數(shù)據(jù)采集和傳輸；軟件建立了多線程，非阻塞漫游框架，并使用以下方法提高了場景的屏幕刷新率。

（1）雙緩沖機(jī)制。還顯示建立兩個(gè)視頻緩沖區(qū)，一個(gè)用于后臺(tái)刷新屏幕，一個(gè)用于前臺(tái)繪制。當(dāng)需要更新時(shí)，切換最初用于刷新緩沖區(qū)的兩個(gè)緩沖區(qū)用于映射新幀，而原始緩沖區(qū)用于繪制顯示以進(jìn)行刷新。場景越復(fù)雜，使用雙緩沖機(jī)制的優(yōu)越性越好，反映時(shí)間越長。而雙緩沖機(jī)制可以解決屏幕顯示過程中嚴(yán)重的“閃屏”現(xiàn)象。

（2）LOD（細(xì)節(jié)水平）細(xì)節(jié)的技術(shù)水平。根據(jù)兩種不同類型的判斷來選擇不同模型的細(xì)節(jié)水平：一種是從視點(diǎn)距離具有高精度的物體繪制的距離遠(yuǎn)的物體以較低精度繪制的距離；雙速設(shè)置由自行車不同的閾值，根據(jù)閾值模型選擇不同的精度，然后平滑過渡技術(shù)顯示。

（3）技術(shù)實(shí)例。場景通常需要相同數(shù)量的虛擬對(duì)象，例如完全相同的樹。經(jīng)常需要這樣的特殊體，使用Open GL庫的顯示列表函數(shù)，將分別定義為單獨(dú)的顯示列表，預(yù)先生成的三維實(shí)體；然后通過其他位置的特殊體的幾何變換獲得。在圖形顯示中，只需調(diào)用所需的顯示列表即可顯示相應(yīng)的三維立體，大幅節(jié)省內(nèi)存，提高圖形顯示速度。

（4）預(yù)處理技術(shù)。在一些復(fù)雜的場景模型中，例如沿著道路的高層建筑物等，在預(yù)處理階段，僅僅計(jì)算在場景內(nèi)顯示在觀看者中并存儲(chǔ)在動(dòng)態(tài)顯示中的視場消除了對(duì)不可見的對(duì)象和由圖形之外的空間對(duì)象的觀察定義的下降，從而在測試和計(jì)算時(shí)大大降低動(dòng)態(tài)顯示可見性。

（5）代替使用二維紋理的三維模型。漫游場景中非常復(fù)雜的物體的細(xì)節(jié)，例如斜坡上的植被，如果三維模型需要很多多邊形，但實(shí)際動(dòng)態(tài)顯示時(shí)不需要顯示它們非常精確，因此使用二維紋理而不是三維模型。該方法是復(fù)雜和特殊的身體圖像粘貼在一個(gè)平面上并放置在場景中，在三維復(fù)雜場景中實(shí)時(shí)顯示，使法線平面總是指向觀察點(diǎn)。因此，這些復(fù)雜物體的形成與觀察到的旋轉(zhuǎn)方向的變化，改善了現(xiàn)場顯示的實(shí)時(shí)性。

三維顯示技術(shù)作為虛擬現(xiàn)實(shí)的關(guān)鍵技術(shù)之一。為了實(shí)現(xiàn)三維景觀立體顯示，首先必須與立體圖像對(duì)的三維特征一致。關(guān)于上一代的電影可以遵循傳統(tǒng)的單一網(wǎng)格生成方法生成的三維圖形，即首先計(jì)算關(guān)于矢量的視點(diǎn)，并分離視點(diǎn)和第一顏色轉(zhuǎn)換處理，可以獲得左眼圖像。然而，作為關(guān)于強(qiáng)圖像的相關(guān)性的膜，對(duì)象通常僅僅是視差d，而其顏色和亮度值的差異非常小，可以利用它來實(shí)現(xiàn)三維片得到快速算法。

參考文獻(xiàn)：

[1] 由延軍. 基于序關(guān)系分析的視景仿真評(píng)估研究[J]. 電子世界. 2014（03）

[2] 阮奕熹. 多通道技術(shù)在視景仿真中的應(yīng)用[J]. 信息與電腦（理論版）. 2010（06）

[3] 郭璽，薛青，顏國明，張申. 視景仿真中車輛在不同路面上運(yùn)動(dòng)狀態(tài)的研究[J]. 系統(tǒng)仿真學(xué)報(bào). 2016（S1）

[4] 鄒臘梅，楊衛(wèi)東. “視景仿真”課程教學(xué)設(shè)計(jì)方案[J]. 電氣電子教學(xué)學(xué)報(bào). 2014（05）

[5] 梁洪濤，康鳳舉，翟楠楠. 基于突變理論與梯形模糊數(shù)的海洋視景仿真逼真度綜合評(píng)定[J]. 江蘇大學(xué)學(xué)報(bào)（自然科學(xué)版）. 2014（01）

作者簡介：梁中義（1978.12-） ，男，漢，安徽省合肥人，講師，碩士研究生，研究方向：計(jì)算機(jī)應(yīng)用。

基金項(xiàng)目：安徽省自然科學(xué)研究項(xiàng)目。