基于WebGL的三维虚拟博物馆碰撞检测

摘要摘要：三维虚拟博物馆是通过计算机对现实生活物馆的一个模拟，在各大主流浏览器上提供虚拟博物馆漫游功能，让广大用户不必亲临现场就可以在网上身临其境地了解博物馆藏品信息。在分析虚拟博物馆实际应用的基础上，针对虚拟场景中的碰撞检测，提出了一种基于WebGL的适用于虚拟博物馆的碰撞检测算法。算法首先使用XML构建虚拟场景，并通过树的筛选方式对空间进行筛选，然后使用优化的AABB包围盒进行碰撞检测，使用户在使用第一人称漫游博物馆场景时，能与静态物品产生真实的碰撞效果。实验结果表明，该算法的运用可以实时反映连续碰撞效果。

关键词关键词：WebGL；虚拟博物馆；碰撞检测；AABB

DOIDOI：10.11907/rjdk.171092

中图分类号：TP319

文献标识码：A文章编号文章编号：16727800（2017）05012405

0引言

虚拟现实技术的成熟和网络技术的普及使得3D虚拟博物馆的实现成为可能。3D虚拟博物馆依据现实中的博物馆，利用计算机构建一个虚拟的三维世界，通过网络处理技术将现实博物馆逼真地展现给用户。3D虚拟博物馆的实现不仅打破了传统展馆在时间和空间上的局限性，还为使用者提供了关于听觉和视觉的模拟，让用户能自由地观察三维空间中的展品，给用户一种沉浸式的体验[1]。

对于虚拟博物馆，人们关注的是其实时性和真实感，而其真实性和实时感主要体现于第一人称视角在虚拟场景中的使用。要使用户以第一人称漫游场景时能如同在现实世界中浏览场景时一样，碰撞检测成为三维虚拟博物馆系统实现中的重要一环。

对于碰撞检测的研究，至今为止已经形成了一个相对完整的体系，网页版虚拟技术实现的“Flash3D”、“Java3D”、“Unity3D”等技术都有自身的一些碰撞检测机制，然而这些技术在网页端的实现都需要安装一些特定的插件，因此存在很大的局限性。而场景模型的针对性、应用领域的专业性和场景要求的特殊性，对碰撞检测的效果提出了不同要求：对于虚拟维修[2]，主要追求碰撞检测效率，因而王崴等[3]采用动态分裂平面法加速OBB包盒构建的过程来进行碰撞检测；对于游戏场景，由于场景模型多且复杂，为了游戏场景的真实性和实时性，刘翼等[3]提出了结合使用空间剖分法和层次包围盒法对其进行检测。WebGL[4]是2010年公开的Web端3D绘图标准，它无需安装插件且具有跨平台性[56]，因此受到人们的关注，然而对WebGL碰撞检测方面的研究并不是很多，因此亟需寻找一种方法对WebGL进行碰撞检测。本文提出了一种基于AABB包围盒的碰撞检测算法实现在WebGL环境下适用于虚拟现实博物馆进行的碰撞检测。

1相关工作

Sang Z，Wang T Y，Zou X X[7]提出了一种适用于数控机床的在线碰撞检测算法。基于数控机床的特点，综合分析了八叉树算法和网格分割的碰撞检测算法优缺点，提出了一种长方体碰撞检测结合分离轴碰撞检测的算法来优化传统机床的碰撞检测算法。该算法准确性好且精度较高，但是效率较低。

Hung W H，Kang S C J[8]针对虚拟环境中的仿真施工现场，在2014年提出了一种快速的碰撞检测算法，称为传播聚类方法。该方法采用K均值进行聚类迭代，将对象分为多个组，定义一个质量指标进行结果评估，符合质量要求时，该组对象采用AABB包围盒进行替换，还建立了一个分散对象场景、一个施工现场场景、一个散乱的普通遗址场景进行测试。该算法对虚拟建筑场景快速有效，但是碰撞检测紧密型较差。

2015年，王磊[9]提出了一个基于混合型包围盒的碰撞检测方法，称为HBBCD算法。算法首先将待检测物体转化成二叉树，在根节点处构建包围球，上层结构构建AABB包围盒，下层结构构建OBB包围盒。然后在相交测试阶段，使用队列标记已检测的物体，优先遍历深层次节点。王磊[9]将该算法集成到Unity3D中完成了一个基于Web3D的武警总队警史馆系统，该算法很好地满足了碰撞检测的准确性和实时性，但是复杂度高，计算比较麻烦。

