做网站后台数据库建设跨境电商平台注册开店流程

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

Microsoft的babylon.JS团队最近发布了一个新的更新（v2.1），其中包含许多新的和经过改进的工具，可用于构建基于浏览器的3D体验，例如刺客信条：海盗（Creded Pirates）和Flight Arcade 。 在本文中，我将引导您完成一些主要更新，以及指向演示和沙箱构建的链接，您可以自己尝试。

首先，快速向社区表示感谢。 在过去的几个月中，我们获得了比以往更多的面向社区的支持。 感谢所有这些出色的人，我们能够发布很多新功能和改进！

因此，让我们开始吧！ 您可以在此处找到所有代码。

Unity 5导出器

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

要完成此解决方案，如果要将网格导出到较轻的投影而无需ASM.JS即可运行，现在可以安装Babylon.js导出器： 在此处提供 。

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

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

现在，您可以从JavaScript项目中加载此Babylon，或使用Babylon.js沙箱直接对其进行测试。

贴花

贴图通常用于在3D对象上添加细节（子弹孔，局部细节等）。 在内部，贴花是由前一个子集生成的网格，具有较小的偏移量，以便显示在其顶部。

使用CSS时，偏移量可以像zIndex属性一样看到。 没有它，当两个3D对象正好在同一位置时，您将看到z战斗问题：

创建新贴花的代码如下：

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

例如，在此演示中 ，您可以单击猫在其上应用一些弹孔贴花。

SIMD.js

Microsoft Edge以及Firefox和Chrome宣布支持SIMD.js，这是一个API，可直接从JavaScript代码使用多标量CPU的原始功能。 这对于矩阵乘法之类的标量运算特别有用。

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

例如，这导致了这种代码的演变（其中同一操作被应用了4次）：

至：

主要思想是向SIMD寄存器加载数据，然后仅执行一条需要多条指令的指令。

您现在可以直接在我们的网站上尝试。

本演示试图保持恒定的帧速率（默认情况下为50fps），同时每秒添加新的舞者。 这导致大量矩阵乘法来为舞者使用的骨骼设置动画。

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

碰撞网络工作者

Ranaan Weber （ Babylon.js的最大贡献者）做了很多工作，通过允许Babylon.js在专用的Webworker上计算碰撞来大大改善碰撞引擎。

在此之前，如果要在场景上启用碰撞，最终会在对象周围添加不​​可见的冒名顶替者，以减少所需的计算量。 现在这仍然有效，但是由于未在主线程上执行计算，因此您可以轻松解决更复杂的场景。

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

对于常规碰撞，主线程必须工作在渲染场景并计算碰撞。

启用了Webworker后，主线程不必关心冲突，因为Webworker（因此是另一个线程）可以在其上工作。 如今，由于几乎所有CPU都至少拥有2个内核，因此这是一个非常了不起的优化。

要在Webworker上启用冲突，您必须执行以下代码：

scene.workerCollisions = true|false;

要了解有关碰撞的更多信息， 请转到此处 。

Raanan还就该主题写了两篇很棒的文章：

• Babylon.js的使用工作者的冲突
• 无需单独的JS文件即可自动构建Web Workers

新阴影引擎

向场景添加阴影总是可以增强真实感。 阴影引擎的早期版本只能处理定向光的动态阴影。 新版本增加了对聚光灯的支持，以及两个新的滤镜以产生非常好看的柔和阴影，如本演示中所示 。

该演示向您展示了投射动态阴影所需的各种选项。

要进一步了解阴影，请阅读相关文档 。

参数形状

Jerome Bousquie （另一位杰出贡献者）基于参数形状添加了许多新网格。

到目前为止，您使用Babylon.js看到的基本网格都具有预期的形状：创建球形网格时，您希望看到的是球形。 箱形网格，圆环，圆柱体等也是如此。

还有另一种网格，其最终形状是固定的。 它们的最终形状取决于特定功能使用的某些参数。 因此，我们将这些网格称为“参数形状”。

Jerome使用这些参数化形状，将以下形状添加到了现成的网格列表中：

• 色带
• 碟片
• 虚线
• 车床
• 管

如果您想了解更多有关参数形状的信息， 请参阅本指南 。

Jerome还创建了一个教程，以更好地理解色带： 在此处阅读 。

新镜头效果

Jahow （另一位杰出贡献者）使用了Babylon.js的后处理渲染管道，使您可以实现照片般的真实感。

管道中使用了两个后处理：

1. 一个“色差”着色器，可以在屏幕上稍微移动一些红色，绿色和蓝色通道。 此效果在边缘处更强。
2. 一个“景深”着色器，实际上做的比这还要多：

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

您可以在操场上进行现场演示。

与往常一样，如果您想走得更远： 请访问此页面以获取更多信息 。

等等

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

• 主要网站
• GitHub回购
• 通过尝试Playground学习
• 文献资料

JavaScript的更多动手实践

微软在许多开源JavaScript主题上有很多免费的学习知识，我们的使命是利用Microsoft Edge创造更多的知识。 这里有一些要退房：

• Microsoft Edge Web Summit 2015 （使用新的浏览器，新的Web平台功能以及社区来宾演讲者的完整预期系列）
• // BUILD /和Windows 10的构建 （包括用于站点和应用程序的新JavaScript引擎）
• 在不中断网络的情况下推进JavaScript （Christian Heilmann最近的主题演讲）
• 托管的Web应用程序和Web平台创新 （深入研究诸如歧管JS之类的主题）
• 使您的HTML / JavaScript更快的实用性能提示 （从响应设计到休闲游戏到性能优化的7个系列文章）
• 现代Web平台JumpStart （HTML，CSS和JS的基础知识）

还有一些免费的入门工具： Visual Studio Code ， Azure试用版和跨浏览器测试工具 -所有这些工具都可用于Mac，Linux或Windows。

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您共享Microsoft Edge和新的EdgeHTML渲染引擎 。 在Modern.ie上获取免费的虚拟机或在Mac，iOS，Android或Windows设备上进行远程测试

From: https://www.sitepoint.com/whats-new-babylon-js/