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

基于HTML5的360度全景漫游技术研究 演讲人：刘海娜指导老师：林予松

主要内容介绍 • 研究现状 • 研究意义 • 研究过程 • 研究结果 • 下一步工作

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

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

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

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

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

兼容性测试

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

Thank You！

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