2016年，郑华和刘家[10]提出了基于WebGL的面向Web的建筑模型碰撞检测算法，先对导入的模型进行拆解，然后将拆解后的子模型进行碰撞检测。该方法运算简单，但运算步骤较多，对规则的类长方体模型有较好的碰撞检测结果，但考虑的情况比较单一。

2碰撞检测

碰撞检测是为了提高虚拟场景的真实感而提出的关键技术，其主要目的在于避免模型在运动过程中出现与其它模型发生交叉或者直接穿越的现象，避免用户在使用虚拟场景时产生违和感[1112]。碰撞检测主要分为3个阶段：确认碰撞模型阶段、模型相交测试阶段和碰撞响应阶段。确认碰撞模型阶段就是检测运动物体与静态物体是否发生碰撞，如果发生碰撞则确定碰撞模型；模型相交测试即确定运动模型与静止模型是否发生穿越或冲突；碰撞响应阶段即当运动物体与静态物体发生碰撞时，运动物体作出相应改变的过程。

2.1碰撞

碰撞[13]是指两个作相对运动的模型接触并改变其运动状态的现象。

从能量角度出发可将碰撞分为：理想弹性碰撞、非弹性碰撞、完全非弹性碰撞和超弹性碰撞。理想弹性碰撞是指在不考虑任何不同能量间的转化或者能量损耗的前提下，动能和动能之间的改变；非弹性碰撞是指在部分动能转换成其它形式的能，物体发生一定的改变；完全非弹性碰撞是指物体在发生碰撞后动能为零，完全不反弹；超弹性碰撞是指碰撞后的动能超过碰撞前的动能。

针对本文需要检测的虚拟博物馆系统，主要考虑的是动态物体和绝对静态物体之间的碰撞。由上述不同碰撞类型可知，当运动物体和静态物体发生理性弹性碰撞时，静态物体不发生任何改变，运动物体将做反方向的等动能运动；当运动物体和静态物体发生非弹性碰撞时，运动物体或静态物体发生形变或发热，运动物体做削弱动能的运动；当运动物体和静态物体发生完全非弹性碰撞时，运动物体和静态物体保持静止；当运动物体和静态物体发生超弹性碰撞时，运动物体做反方向更快速的运动。运动的物体就是第一人称视角模型，绝对静止的物体就是博物馆场景模型。由此可知，场景模型中的模型属性都是刚体，且动能较小，因此需要考虑的是完全非弹性碰撞。

2.2相交

相交是指两个物体相互交叉在一起。二维平面中，图形与图形之间拥有两个及两个以上交点，则两个图形相交（直线与直线相交只有一个交点）；三维平面中，当一个三维模型的部分或全部存在于另一个三维模型的内部（两个模型的体积发生重叠）时这两个三维模型相交。

本文讨论的相交是指当用户使用第一人称进行漫游时，由于第一人称视角模型和场馆静态模型的碰撞检测不及时，或者包围盒选择不合适所引起的视角的穿透。发生相交时，用户使用第一人称视角可以看到模型内部，使场景出现违和感。若没有包围盒或者碰撞检测缓慢，则有可能发生穿越现象。用户可以用平滑的速度穿过前面场景中的障碍物。

3基于包围盒的碰撞检测算法分析

3.1包围球

包围球算法[14]是将模型碰撞描述为一个能将该模型包围住的最小球体。即确定球心和球半径（每个坐标轴投影绝对值最大的点间距离），就可以描述为一个包围球。该方法构造比较简单，计算相对方便。

3.2AABB包围盒

AABB包围盒[15]是指轴向包围盒，即将模型碰撞描述为将该模型包围住的最小长方体，该长方体的长、宽、高分别平行于轴向上的X轴、Y轴和Z轴，确定模型每个轴向上投影的最大值和最小值即可构造相应的AABB包围盒模型。该方法构造简单但紧密型差。

3.3OBB包围盒

OBB包围盒[16]即将模型碰撞描述为将碰撞模型包围住的最小长方体，该长方体与轴向无关。该方法紧密性好，灵活但构造复杂。

3.4Kdops包围盒

