babylon.js_使用Babylon.js和Oimo.js了解碰撞和物理

babylon.js

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

今天，我想通过使用WebGL babylon.js引擎和名为oimo.js的物理引擎伴侣，与您分享碰撞，物理和边界框的基础知识。

这是我们将要一起构建的演示： babylon.js使用Oimo.js的Espilit Physics演示

您可以在兼容WebGL的浏览器（例如IE11，Firefox，Chrome，Opera Safari 8或Windows 10 Technical Preview中的Project Spartan）中启动它，然后像在FPS游戏中一样在场景内移动。 按“ s”键启动一些球/球，按“ b”键启动一些球。 使用鼠标，您可以单击一个球体或框以在其上施加一些冲力。

了解碰撞

查看Wikipedia 碰撞检测定义，我们可以看到：

碰撞检测通常是指检测两个或多个对象的相交的计算问题。 尽管该主题通常与在视频游戏和其他物理模拟中的使用相关，但它在机器人技术中也有应用。 除了确定两个物体是否已碰撞之外，碰撞检测系统还可以计算碰撞时间（TOI），并报告接触歧管（相交点集）。 [1] 碰撞响应用于模拟检测到碰撞时发生的情况（请参阅物理引擎 ， 布娃娃物理 ）。 解决碰撞检测问题需要大量使用线性代数和计算几何学的概念。”

现在，让我们将该定义打包成一个很酷的3D场景 ，它将作为本教程的起始基础。

您可以像在现实世界中一样在这个伟大的博物馆中移动。 您不会掉落在地板上，穿过墙壁或飞翔。 我们正在模拟重力。 所有这些似乎都很明显，但是需要大量计算才能在3D虚拟世界中进行模拟。 在考虑冲突检测时，我们需要解决的第一个问题是它应该有多复杂？ 确实，测试2个复杂的网格是否碰撞可能会花费大量CPU，而使用JavaScript引擎则要花费更多的CPU，因为JavaScript引擎很难将其卸载到UI线程以外的其他东西上。

为了更好地了解我们如何管理这种复杂性，请浏览此桌子旁边的埃斯皮利特博物馆：

即使在右侧似乎有一些可用空间，您也会被桌子挡住。 这是我们的碰撞算法中的错误吗？ 不，不是（babylon.js中没有错误！;-)）。 这是因为构建了此场景的3D艺术家Michel Rousseau可以选择这样做。 为了简化碰撞检测，他使用了特定的对撞机。

什么是对撞机？

您可以将它们放入简单的不可见几何图形中，而不是针对完整的详细网格测试碰撞。 这些对撞机将充当网格物体的表示，而将由碰撞引擎使用。 在大多数情况下，您不会看到这些差异，但是它将使我们使用的CPU少得多，因为其背后的数学运算要容易得多。

每个引擎至少支持两种类型的对撞机：边界框和边界球。 通过查看以下图片，您会更好地理解：

摘自： 计算机可视化，射线追踪，视频游戏，边界框的替换

这个漂亮的黄色甲板是要显示的网格。 我们可以尝试将其插入最佳边界几何体中，而不是对每个面进行碰撞测试。 在这种情况下，与球形相比，盒子充当网状冒名顶替者似乎是更好的选择。 但是选择实际上取决于网格本身。

让我们回到Espilit场景，以半透明的红色显示不可见的边界元素：