,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,基于,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组件来完成。,导航,菜单,语音识别可以帮助用户直接通过语音来搜索内容，省去了人工输入的麻烦，提高了搜索效率，对于一些场景很多的系统以及缺乏键盘支持的设备来讲，此项功能的优越性就更加明显。,通过即可实现语音识别。,语音识别,HTML5提供了对离线应用开发的支持，借助于该功能，在与因特网断开的情况下，用户也可以访问相关站点和应用，假设取得与因特网的连接，会自动更新缓存数据。,目前，最新的主流浏览器中几乎都已经提供对HTML5离线操作的支持，一些应用如Gmail，Zoho，Remember The Milk，Word Press等都已经提供相应的离线操作。,离线,存储,离线存储例如,Hi,NIHAO!,CACHE MANIFEST,ex1.html,1.css,1.js,测试主要包括三,方面,：,一、,功能测试,二、,性能测试,三、,兼容性测试,系统测试,功能性测试结果说明系统根本可以实现各个模块的预定功能，具体如下：,1.通过鼠标可以对图像进行放大、缩小、移动观看等操作，实现水平360度视角，垂直180度视角的环视,2.鼠标放上导航标志，导航地图可以由鼠标控制滑入滑出，通过导航热点地图，用户可以切换到地图中所示的不同场景,3.导航菜单各项按钮根本都可以正常运行，但是语音识别、语音解说、离线操作等功能仅能够在特定的浏览器上显示。,功能测试,性能测试主要包括系统的稳定性，可靠性。测试结果说明，程序在整体上具有较好的性能，但是在一些细节上，还不是太成熟完善，主要表现在：,场景漫游过程中可能会出现图片变形,鼠标控制放大缩小时边界情况处理的不太好,异常处理机制还不太完善,性能测试,浏览器名称,兼容性,IE,9+,，除语音识别、离线操作外，其他功能均正常,Firefox,3.0+,，除语音识别外，其他功能均正常,Safari,3.0+,，除语音识别外，其他功能均正常,Chrome,3.0+,，各项功能均正常,Opera,10.0+,，除语音识别、离线操作外，其他功能均正常,兼容性测试,下一步,的工作除了解决程序中存在的问题外，会对,360,度全景漫游进行进一步的优化,：,扩充功能,添加异常处理机制,尝试其它,3D,引擎提高效率,争取更大程度上,提高用户,体验。,下一步工作,Thank You,！,