WebGL在网页室内房型展示中的应用

引 言

近年来，虚拟现实的应用发展火热，Web3D的相关技术也在不断进步。从1996年 W3C制订 VRML建模语言开始， 网页三维图形的运行机制得到了许多支持，包括 SUN公司的Java3D接口，Unity3D的WebPlayer以及Flash产品等，网页3D的应用越来越广泛。结合互联网 3D的发展趋势，在楼房销售的线上房型展示方面，我们运用WebGL技术开发并提供了虚拟看房功能，以此来减少客户看房选房的不确定与不便。客户通过在浏览器上进行房屋模型的场景漫游，可以提前感受目标房源的室内布局与各时段的采光效果，方便后续有针对性的订房购房。

1 WebGL工作原理及其特点

1.1 系统概述

本文研究的虚拟看房应用是售楼管理系统的部分功能， 该系统主要通过人员权限的分配来执行客户、销售人员、管理员等不同对象的业务关系，并根据具体要求与逻辑操作对数据资料进行备份处理。售楼管理系统包括客户接待模块、业务处理模块、系统管理模块及数据库模块等，其中客户接待模块拥有公司新闻、楼盘走势、房型介绍与订购查询等业务功能。系统的线上接待子模块结构如图 1 所示。

1.2 WebGL工作原理

WebGL 是一种脚本层面的Web3D 绘图标准， 无需任何浏览器插件，直接通过脚本编程在网页上进行空间建模并制作出交互式 3D 动画。WebGL 可调用Three.js、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 的开放与统一， 其应用范围也会更加广泛。我们可以在移动端实现更为 便捷的浏览操作，在模型中添加数据点来提示信息概要， 并设计出更优化的加载引擎来完成更加复杂的图形数据。