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可调用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以及凸壳两种对复杂形状进行处理的类型,它们对目标对象
        的包裹程度更严密,碰撞质量更精确。
web下载官方下载        室内的漫游功能在碰撞精度上不需要较高的要求,考虑到内存使用与检测效率等方面的因素,选择“有向包围盒(OBB)”方式可以更好地满足需求。图中显示的二维平面中示意了包围盒的检测原理,可以在两个包围盒中间到超平面,而垂直于超平面的分离轴上的AB映射不相交必为分离。对于三维场景中这种检测方法可能会将并非同侧的盒体视为相交,因此需要对每个盒体面做出分离轴判断。最后通过编程实现对检测到的碰撞做出响应事件,合理控制相机的运动范围。WebGL实现的室内场景漫游效果如图5所示。
        2.3 性能分析
        WebGL不仅拥有免插件的优势,其在JS的执行效率与场景烘焙上也表现良好。我们在不同浏览器的内核支持情况下,对复杂场景操作分别进行性能测试,最终得到动态场景的快
速烘焙效率(单位:s)对比如图6所示。可以看出,FireFox与Chrome的运行效率综合较好,而IE浏览器仍需要针对JS进行优化。尽管如此,它们的图形帧率都达到60 FPS左右,基本不会表现出卡顿延迟等现象。
        3 结 语
        HTML5标准对三维图形的支持为网络虚拟现实应用提供了方便,随着不同的浏览器对WebGL的开放与统一,其应用范围也会更加广泛。我们可以在移动端实现更为便捷的浏览操作,在模型中添加数据点来提示信息概要,并设计出更优化的加载引擎来完成更加复杂的图形数据。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。