基于html5的webgl场景漫游源代码,基于HTML5 WebGL技术校园全景漫游系统研究.doc

基于HTML5 WebGL技术校园全景漫游系统研究

基于HTML5 WebGL技术校园全景漫游系统研究

摘要：该文对校园全景漫游系统设计进行了探究，该系统全景的实现是基于图像建模的，取材于"校园区实景图片"，通过使用相机及全景云台等设备在校园区选择景点拍摄采集图片，然后通过图像拼接处理软件生成全景视图，再采用Xml Dom创建节点树封装场景元素库供JS调用，最后运用WebGL渲染管线技术在Canvas容器中实现3D动画效果，从而实现整个系统功能。

关键词：虚拟现实；透视投影；渲染管线；节点树；封装

中图分类号：TP391 文献标识码：A 文章编号：1009-3044(2016)35-0086-03

Research on Campus Panoramic Roaming System Based on WebGL HTML5 Technology

ZHOU Chang-quan

(Anhui Finance & Trade Vocational College， Hefei 230601， China)

Abstract： This paper explores the design of campus roaming system， the system is based on the panoramic image modeling， based on the "campus pictures"， through the use of cameras and other equipment in the campus panoramic head area attractions shooting acquisition image， then splicing processing software to generate a panoramic view of the image， then use Xml to create Dom the node tree scene elements library call for JS package， the final realization of 3D animation in the Canvas container using the WebGL pipeline technology， so as to realize the function of the whole system.

Key words： virtual reality； perspective projection； rendering pipeline；node tree；encapsulation

1 概述

全景漫游技术可实现在网络虚拟环境中的交互性、沉浸性实景漫游体验。传统漫游技术在使用过程中主要还脱离不了安装插件等问题。而本系统综合了传统漫游技术优势，借鉴当今网络较流行的全景漫游系统技术经验，在HTML5框架基础上运用WebGL技术而设计开发的新兴校园三维全景漫游系统，它有效缓解和改善了传统技术的不足。

2 研究意义和必要性

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

现在三维全景漫游技术虽然在房地产业和旅游业等方面发展迅速，但广泛应用于高校信息化建设的还不多见，很多高校整个信息化系统里面，缺少针对校园整体环境的一个立体化、形象化的展示，只能通过文字加图片的传统网页形式来展示学校风貌，这样局限了学校自身形象建设发展，也不便于学生和家长对校园环境快速全面的了解，从而要花费大量的时间和力气去实地考察，成本费用大，受众面又窄。若利用三维全景漫游技术开发校园三维全景漫游系统，它将是一个面向大众，跨越时空界限，广泛展示校园风采，提升学院整体形象，宣传学校办学理念的非常重要的窗口和应用支撑平台。

本系统研发不仅采用了编程技术，还结合了摄影和图形图像编辑处理等技术手段，联系学校专业教育，它将程序设计?Ｒ怠⑸阌白ㄒ岛屯夹瓮枷癖嗉?处理等专业融合一起，这就决定了项目开发的成果可作为学校公共教育资源应用于专业教学中，为专业理论实训教学及相关专业学生实习实训提供丰富的任务案例，对重点专业和特色专业建设提供有力的支撑。同时，本项目开发技术性强，有较强的可操作性，对强化学生专业技能，提高学生实际动手能力，也起到十分重要的作用。

3 系统功能设计与规划

本系统具体分为三个部分：可伸缩导航热点地图、三维场景浏览视窗和控制菜单组。

导航热点地图部分包括校区景点分布图、图中根据不同景点设置了可供用户选择链接的场景切换点，用于选择切换