HTML5技術在大型場景漫游系統的應用探究

【摘要】與基于三維建模的漫游系統相比，基于真實圖像的全景漫游系統由于采用真實的場景圖片，具有數據量小、開發周期短、場景逼真等優點而在旅游、醫療、軍事訓練等領域得到越來越廣泛的應用。全景漫游系統制作平臺能夠將拍攝的全景圖像經過一系列的數學計算進行投影顯示，控制實現不同場景間的自主漫游，結合計算機多媒體元素進行展示，真實地還原、定位場景，增強用戶的交互性及身臨其境的體驗感。HTML5是瀏覽器技術發展的趨勢，它使網頁設計變得更加集成化.本文通過借鑒相關的開源HTML5解決方案，在傳統的全景漫游制作平臺基礎上設計研發出一套能快速制作全景漫游系統的平臺。

【關鍵詞】虛擬漫游；全景圖像；HTML5技術

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 三維場景漫游系統的發展概述

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

2HTML5及相關技術的發展

2.1 HTML5簡介

HTML5是用于在萬維網上構造和呈現內容的標記語言。它是HTML標準的第五個和當前版本，它由萬維網聯盟（W3C）在發布，以支持最新的多媒體，同時保持它易于人類可讀性，并通過計算機和設備瀏覽器，解析器等。HTML5包括詳細的處理模型，以鼓勵更多的互操作實現；它擴展，改進和合理化可用于文檔的標記，并且為復雜的web應用程序引入了標記和應用程序編程接口（API）。出于同樣的原因，HTML5也是跨平臺移動應用的候選者，因為它包含了使用低功耗設備設計的功能。它包括許多新的句法特征。為了本地包括和處理多媒體和圖形內容，添加了新的，

2.3 CSS3技術分析

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

2.4 JavaScript技術分析

JavaScript是一種高級，動態，無類型和解釋的編程語言，它已在ECMAScript語言規范中標準化。除了HTML和CSS，JavaScript是萬維網內容生產的三個核心技術之一，大多數網站都使用它，Web瀏覽器都支持它而不需要插件。JavaScript是基于原型的第一類函數，使其成為一種多范式語言，支持面向對象，命令式和函數式編程風格。它有一個用于處理文本，數組，日期和正則表達式的API，但不包括任何I / O，例如網絡，存儲或圖形設施，在嵌入它們的主機環境中依賴這些。

3基于HTML5技術的場景漫游系統的設計與實現

HTML5等建模工具建立了良好的復雜模型，可以使用各種文件格式進行存儲。考慮到WebGL提供了一個由多邊形方法構造的基本三維模型，它存儲在三角形網絡中。 VR-BWS軟件部分是基于面向對象的技術。三維圖形類，呈現場景類別的基本屬性，如：顏色類，紋理類，材質類，對象面光源Dengjun方法使用Open GL功能包，軟件，各組該模塊使用OCX控件和COM接口作為標準。這可以大大節省開發時間，也提高了渲染速度。

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

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

（1）雙緩沖機制。還顯示建立兩個視頻緩沖區，一個用于后臺刷新屏幕，一個用于前臺繪制。當需要更新時，切換最初用于刷新緩沖區的兩個緩沖區用于映射新幀，而原始緩沖區用于繪制顯示以進行刷新。場景越復雜，使用雙緩沖機制的優越性越好，反映時間越長。而雙緩沖機制可以解決屏幕顯示過程中嚴重的“閃屏”現象。

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

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

（4）預處理技術。在一些復雜的場景模型中，例如沿著道路的高層建筑物等，在預處理階段，僅僅計算在場景內顯示在觀看者中并存儲在動態顯示中的視場消除了對不可見的對象和由圖形之外的空間對象的觀察定義的下降，從而在測試和計算時大大降低動態顯示可見性。

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

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

參考文獻：

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

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

[3] 郭璽，薛青，顏國明，張申. 視景仿真中車輛在不同路面上運動狀態的研究[J]. 系統仿真學報. 2016（S1）

[4] 鄒臘梅，楊衛東. “視景仿真”課程教學設計方案[J]. 電氣電子教學學報. 2014（05）

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

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

基金項目：安徽省自然科學研究項目。