Kdops包围盒[17]将模型碰撞描述为能将模型围住的最小凸多面体，该凸多面体所有面的法向量都来自于一个固定方向，有固定的轴集。该方法紧密性最佳，但是构造麻烦。

4 基于WebGL的3D虚拟博物馆碰撞检测

3D虚拟博物馆的碰撞检测主要研究的是三维空间中运动物体（虚拟人物）与静态物体（博物馆场景）之间发生的碰撞检测。

由于博物馆的场景较大，且对用户体验有一定的要求，因此，为了检测出移动物体在运动过程的冲突，需要找到一个高效的基于场景的连续冲突检测算法。

4.1空间筛选

在构建场景时，采用XML参数化语言进行实现[18]。考虑到整个系统渲染效率、碰撞检测和后续场景交互的方便性，采用如图1所示的树状结构组织场景。

碰撞空间主要通过树形结构来确定，如果确定用户停留在博物馆外观场景的虚拟空间时，只需要进行博物馆外观场景中的碰撞检测，若确定用户进入主题馆（如青铜器馆）场景中，则进行与之相应的主题馆场景中的碰撞检测。

主题馆场景主要分为两种模型，即展台模型（博物馆建造时已经确立的固定不动部分）和展品模型（可根据现实情况变更的可变动部分），而展品模型一般都存放在对应的展柜之中。因此，为了提高碰撞检测的效率，可以直接进行展柜模型的碰撞检测。

4.2碰撞模型确认

经过上述的空间筛选后，可以初步确定模型碰撞的范围。由于博物馆建筑模型的特殊性，一般展厅的展柜多为规则长方体透明玻璃，而展品一般都放在展柜之中，当使用第一人称视角模拟用户漫游场景时，只需要考虑外部展厅对于第一人称视角的碰撞反应，而无需考虑放置在内部的展品对于第一人称产生的碰撞。因此选用AABB碰撞检测包围盒作为基本的碰撞模型，然后对此模型作一定的改进，最后利用改进的碰撞模型完成对主题馆内的碰撞检测。

针对WebGL的碰撞检测，主要分为两种情况：一种是由键盘控制第一人称漫游引起的运动模型和静态模型之间的碰撞；另一种是鼠标控制的运动模型和静态模型之间的碰撞。

对于场景中的静态展柜模型需要先设置对应的AABB包围盒，分别记录静态模型包围盒S（S是一个变量，是静态模型名称）在3个轴向上的投影点，X轴上投影的最小值和最大值分别记为：S-Xmin，S-Xmax；Y轴上投影的最小值和最大值分别记为：S-Ymin，S-Ymax；Z轴上投影的最小值和最大值分别记为：S-Zmin，S-Zmax。

4.2.1键盘控制的运动模型和静态模型之间的碰撞检测

对于运动模型M，计算运动后的包围盒，并记录3个轴向上的投影点，分别为：M-Xmin，M-Xmax，M-Ymin，M-Ymax，M-Zmin，M-Zmax。依次判断3个轴向上的碰撞，以X轴为例，先判断最小值，若M-Xmin≤S-Xmax，则将S和M碰撞检测标志置为True（S和M碰撞检测标志默认为false），如果M-Xmin>S-Xmax，不作处理；再判断最大值，如果M-Xmax≤S-Xmin，S和M碰撞检测标志置为False，如果M-Xmax>S-Xmin，不作处理。若处理完3个轴向上的碰撞，最终M碰撞检测标志为True，则存在碰撞，碰撞模型为S。

由于运动模型和静态模型的碰撞对于实时性要求较高，因而需要将碰撞检测的机制放置在渲染循环机制中。本文采用three.js来绘制虚拟场景，three.js是基于WebGL的3D图形绘制库，它主要由3部分组成：相机、场景和渲染器。

然后将碰撞检测包围盒算法添加到场景中，并给相机添加碰撞检测盒，利用渲染循环机制不断更新运动物体运动后的位置和运动后包围盒状况，实时监控碰撞的发生并绘制更新的虚拟场景。循环方式如下代码所示，animate函数是一个动画，在系统运行时不断执行，使render函数内的场景和相机不断更新，并渲染它们。

4.2.2鼠标控制的运动模型和静态模型之间的碰撞检测

