摘 要： 全景圖是近年出現的一種新的交互式的虛擬場景表示方式，可以用相應的瀏覽器實現虛擬場景的漫游，具有很好的真實感和沉浸感。詳細介紹了一種基于HTML5的全景圖瀏覽器的實現原理，并給出了關鍵的HTML5代碼。最終取得了良好的展示效果。
關鍵詞： 全景圖；展示；HTML5
全景圖(Panorama)即用相機360°拍攝一組照片，然后用專業軟件拼接成一個全景圖像，通過計算機技術實現全方位互動式觀看的真實場景還原展示方式。Apple公司推出的QuickTime VR第一次向大眾展示了全景圖像技術的視覺魅力。該系統采用與傳統基于圖形的建模過程截然不同的思路，利用圖像或連續的視頻為原始數據，經過處理形成全景圖像，然后通過合適的空間模型將多幅圖像組織成虛擬全景空間。近年來，基于全景圖像的虛擬現實技術也得到了迅速發展，被廣泛用于數字博物館、虛擬旅游、房地產展示等虛擬漫游應用領域[1]。
全景圖的制作流程包括全景圖像采集、圖像拼接以及全景圖展示瀏覽3個步驟。目前，拼接完成后的全景圖展示瀏覽通常利用特殊的播放軟件(如Java、Quicktime、Flash)來體驗它所提供的虛擬環境，若要發布到Internet，則需要在瀏覽器中加入這些程序的Plug-in程序[1-2]。但是以Plug-in形式運行的這些程序，存在嚴重的安全隱患和性能不佳等缺點。
HTML5是最新的Web標準，具有很多令人激動的新特性，其中用于繪畫的Canvas元素為網頁繪圖及圖像處理帶來了很大的便捷。HTML5于2008年公布了一個草案，目前尚處于不斷完善階段。雖然速度緩慢，但對于互聯網Web開發標準來說是一個巨大的飛躍。HTML5并非僅僅用于表示Web內容，在此平臺上，視頻、音頻、圖像、動畫以及與設備的交互都將被標準化，解決了HTML4在Web應用功能上的欠缺。HTML5擁有全新的、更合理的tag，多媒體對象不在其他對象和embedtag中，而是有獨立的音/視頻tag，使Web向富媒體趨勢發展；HTML5中的Canvas可以脫離Flash和Silverlight、Java Applet插件提供富動畫，直接在瀏覽器顯示圖形或動畫；HTML5提供了API接口，可以實現瀏覽器內編輯、拖放以及各種圖形用戶界面的能力；HTML5將使用CSS來呈現內容。隨著HTML5的愈加成熟，目前新版本的瀏覽器如 Chrome、Firefox、Safari、Internet Explorer以及 Opera都已經支持了HTML5的某些特性，甚至現在的智能終端上的瀏覽器如UC瀏覽器、OperaHD等也開始支持HTML5[3-4]。
1 全景圖瀏覽程序的設計思路
本文將采用HTML5程序實現全景圖的瀏覽，直接嵌入到網頁中，通過Web方式供用戶瀏覽。設計過程分為以下3個步驟：
(1)獲取數碼照片。在場景中央將數碼相機放于三角架上，調節三角架上的兩個水平儀，使相機轉動360°時大致保持在同一水平面上，每旋轉一定角度拍攝一張照片，共拍攝15～20張照片。如果使用魚眼鏡頭拍照，則只需要5張。圖1所示為在某會議室內獲取的照片。
(2)拼接全景圖。將步驟(1)獲取的照片導入到專業全景圖拼接工具PTGui中，生成一幅全景圖，如圖2所示，具體步驟參考幫助文檔。再使用Pano2VR轉換為6張立方體面片，圖3所示分別是后、右、前、左、上、下方向的圖片。
(3)全景圖展示。利用文本編輯器工具編寫相應的展示全景圖的js程序，嵌入到網頁中，效果截圖見圖4，程序的關鍵代碼見下一節。
2 全景瀏覽器的HTML5實現
Three.js是著名的輕量級Javascript 3D引擎，基于HTML5開發，可用于創建各種三維場景，包括了攝影機、光影、風格、材質等各種對象。使開發者可以輕松地開發復雜的三維場景。AlteredQualia是Three.js的主要代碼貢獻者之一。本文將利用Three.js來實現對全景圖的展示。
(1)引用Three.js。
<script src="./js/Three.js"></script>
(2)創建場景、攝像機、畫布等基礎元素，部分代碼如下：
var container, mesh;
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 75,
window.innerWidth / window.innerHeight, 1, 1100 );
scene = new THREE.Scene();
scene.add( camera );
texture_placeholder = document.createElement( 'canvas' );
texture_placeholder.width = 128;
texture_placeholder.height = 128;
var context = texture_placeholder.getContext( '2d' );
context.fillStyle = 'rgb( 200, 200, 200 )';
context.fillRect( 0, 0, texture_placeholder.width,
texture_placeholder.height );
(3)創建立方體網格模型、渲染器。并把全景圖片加載到網格模型上，然后再把網格模型放到場景中。實現了渲染函數，當鼠標等事件觸發后，就要調用這個函數來調整攝像機和渲染場景。
var materials = [
loadTexture( 'px.jpg' ), // right
loadTexture( 'nx.jpg' ), // left
loadTexture( 'py.jpg' ), // top
loadTexture( 'ny.jpg' ), // bottom
loadTexture( 'pz.jpg' ), // back
loadTexture( 'nz.jpg' ) // front
];
mesh = new THREE.Mesh(new THREE.CubeGeometry
(300, 300, 300, 7, 7, 7, materials),
new THREE.MeshFaceMaterial() );
mesh.scale.x = - 1;
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement);
function loadTexture( path ) {
var texture = new THREE.Texture(texture_placeholder);
var material = new THREE.MeshBasicMaterial
( { map: texture, overdraw: true } );
var image = new Image();
image.onload = function () {
texture.needsUpdate = true;
material.map.image = this;
render();
};
image.src = path;
return material;
}
function render() {
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = ( 90 - lat ) * Math.PI / 180;
theta = lon * Math.PI / 180;
target.x = 500 * Math.sin( phi ) * Math.cos(theta);
target.y = 500 * Math.cos( phi );
target.z = 500 * Math.sin( phi ) * Math.sin(theta);
camera.lookAt( target );
renderer.render( scene, camera );
}
(4)添加鼠標操控事件。程序代碼如下：
document.addEventListener( 'mousedown',
onDocumentMouseDown, false );
document.addEventListener( 'mousemove',
onDocumentMouseMove, false );
document.addEventListener( 'mouseup',
onDocumentMouseUp, false );
function onDocumentMouseDown( event ) {
event.preventDefault();
isUserInteracting = true;
onPointerDownPointerX = event.clientX;
onPointerDownPointerY = event.clientY;
onPointerDownLon = lon;
onPointerDownLat = lat;
}
function onDocumentMouseMove( event ) {
if ( isUserInteracting ) {
lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
lat = ( event.clientY - onPointerDownPointerY )
* 0.1 + onPointerDownLat;
render();
}
}
function onDocumentMouseUp( event ) {
isUserInteracting = false;
render();
}
本文介紹了HTML5和基于HTML5的Three.js 3D引擎，提出了基于HTML5進行全景圖像展示的設計思路及具體實現。實踐證明，該方法展示交互效果良好。HTML5作為下一代HTML標準，將會帶來更多的驚喜。
參考文獻
[1] 鄧杏杏，朱大明，楊袁聰．基于全景圖的虛擬現實系統研究與探討[J]．地礦測繪，2009，25(1)：26-28．
[2] 宋利，周源華，周軍.一種全景圖瀏覽器的JAVA實現算法[J].計算機應用與軟件，2003，20(12)：1-2.
[3] SHWETANK D.Taking your Web apps offline：a tale of Web storage，application cache and Web SQL[EB/OL]. (2011-03-22).http：//dev.opera.corn/article/view/takingyou-Web-apps-offline- Web-Storage-appache-Websql/.
[4] CHRIS M，BRUCE L.New structural elements in HTML5 [EB/OL].(2010-12-21)[2011-04-15].http：//dev.opera.com/artic1es/view/new-structural-elements-in.html5/.