面向Web的建筑模型分析与碰撞检测

郑 华 刘 佳

（石家庄铁路职业技术学院 河北石家庄 050061）

面向Web的建筑模型分析与碰撞检测

郑 华 刘 佳

（石家庄铁路职业技术学院 河北石家庄 050061）

传统的Web通过文字、图片、视频等媒体对实物或模型进行展示，没有人机交互，用户只能被动观看。针对大型建筑模型在Web中的展示问题，本文提出了一种利用WebGL技术，使用户可以在Web环境下对建筑模型进行第一人称巡游的方法，先将模型导入到Web，然后对模型进行拆解和分析，利用拆解出的子类解决巡游过程中的碰撞检测问题。实验结果表明，对于具备横平竖直结构的三维模型，该方法均可达到良好的的Web巡游与碰撞检测效果。

WebGL 模型分析 碰撞检测 场景巡游

1 引 言

在建筑行业信息化的大背景下，如何将各类3D建筑模型有效地进行展示，是目前亟待解决的一个主要问题。目前，大型的建筑模型只能在专业的建模工具中进行编辑和浏览，需要高端的图形硬件设备和熟练的软件操作人员，难以大范围普及运用。如果能将模型放在Web上，并且能以交互的方式展示给用户，则问题可以被很好地解决。

传统的Web通过事先渲染好的静态图片或视频来展示建筑模型，不能交互，用户只能被动观看，无法主动浏览。因此允许用户通过交互的方式，主动地、有选择性地浏览建筑模型，是一种更好的展示建筑的方法。

在过去的10年里，诞生了很多Web3D引擎，比如：VRML、X3D、Viewpoint、Cult3D、Shockwave3D、Java3D、Unity3D、Flash3D等，他们都有一个共同点，就是要求用户要在浏览器上安装插件，由于互不兼容，人们需要为不同的网页安装不同的插件，这降低了一部分用户体验，免插件的Web3D技术由此诞生。2009年8月，Khronos提出WebGL绘图技术，它是一个跨平台、免费的、用于在Web浏览器上创建三维图形的API，基于OpenGL ES 2.0标准，使用OpenGL着色语言 GLSL，而且还提供了类似于标准的OpenGL的API。

直接使用WebGL原生的JavaScript代码进行Web3D开发是比较困难的，这涉及大量的数学和3D图形学知识，由此诞生了许多基于WebGL的JavaScript 3D引擎，如GLGE（http://www.glge.org ）、SceneJS（http://www.scenejs.org）、CubicVR（http://www.cubicvr.org）、Three.js（http://www.threejs.org）等。在众多的引擎中，Three.js（Ricardo Cabello Miguel，西班牙）成为了佼佼者，他以简单、直观的方式封装了3D图形编程中常用的对象，使用了很多图形引擎的高级技巧，极大地提高了性能，是完全免费和开源的。

Three.js封装了3D编程中的图形技巧，降低了3D编程的门槛，然而他并没有提供应用级的编程框架，实践中，程序员往往需要做大量重复的工作，导致程序可读性差，为此，Tony Parisi[美]编写了一个基于Three.js的模拟框架Sim.j，这是一个轻量级的开发框架，可极大地提高程序的可读性和可重用性。

本文利用WebGL技术、Three.js引擎和Sim.js框架，介绍了一种将建筑模型导入到Web的方法，通过对模型进行拆解，找出了模型中的所有子类（墙面、楼梯、窗户、家具等），支持用户通过第一人称视角的方式对建筑模型进行主动巡游。文章主要解决了两个问题：一是建筑模型的导入与拆解，二是巡游过程中的碰撞检测。

2 模型的导入与拆解

在3D建模领域，由于历史原因（没有统一标准），过去用于工业建模设计上的交换格式，3ds和Obj成为了最具代表性的两种静态模型格式，其中Obj格式由于没有专利限制，使用文本存储，被大家广泛采纳。现在几乎所有的建模工具都支持Obj格式的输出，这也是本论文之所以采用Obj格式模型进行分析的原因。