由于鼠标控制运动模型的运动方式是直线运动，可以计算运动模型运动中包围盒在3个轴向上的投影。在直线运动状态下，可以认为在Z轴上投影坐标保持不动，因此只要考虑在Y轴和X轴存在的关系，运动前包围盒X轴为：M-Xmin，M-Xmax，Y轴投影点为：M-Ymin，M-Ymax；运动后包围盒X轴投影点为M-Xmin′，M-Xmax′，Y轴投影点为：M-Ymin′，M-Ymax′。根线性方程y=ax+b可知：

然后将运动路线中可能存在的碰撞进行检测，判断方式和键盘控制运动的碰撞判断方式类似。

4.3模型相交测试

运用分割轴算法进行模型相交测试，若两个模型不相交，则存在一个平面使得两个模型分别位于平面的两侧。

运动模型M和静止模型S，其中心连线在每个轴向上的投影长度为C=|（S-M）*Axis|（Axis指每个轴向），参考长度为T=L/2+[（S-Max）-（S-Min）/2]，其中L是运动包围盒边长。当某个轴向上的C≥T时，模型不相交；如果各个轴向上中心连线投影长度C都小于它的参考长度T，则模型相交。

4.4动作选择

由于运动方式分为键盘控制的运动和鼠标控制的运动，因而动作选择需要做一定的区分。

4.4.1键盘控制运动碰撞时的动作选择

未检测到碰撞时，运动操作继续，并作相应的动作。当检测到l生碰撞时，首先确定发生碰撞的轴向，由于博物馆场景模型为平地，检测碰撞时只需要检测4个轴向上的碰撞。将运动模型碰撞检测盒朝着4个轴向：X轴正轴，X轴负轴，Y轴正轴和Y轴负轴分别收缩，然后进行检测，若在某一轴向收缩的情况下检测到碰撞消除，则该轴向预判为碰撞轴向，运动模型在该轴向上的运动被锁定，只允许其它轴向上的运动，碰撞模型检测盒恢复；若未检测到碰撞消除，则再次缩小各轴向的边长，继续检测。

4.4.2鼠标控制运动碰撞时的动作选择

未检测到碰撞时，平移运动被执行，模型平缓运动到目标位置。当检测到碰撞时，根据对碰撞反应精度的要求，将模型的运动量减小1/r倍，并按上述碰撞检测方法再次进行检测，即计算运动目标位置为（M-Xmin′+M-Xmin）（r-1）/r，（M-Xmax′+M-Xmax）（r-1）/r，（M-Ymin′+M-Ymin）（r-1）/r，（M-Ymax′+M-Ymax）（r-1）/r的情况。若仍然存在碰撞检测则继续将运动量减小1/r倍并检测，否则，按照减小的运动量运动。

由于虚拟博物馆对碰撞反应的速率要求相对较高，对精度要求相对较低，因而当检测到碰撞时，选择将模型的运动量减半并按上述碰撞检测方法再次进行检测，即计算运动目标位置为（M-Xmin′+M-Xmin）/2，（M-Xmax′+M-Xmax）/2，（M-Ymin′+M-Ymin）/2，（M-Ymax′+M-Ymax）/2的情况。若仍然存在碰撞检测则继续将运动量减半并检测，否则按照减半的运动量运动。

5检测结果

本文基于WebGL对虚拟博物馆中的碰撞检测展开了研究，设计并实现了三维虚拟博物馆系统，从而验证该碰撞检测的可行性和碰撞检测效果。

当使用键盘进行第一人称漫游时，用户通过键盘控制第一人称的移动，W向前、S向后、A向左、D向右。若不发生碰撞，则用户做如图2所示的流畅的匀速运动。

若发生碰撞，输出对应的提示信息，并给出碰撞轴，如图3所示。判断当前状态为hit给出碰撞轴为X正方向，此时用户不能再向X正轴方向前进，但用户可以向Y轴正方向、Y轴负方向或X轴负方向前进。

当鼠标控制第一人称移动时，通过鼠标点击屏幕来获取运动模型的终点信息。若运动过程中不发生碰撞，则第一人称视角以直线匀速运动方式移动到终点位置，如图4所示。进入场景默认起始位置（0，0，0）点击屏幕之后获取终点位置（115.33，73.021，0），若该运动路径上未发生碰撞，则移动到（115.33，73.021，0）位置。

若发生碰撞时，第一人称视角运动量减半，并重新检测。

