基于 HTML5 的 360 度全景漫游技术研究

基于 HTML5 的 360 度全景漫游技术研究

演讲人：刘海娜指导老师：林予松

研究现状研究意义研究过程研究结果下一步工作

主要内容介绍

传统的 360 度全景漫游技术主要有 VRML 、Java 、 QuickTime 、 Flash 等，但是这些技术大多需要插件支持或特定的播放格式才能在客户端实现漫游、人机交互等功能，图像的渲染能力也有限，这在损害用户体验的同时也大大阻碍了全景技术的进一步发展。

研究现状

随着 Web 标准化运动的发展，出现了一种跨平台、跨浏览器的技术： HTML5 ，它为开发者提供了一个更加开放、完整的平台，不必依赖第三方插件即可做出高级的图像、动画以及过渡效果，它还提供了多线程处理以及更多的交互功能，易于实现大型程序的复杂效果。

HTML5

采用 HTML5 技术来实现 360 度全景漫游系统，可以改善传统的全景漫游技术的插件支持、内存占用率高、渲染效果有限、表现性能欠佳等问题，也带来很多新的内容和特性。

研究意义

全景漫游实现技术功能开放性稳定性和执行效率平台支持度流畅度

HTML5

HTML5不仅可以实现360度全景漫游系统中的基本功能，还具备自身的独特优势如语音搜索、离线操作、本地存储等。

HTML5是完全开放的，有利于应用的进一步开发

和维护。

HTML5不需要插件支持即可实现复杂的交互效果，结合其他技术实现的全景系统仅需十几兆的硬盘空间，比较轻量级，加上多线程的处理能力，系统稳定性和执行效率提高。

HTML5是跨平台的，为开发移动平台和 PC兼容的全景漫游产品提供可能。

HTML5实现 360度全景漫游时采用到WebGL技术， WebGL技术可以为HTML5的 canvas提供硬件 3D加速渲染，借助显卡在浏览器里显示更流畅的 3D场景和模型。

Flash

flash能实现传统的 360

度全景漫游中的功能，而涉及到提高用户体验的一些新兴特性就显得能力不

足。

flash是相对封闭的，若加入到系统中可能导致系统的可靠性及安全性降低。

flash技术实现的全景系统一般需要占用几百兆的硬盘空间， flash插件也会占用系统带宽，效率比较低下，而且容易导致系

统崩溃。

flash由于其封闭、私有、能耗等问题一直不太受到移动平台的欢迎，在移动平台的开发也举步维艰。

flash 从版本 10 开始引入显卡硬件加速功能，但同时也产生很多兼容性问题，如 flash 播放绿屏、插件

卡死、颜色失真等。

与传统 flash 技术实现的全景系统对比

系统主要以 HTML 语言构建框架，使用 CSS来控制界面整体效果，系统主要分为三部分：导航地图、全景图场景、导航条。

研究过程

鼠标放上导航标志，导航地图可以由鼠标控制滑入滑出，通过导航热点地图，用户可以切换到地图中所示的不同场景。

导航地图

用户通过鼠标可以对图像进行放大、缩小、移动观看等操作，实现水平 360 度视角，垂直 180 度视角的环视。

全景图场景部分的实现主要由 canvas 以及WebGL 技术的一个第三方图形库 three.js 来完成。

全景漫游场景

JavaScript 语言结合 three.js 内置函数实现四个鼠标事件（ onDocumentMouseDown( event ) 、 onDocumentMouseMove( event ) 、 onDocumentMouseUp( event ) 、 onDocumentMouseWheel( event ) ）从而实现 360 全景中的旋转、缩放等功能。

鼠标事件

全景场景实现流程图

导航菜单部分主要具备以下功能：

鼠标悬停到对应的选项上该选项会被放大，显示对应功能的名称，该框架部分主要通过JavaScript 语言以及 Jquery 中 Interface组件来完成。

导航菜单

语音识别可以帮助用户直接通过语音来搜索内容，省去了人工输入的麻烦，提高了搜索效率，对于一些场景很多的系统以及缺乏键盘支持的设备来讲，此项功能的优越性就更加明显。

通过 <input type=“text” placeholder=“想搜索的内容” x-webkit-speech> 即可实现语音识别。

语音识别

HTML5 提供了对离线应用开发的支持，借助于该功能，在与因特网断开的情况下，用户也可以访问相关站点和应用，若取得与因特网的连接，会自动更新缓存数据。

目前，最新的主流浏览器中几乎都已经提供对 HTML5离线操作的支持，一些应用如Gmail ， Zoho ， Remember The Milk ，Word Press 等都已经提供相应的离线操作。

离线存储

离线存储示例 <!—ex1.html --> <!DOCTYPE HTML> <html> <head> <title>Hi</title> <script src=“1.js"></script> <link rel="stylesheet" href=“1.css"> </head> <body> <p>NIHAO! </p> </body> </html>

CACHE MANIFEST ex1.html 1.css 1.js

<html manifest=“1.manifest">

测试主要包括三方面：一、功能测试二、性能测试三、兼容性测试

系统测试

功能性测试结果表明系统基本可以实现各个模块的预定功能，具体如下： 1.通过鼠标可以对图像进行放大、缩小、移动观看等操作，实现水平 360度视角，垂直 180度视角的环视

2.鼠标放上导航标志，导航地图可以由鼠标控制滑入滑出，通过导航热点地图，用户可以切换到地图中所示的不同场景

3.导航菜单各项按钮基本都可以正常运行，但是语音识别、语音解说、离线操作等功能仅能够在特定的浏览器上显示。

功能测试

性能测试主要包括系统的稳定性，可靠性。测试结果表明，程序在整体上具有较好的性能，但是在一些细节上，还不是太成熟完善，主要表现在：• 场景漫游过程中可能会出现图片变形• 鼠标控制放大缩小时边界情况处理的不太好• 异常处理机制还不太完善

性能测试

浏览器名称兼容性

IE 9+，除语音识别、离线操作外，其他功能均正常

Firefox 3.0+，除语音识别外，其他功能均正常

Safari 3.0+，除语音识别外，其他功能均正常

Chrome 3.0+，各项功能均正常

Opera 10.0+，除语音识别、离线操作外，其他功能均正常

兼容性测试

下一步的工作除了解决程序中存在的问题外，会对 360 度全景漫游进行进一步的优化：扩充功能添加异常处理机制尝试其它 3D 引擎提高效率

争取更大程度上提高用户体验。

下一步工作

基于 HTML5 的 360 度全景漫游技术研究

Documents

Transcript of 基于 HTML5 的 360 度全景漫游技术研究

基于 HTML5 的 360 度 全景漫游技术 研究

Documents

Transcript of 基于 HTML5 的 360 度 全景漫游技术 研究

基于 HTML5 的 360 度全景漫游技术研究

Transcript of 基于 HTML5 的 360 度全景漫游技术研究