Obj是一种静态模型，主要的内容是点、线、面、法线和材质。Three.js默认情况下，会将Obj模型整体封装成一个Object3D对象，并以网格（Mesh）的形式返回给用户。在巡游过程中，我们需要逐一分析模型中的子类，如墙面、窗户、楼梯等，并在巡游的同时，进行碰撞检查（保证用户不会穿墙而过）。

下面以北京皇家大饭店为例，介绍如何将模型导入到Web，并对模型进行拆解，找出所有子类用于碰撞检测。

2.1 模型的导入

在3ds Max中将模型以Obj格式输出，导出时注意将材质文件一并导出以保证后期的渲染效果，然后在网页中通过Three.js提供的loader.load方法可直接导入Obj模型，导入后，程序将得到整个模型的一个Object3D对象，如图1所示。

图1 模型的导入

2.2 模型的拆解与处理

通过循环读取该Object3D对象的Children属性，即可得到模型中的所有子类，Children是一个数组，是Three.js内置的一个层级对象，每个数组元素代表了模型中的一个子类，它也是一个Object3D对象。得到模型的所有子类后，创建这些子类的包围盒（boundingBox），保存他们的位置和中心点，如图2所示。

图2 子类分析

为提高程序的可移植性，我们在网页文件中传入模型参数，并在独立的js脚本文件中进行模型的导入和分析工作。

为使程序结构更加清晰，本文利用Sim.js框架对这部分功能的代码进行了封装，通过创建Obj类统一了接口，其中init方法用于导入模型，createmodel方法用于模型中的子类分析，代码如下：

3 巡游过程中的碰撞检测

Three.js引擎通过FirstPersonControls.js脚本支持第一人称视角巡游，通过将本地摄像机和THREE.FirstPersonControls对象绑定，并在 App对象的update事件中调用FirstPersonControls对象的update方法实现第一人称视角巡游。

在巡游过程中，需要进行碰撞检测，即当摄像机和模型中的任意一个子类碰撞时，应该终止巡游，摄像机退回原位，要求用户另寻路径，碰撞检测过程的基本思路如图3所示。

图3 碰撞检测流程

包围盒是碰撞检测中广泛使用的一种方法，其核心思想是用体积略大于模型本身但几何特性简单的包围盒来近似地描述需要进行碰撞检测的复杂几何对象，然后对包围盒进行碰撞检查。

常见的包围盒类型有包围球（sphere）、沿坐标轴的包围盒AABB（Axis—Aligned Bounding Boxes）、方向包围盒OBB（Oriented Bounding Box）、和k-DOPs（Discrete Orientation Polytope）等。如何选择一种合适的包围盒主要考虑两个因素：一是要考虑包围盒与模型的紧密程度，紧密度高意味着碰撞检测的精准度就高；二是要考虑计算复杂度，高精准的碰撞检测同时也意味着大量额外的计算开销。

由于大多数建筑模型具备横平竖直的结构，因此采用AABB包围盒可以保证碰撞检测的精准度；另外，建筑模型需要在Web浏览器中进行实时渲染，保证用户可以平滑的进行巡游必须被重点考虑，因此并不适宜采用高复杂的碰撞算法。

结合本例，我们为每一个子类计算包围盒、三边长和中心点坐标，判断摄像机是否进入包围盒的内部（如图4所示）。如果进入了，表示发生了碰撞，摄像机退回原位置，否则继续巡游。

图4 包围盒模型

通过计算摄像机在X、Y、Z三个方向上距离包围盒中心点的距离，如果他们均小于包围盒三条边长的一半，那么可以认定碰撞了。另外还需要注意两个问题，一是建筑模型有一个显示比例的问题，二是摄像机有一个近剪裁面问题，在计算时要考虑进去。

在Obj类中，已经分析出了模型的所有子类，并计算了他们的包围盒（Boxs）和中心点（Boxs_pos），通过扩展App类，增加testcollision方法，实现碰撞检测，代码如下：

碰撞检测效果如图5所示，图中摄像机与左边墙面屋檐发生了碰撞，墙面材质颜色变红，摄像机返回旧位置，保证用户可以从其它方向继续巡游。

图5 碰撞检测效果

4 整合与使用

最后，将上述程序一并封装到APP类中去，并在html文件中传入建筑模型的相关信息，即完成了一个通用的Obj模型浏览器，网页文件的部分代码如下：

