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

Download Report

Transcript 基于HTML5的360度全景漫游技术研究演讲人 

基于HTML5的360度全
景漫游技术研究
 演讲人：刘海娜
指导老师：林予松
主要内容介绍
研究现状
研究意义
研究过程
研究结果
下一步工作
研究现状
传统的360度全景漫游技术主要有VRML、
Java、QuickTime、Flash等，但是这些技
术大多需要插件支持或特定的播放格式才能
在客户端实现漫游、人机交互等功能，图像
的渲染能力也有限，这在损害用户体验的同
时也大大阻碍了全景技术的进一步发展。
HTML5
随着Web标准化运动的发展，出现了一种跨
平台、跨浏览器的技术：HTML5，它为开发
者提供了一个更加开放、完整的平台，不必
依赖第三方插件即可做出高级的图像、动画
以及过渡效果，它还提供了多线程处理以及
更多的交互功能，易于实现大型程序的复杂
效果。
研究意义
采用HTML5技术来实现360度全景漫游系统，
可以改善传统的全景漫游技术的插件支持、
内存占用率高、渲染效果有限、表现性能欠
佳等问题，也带来很多新的内容和特性。
与传统flash技术实现的全景系统对比
全景漫游实现技术
功能
HTML5
HTML5不仅可以实现360
度全景漫游系统中的基本
功能，还具备自身的独特
优势如语音搜索、离线操
作、本地存储等。
Flash
开放性
稳定性和执行效率
平台支持度
流畅度
HTML5不需要插件支持
HTML5实现360度全景漫
游时采用到WebGL技术，
即可实现复杂的交互效果，
HTML5是完全开放的， 结合其他技术实现的全景
HTML5是跨平台的，为
WebGL技术可以为
开发移动平台和PC兼容
HTML5的canvas提供硬
有利于应用的进一步开发 系统仅需十几兆的硬盘空
和维护。
间，比较轻量级，加上多 的全景漫游产品提供可能。 件3D加速渲染，借助显
线程的处理能力，系统稳
卡在浏览器里显示更流畅
定性和执行效率提高。
的3D场景和模型。
flash能实现传统的360度
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 -->
CACHE MANIFEST
<!DOCTYPE HTML>
ex1.html
<html>
1.css
<html manifest=“1.manifest">
<head>
1.js
<title>Hi</title>
<script
src=“1.js"></script>
<link rel="stylesheet"
href=“1.css">
</head>
<body>
<p>NIHAO! </p>
</body>
</html>
系统测试
测试主要包括三方面：
一、功能测试
二、性能测试
三、兼容性测试
功能测试
功能性测试结果表明系统基本可以实现各个模块的
预定功能，具体如下：
 1.通过鼠标可以对图像进行放大、缩小、移动观看等操作，
实现水平360度视角，垂直180度视角的环视
 2.鼠标放上导航标志，导航地图可以由鼠标控制滑入滑出，
通过导航热点地图，用户可以切换到地图中所示的不同场
景
 3.导航菜单各项按钮基本都可以正常运行，但是语音识别、
语音解说、离线操作等功能仅能够在特定的浏览器上显示。
性能测试
性能测试主要包括系统的稳定性，可靠性。
测试结果表明，程序在整体上具有较好的性
能，但是在一些细节上，还不是太成熟完善，
主要表现在：
• 场景漫游过程中可能会出现图片变形
• 鼠标控制放大缩小时边界情况处理的不太好
• 异常处理机制还不太完善
兼容性测试
浏览器名称
兼容性
IE
9+，除语音识别、离线操作外，其他
功能均正常
Firefox
3.0+，除语音识别外，其他功能均正
常
Safari
3.0+，除语音识别外，其他功能均正
常
Chrome
3.0+，各项功能均正常
Opera
10.0+，除语音识别、离线操作外，其
他功能均正常
下一步工作
下一步的工作除了解决程序中存在的问题外，
会对360度全景漫游进行进一步的优化：
扩充功能
添加异常处理机制
尝试其它3D引擎提高效率
争取更大程度上提高用户体验。