Babylon.js v2.1 有什么新内容？在最新浏览器中使用 WebGL 和 3D

David Catuhe

5.00/5 (1投票)

2015 年 7 月 14 日

CPOL

7分钟阅读

12090

微软的 babylon.JS 团队最近发布了一个新更新（v2.1），其中包含了一系列用于构建基于浏览器的 3D 体验的新工具和改进工具。在本文中，我将带您了解一些主要更新，并提供您可以自己尝试的演示和沙盒构建链接。

微软的 babylon.JS 团队最近发布了一个新更新（v2.1），其中包含了一系列用于构建基于浏览器的 3D 体验的新工具和改进工具，例如《刺客信条：海盗》和《飞行街机》。在本文中，我将带您了解一些主要更新，并提供您可以自己尝试的演示和沙盒构建链接。

首先，感谢社区。在过去的几个月里，我们收到了比以往任何时候都多的社区支持。感谢所有这些出色的人们，我们得以发布了大量的全新功能和改进！

那么，我们开始吧！您可以在此处找到所有代码： https://github.com/BabylonJS/Babylon.js/releases/tag/v2.1

Unity 5 导出器

Unity 是一个很棒的工具，可以创建几乎可以在所有操作系统上运行的游戏。我喜欢 Unity 5 WebGL 导出器，它是将所有游戏导出到 WebGL/ASM.JS/WebAudio 网站的好方法。

为了完成此解决方案，如果您想导出网格以获得更轻的投影，可以在没有 ASM.JS 的情况下运行，现在可以安装 Babylon.js 导出器： https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Unity%205

安装后，导出器允许您通过转到 Babylon.js 导出器菜单来导出场景

几秒钟后，将生成一个 .babylon 文件以及相关的纹理

您现在可以从您的 JavaScript 项目加载此 Babylon，或直接使用 Babylon.js 沙盒进行测试： http://www.babylonjs.com/sandbox

贴花

贴花通常用于在 3D 对象上添加细节（弹孔、局部细节等）。内部贴花是由前一个网格的一个子集生成的，并带有一个小的偏移量，以便出现在其上方。

偏移量可以看作是使用 CSS 时的 zIndex 属性。没有它，当两个 3D 对象完全处于同一位置时，您会看到 Z 冲突问题。

创建新贴花的代码如下

var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);

例如，在以下演示中，您可以单击猫来在上面应用一些弹孔贴花： http://www.babylonjs-playground.com/#1BAPRM

SIMD.js

Microsoft Edge 与 Firefox 和 Chrome 一起宣布支持 SIMD.js，这是一个允许您直接从 JavaScript 代码利用多标量 CPU 原始功能的 API。这对于矩阵乘法等标量运算特别有用。

我们决定（在 Intel 的大力帮助下）将 SIMD 支持直接集成到我们的数学库中。

例如，这会导致此代码（其中相同的操作应用了 4 次）的演变

改为

主要思想是将 SIMD 寄存器加载数据，然后执行一次指令，而以前需要多次指令。

您现在可以直接在我们的网站上尝试： http://www.babylonjs.com/scenes/simd.html

此演示试图保持恒定的帧率（默认为 50fps），同时每秒添加一个新舞者。这会导致大量的矩阵乘法来为舞者使用的骨骼进行动画。

如果您的浏览器支持 SIMD，您可以启用它并看到性能提升（请注意，目前， Microsoft Edge 仅在 ASM.js 代码内支持 SIMD，但此限制将在未来版本中取消）。

碰撞 Web Worker

Ranaan Weber（Babylon.js 的顶级贡献者之一）付出了巨大的努力，通过允许 Babylon.js 在专用 Web Worker 上计算碰撞来极大地改进了碰撞引擎。

在此之前，如果您想在场景中启用碰撞，最终会在对象周围添加不可见的冒充者以减少所需的计算。现在这仍然有效，但由于计算不是在主线程上进行的，因此您可以轻松处理更复杂的场景。

例如，让我们看这个场景，其中有一个相当不错的网格（一个漂亮的头骨），并且相机启用了碰撞（这意味着如果您使用鼠标滚轮，您将无法穿过头骨）。此演示不使用冒充者进行碰撞，而是使用实际网格本身，该网格有超过 41000 个顶点需要检查。

在常规碰撞下，主线程必须同时处理渲染场景和计算碰撞。

启用 Web Worker 后，主线程不必关心碰撞，因为 Web Worker（即另一个线程）正在处理它。鉴于如今几乎所有 CPU 至少都有 2 个核心，这是一个非常棒的优化。

要在 Web Worker 上启用碰撞，您必须执行此代码

scene.workerCollisions = true|false;

要了解更多关于碰撞的信息： http://doc.babylonjs.com/page.php?p=22091

Raanan 还就此主题撰写了两篇精彩的文章

新的阴影引擎

为场景添加阴影总是能提高真实感。上一版阴影引擎只能处理方向光的动态阴影。新版本增加了对聚光灯的支持，以及两种新的滤镜来产生非常漂亮的柔和阴影，您可以在此演示中看到： http://www.babylonjs.com/?SOFTSHADOWS

另一个演示向您展示了您现在可以投射动态阴影的各种选项： http://www.babylonjs.com/?ADVANCEDSHADOWS

要深入了解阴影，请阅读相关文档： http://doc.babylonjs.com/page.php?p=22151

参数化形状

Jerome Bousquie（另一位顶级贡献者）添加了大量基于参数化形状的新网格。

到目前为止，您在 Babylon.js 中看到的が基本网格具有预期的形状：当您创建球体网格时，您期望看到球形。盒子网格、圆环体、圆柱体等也是如此。

还有一类网格，它们的最终形状不是固定的。它们的最终形状取决于用于特定函数的某些参数。因此，我们将这些网格称为“参数化形状”。

Jerome 使用这些参数化形状，将以下形状添加到开箱即用的网格列表中

丝带 (http://www.babylonjs.com/?RIBBONS)
圆盘
虚线
车床
管

如果您想了解更多关于参数化形状的信息： http://doc.babylonjs.com/page.php?p=24847。

Jerome 还创建了一个教程来帮助您更好地理解丝带： http://doc.babylonjs.com/page.php?p=25088

新的镜头效果

Jahow（另一位顶级贡献者）使用 Babylon.js 的后期处理渲染管线，让您可以实现媲美照片的真实感。

管线中使用了两个后期处理效果

一个“色差”着色器，它在屏幕上轻微地偏移红色、绿色和蓝色通道。这种效果在边缘处更强。
一个“景深”着色器，它实际上比这做得更多

镜头边缘的模糊
镜头畸变
景深模糊和高光增强
景深“散景”效果（模糊区域中出现的形状）
颗粒效果（噪点或自定义纹理）

您可以在 Playground 的实时演示中尝试： http://www.babylonjs-playground.com/#DX6AV

一如既往，如果您想了解更多： http://doc.babylonjs.com/page.php?p=24841

还有更多内容

如前所述，这只是我们添加的所有功能的一部分。因此，请随时使用以下链接进行自行测试

主网站： http://www.babylonjs.com/
GitHub 仓库： https://github.com/BabylonJS/Babylon.js
通过 Playground 学习和实验： http://www.babylonjs.com/playground
文档： http://doc.babylonjs.com/