admin 管理员组文章数量: 1184232
2024年3月14日发(作者：freadom翻译)
龙源期刊网
WebGL在网页室内房型展示中的应用
作者：陈勇 张灿灿 刘洲 黄镇 卞梦云 陈琪 徐玲芳 黄兆祥
来源：《物联网技术》2016年第11期
摘 要：文章旨在为B/S售楼系统中提供更全面、更具针对性的房型展示，我们在客户接
待模块上添加了室内场景漫游功能，通过虚拟看房来加强客户对房型的了解，与一般的平面图
或定点的360度环视相比，拥有无死角、采光变化等优势。采用WebGL进行网页3D的开
发，以做到高效率且无插件的图形渲染，因而无需下载运行环境即可成功显示，不仅为普通客
户提供了良好的体验，还减少了开发过程中系统功能设计上的技术阻碍。
关键词：售楼系统；虚拟看房；网页3D；图形渲染
中图分类号：TP311 文献标识码：A 文章编号：2095-1302（2016）11-00-02
0 引 言
近年来，虚拟现实的应用发展火热，Web3D的相关技术也在不断进步。从1996年W3C
制订VRML建模语言开始，网页三维图形的运行机制得到了许多支持，包括SUN公司的
Java3D接口，Unity3D的Web Player以及Flash产品等，网页3D的应用越来越广泛。结合互
联网3D的发展趋势，在楼房销售的线上房型展示方面，我们运用WebGL技术开发并提供了
虚拟看房功能，以此来减少客户看房选房的不确定与不便。客户通过在浏览器上进行房屋模型
的场景漫游，可以提前感受目标房源的室内布局与各时段的采光效果，方便后续有针对性的订
房购房。
1 WebGL工作原理及其特点
1.1 系统概述
本文研究的虚拟看房应用是售楼管理系统的部分功能，该系统主要通过人员权限的分配来
执行客户、销售人员、管理员等不同对象的业务关系，并根据具体要求与逻辑操作对数据资料
进行备份处理。售楼管理系统包括客户接待模块、业务处理模块、系统管理模块及数据库模块
等，其中客户接待模块拥有公司新闻、楼盘走势、房型介绍与订购查询等业务功能。系统的线
上接待子模块结构如图1所示。
1.2 WebGL工作原理
WebGL是一种脚本层面的Web3D绘图标准，无需任何浏览器插件，直接通过脚本编程在
网页上进行空间建模并制作出交互式3D动画。WebGL可调用、GLGE、SpiderGL、
龙源期刊网
X3DOM等多个函数库，简化了3D场景的分析与构造。WebGL工作原理图如图2所示，它通
过JavaScript对OpenGL（统一的、跨平台的图形编程接口）的绑定，利用对HTML5 Canvas
网页标准的支持来解析并绘制出服务器端传输的数据信息，借助系统显卡加速图形渲染以保证
浏览器运行的图形帧率。
1.3 WebGL的特点
WebGL实际是HTML5新标准的一部分，将逐步取代插件安装与Flash等网页3D手段，
弱化多平台、多机制的不统一性所造成的技术障碍。WebGL与几种网页3D技术的对比如表1
所列。
2 应用实例及性能分析
2.1 模型的建立
WebGL支持对导入的模型进行解析，我们可使用3dsMAX工具来进行房屋模型的搭建。
3dsMAX不仅免费且具有强大的功能，在制作成本上拥有较高的性价比，每一个功能几乎都可
以找到多种途径完成，使用起来十分灵活。这里主要采取两种途径实施建模：
（1）多边形直接建模。首先需设计好抽象的场景，提取数据规格后用多边形构造初始模
型，并添加光照、材质等元素，最后进行纹理贴图工作。这种方法几乎能完成任何模型的建
立，尤其是类似室内建筑这样的简单场景。
（2）几何面片建模。在规定好模型底面边界与方位后，基于细分网格挤压出形状，可以
用很少的细节实现光滑的轮廓形状。其中，为了减少工作量可以先导入由CAD等造型软件制
作好的平面网格图，对其进行挤压与法线翻转等操作后，再处理好材质、纹理等细节方面的效
果。室内窗体建模示意图如图3所示。
2.2 碰撞检测
室内房型漫游主要是将画面良好地展现在屏幕窗体中，我们所看到的场景即模型中“相机”
的视野景象。场景漫游时必然会有相机移动并接触到目标物体，如果不加以触碰处理则会造成
相机穿墙而过等结果，这与实际效果大相径庭。为了拥有更加真实的场景体验，必须对相机移
动采用碰撞检测。
常见的碰撞检测中会给目标加上一层“包围盒”，在检测到包围盒有交集时再分析几何体的
相交性，这样有利于性能上的低消耗。包围盒的形式除图4所示的三种之外，还有8-DOP以
及凸壳两种对复杂形状进行处理的类型，它们对目标对象
的包裹程度更严密，碰撞质量更精确。
龙源期刊网
室内的漫游功能在碰撞精度上不需要较高的要求，考虑到内存使用与检测效率等方面的因
素，选择“有向包围盒（OBB）”方式可以更好地满足需求。图中显示的二维平面中示意了包围
盒的检测原理，可以在两个包围盒中间找到超平面，而垂直于超平面的分离轴上的AB映射不
相交必为分离。对于三维场景中这种检测方法可能会将并非同侧的盒体视为相交，因此需要对
每个盒体面做出分离轴判断。最后通过编程实现对检测到的碰撞做出响应事件，合理控制相机
的运动范围。WebGL实现的室内场景漫游效果如图5所示。
2.3 性能分析
WebGL不仅拥有免插件的优势，其在JS的执行效率与场景烘焙上也表现良好。我们在不
同浏览器的内核支持情况下，对复杂场景操作分别进行性能测试，最终得到动态场景的快速烘
焙效率（单位：s）对比如图6所示。可以看出，FireFox与Chrome的运行效率综合较好，而
IE浏览器仍需要针对JS进行优化。尽管如此，它们的图形帧率都达到60 FPS左右，基本不会
表现出卡顿延迟等现象。
3 结 语
HTML5标准对三维图形的支持为网络虚拟现实应用提供了方便，随着不同的浏览器对
WebGL的开放与统一，其应用范围也会更加广泛。我们可以在移动端实现更为便捷的浏览操
作，在模型中添加数据点来提示信息概要，并设计出更优化的加载引擎来完成更加复杂的图形
数据。
参考文献
[1]Kouichi Matsuda， Rodger Lea. WebGL Programming Guide： Interactive 3D Graphics
Programming with WebGL[M]. New Jersey： Addison-Wesley， 2013： 93-105.
[2]梁建军.基于网页三维技术的网上博览会研究[D].上海：复旦大学， 2011.
[3]宁静.基于WebGL实物交互技术及其实现的研究[D].武汉：华中科技大学，2014.
[4]朱丽萍，李洪奇，杜萌萌，等.基于WebGL的三维WebGIS场景实现[J].计算机工程与
设计，2014，12（10）：3645-3650.
[5]Andreas sional WebGL Programming： Developing 3D Graphics for the
Web[M]. New York： Wrox， 2012 ： 303-360.
[6]刘.基于Web的三维立体可视化房地产销售管理信息系统[D].天津：天津大学， 2014.
龙源期刊网
[7]孙茂华，缪淮扣，高洪皓.Web应用中数据库交互行为验证[J].计算机工程，2012，38
（16）： 52-56.
[8]Christer Ericson. Real-Time Collision Detection[M]. Florida： CRC Press， 2005 ： 553-
575.
龙源期刊网
龙源期刊网
版权声明：本文标题：WebGL在网页室内房型展示中的应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1710376853a570294.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论