代码中斜体部分标示了模型的相关参数，他们分别是模型文件、材质文件、模型的位置和显示比例。

5 结论与后期改进

至此，完成了Obj模型的第一人称视角巡游，程序将自动分析传入的模型，并在巡游过程中进行碰撞检查，作为一个封装好的通用类，该方法其实可运用在任何Obj模型中，比如机械模型、零件模型、产品模型等，通过调整显示比例，还可以显示微小模型。

基于上述研究成果，后期可以研究可视化的建筑模型（BIM）管理信息系统。由于程序中分析出了模型中的所有子类，将他们和数据库关联，就可以进行可视化的建筑模型信息化系统开发。

最后，基于WebGL的3D网页无论在PC端还是移动端，都受到了广泛的支持，比如IE从11.0以后完全支持WebGL，Firefox for Android则在移动端完全支持WebGL，这使得基于WebGL的项目可以在PC和移动端的程序代码得到统一，大大降低了开发成本。

[1]刘爱华,韩勇,张小垒.基于WebGL技术的网络三维可视化研究与实现[J].地理空间信息,2012,10(05):79-81

[2]谭文文,丁世勇,李桂英. 基于 webGL和 HTML5的网页 3D 动画的设计与实现[J]. 电脑知识与技术,2011,7(28):6981-6983

[3]霍冬,郑伟华,盛步云. 基于WebGL的机械产品三维展示技术研究[J]. 制造业自动化,2013,35(09):73-77

[4]周敬敬,陈昕,吴开超. 利用 WebGL技术实现机房动态虚拟装配设计的可视化[J]. 科研信息化技术与应用,2013,4(02):87-92

[5]赵学伟,沈旭昆,齐越. 基于Web的交互式三维发布系统[J].计算机工程, 2007,33(22):5-7

[6]王珩玮,胡振中,林佳瑞. 面向Web的BIM三维浏览与信息管理[J]. 土木建筑工程信息技术,2013,5(03):1-7

[7]王磊,高珏,金野. 基于Web3D无插件的三维模型展示的研究[J]. 计算机技术与发展,2015,25(04):217-220

[8]梁弼,肖丽利,薛文. 古建筑文物三维全景展示的设计与实现[J]. 微型机与应用,2014,33(16):10-14

[9] Cantor D. WebGL Beginner’s Guide[M]. Birmingham, United Kingdom: Packt Publishing, Limited, 2012

[10]P.M.Hubbard.Approximating polyhedra with sphms for time-critical collision detection[J].ACM TrimsGraph,1996,15(3):179-210

[11]N· Beckmann,H-P.Kriegel,R.Schneider.The r__tree:an efficient and robust access method for points and rectangles[C[.ACM SIGMOD International Conference Oil Management of Data,Atlantic,1990:322.331

[12]N.Greene.Detecting intersection of a rectangular solid and a eonvex polyhedron[C[.In:Heckbert P S.Graphics Germs IV.USA:Academic Press,1994:74.82

[13]J·T.Klosowski,M.Held,J.S.B.Mitchell.Efficient collision detection using bounding volume hierarchies ofk-DOPs[J].IEEE Transactions On Visualization and Computer Graphics,1998,4(1):21.36

Analysis and Collision-detect of the Web-oriented Building Model

ZHENG Hua LIU Jia
(Shijiazhuang Institute of Railway Technology Shijiazhuang Hebei 050061 China)

Traditional Web shows objects or models through text, pictures, video and other media. There is no human-computer interaction and users can only passively watch. To solve the presentation problem of the large architectural models on the Web, this paper presents a method of WebGL technology, which allows users to browse building model with the first-person roaming in Web environment. This technology firstly imports the model into Web, then dismantles and analyzes it, finally with the use of dismantled subclasses, solve the collision-detections problem during roaming. The experimental results show that for the 3D-model with vertical-horizontal structure, this method can achieve good results of Web roaming and collision detection.

WebGL Model-analysis Collision-detection scene-roaming

中国分类号：TP3A

1673-1816(2016)02-0089-06

2015-12-08

郑华（1977-），男，汉，安徽歙县人，副教授，硕士，研究方向计算机网络技术、Web3D。