重新检测时未发生碰撞，移动到减半后的位置，如图5所示。进入场景默认起始位置（0，0，0）点击屏幕之后获取终点位置（117.28，56.33，0），判断该运动路径上是否发生碰撞，给出提示信息hit，并更新起始位置（0，0，0）和终点位置（58.64，28.165，0），终点位置是之前的一半，再次判断后未产生碰撞，则移动到位置（58.64，28.165，0）。

若发生如6图所示的连续碰撞，在起点位置（200，0，0）和终点位置（207.1，100.531，0）之间检测到碰撞，输出碰撞信息hit并将模型运动量减半，更新起点位置（200，0，0）和终点位置（203.55，50.2655，0）再次进行判断，仍然存在碰撞继续输出碰撞信息hit并减半运动量，起点为（200，0，0），终点为（201.775，25.1328，0），再次检测未发生碰撞，物体移动到位置（201.775，25.1328，0）。

6结语

随着虚拟现实技术的发展，WebGL凭借跨平台性和可操作性的优势实现了很好的展示，然而目前国内对于WebGL和HTML5的探索和研究还不是很多。本文基于WebGL实现了虚拟博物馆场馆模型中的碰撞检测，虽然不够完美，紧密型存在差距，但方法是可行的，能快速检测到场景中发生的连续碰撞和未发生失真的交互穿越现象。本文的碰撞检测仅针对虚拟博物馆的特性展开研究，相信随着WebGL及3D引擎的不断完善，浏览器端的3D仿真在教育、商业、生活等方面都会有更加广阔的应用前景。

参考文献参考文献：

[1]张剑平，夏文菁.数字化博物馆与学校教育相结合的机制与策略研究[J].中国电化教育，2016（1）：7985.

[2]王崴，周诚，杨云，等.面向虚拟维修的碰撞检测算法[J].计算机应用与软件，2016，33（4）：235238.

[3]刘翼.三维游戏中碰撞检测算法的研究与实现[D].武汉：武汉理工大学，2010.

[4]MARRIN C.Webgl specification[Z].Khronos WenGL Working Group，2011.

[5]KOPEC A，BALA J，PIETA A.WebGL based visualisation and analysis of stratigraphic data for the purposes of the mining industry[J].Procedia Computer Science，2015，51（1）：28692877.

[6]SUN F，ZHANG Z，LIAO D，et al.A lightweight and crossplatform Web3D system for casting process based on virtual reality technology using WebGL[J].International Journal of Advanced Manufacturing Technology，2015，80（58）：801816.

[7]SANG Z，WANG T Y，ZOU X X，et al.Research on online collision detection algorithm of CNC machine tools[J].Key Engineering Materials，2016，693（3）：17801785.

[8]HUNG W H，KANG S C J.Automatic clustering method for realtime construction simulation[J].Advanced Engineering Informatics，2014，28（2）：138152.

[9]王磊.基于混合型包盒碰撞检测技术的研究及其在Web3D漫游中的应用[D].上海：上海大学，2015.

[10]郑华，刘佳.面向Web的建筑模型分析与碰撞检测[J].石家庄铁路职业技术学院学报，2016，15（2）：8994.

[11]HWANG S S，SPEYER J L.Collision detection system based on differential carrierphase global positioning system broadcasts[J].Journal of Aircraft，2015，46（6）：20772089.

[12]SU J，HONG D，TANG J，et al.An efficient anticollision algorithm based on improved collision detection scheme[J].IEICE Transactions on Communications，2016，99（2）：465470.

[13]WANG H.Defending continuous collision detection against errors[J].Acm Transactions on Graphics，2014，33（4）：110.

[14]温茹.虚拟现实环境中碰撞检测优化技术研究[D].长春：吉林农业大学，2014.

[15]赵伟，谭睿璞，李勇.复杂虚拟环境下的实时碰撞检测算法[J].系统仿真学报，2010，22（1）：125129

[16]王伟，马俊，刘伟.基于OBB包围盒的碰撞检测研究与应用[J].计算机仿真，2009（9）：180183.

[17]李红波，周东谕，吴渝.基于混合包围盒的碰撞检测算法[J].计算机应用，2010，30（12）：33043306.

[18]卢威，曾定浩，陈继明，等.虚拟博物馆系统构建中的关键技术研究[J].计算机科学，2007，34（7）：244247.