babylon.js
本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
Microsoft的babylon.JS团队最近发布了一个新的更新（v2.1），其中包含许多新的和经过改进的工具，可用于构建基于浏览器的3D体验，例如刺客信条：海盗（Creed 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对象上添加细节（子弹Kong，局部细节等）。 在内部，贴花是由前一个子集生成的网格，具有较小的偏移量，以便显示在其顶部。
使用CSS时，偏移量可以像zIndex属性一样看到。 没有它，当两个3D对象正好在同一位置时，您将看到z战斗问题：
创建新贴花的代码是以下代码：
var newDecal = BABYLON.Mesh.CreateDecal("decal", mesh, decalPosition, normal, decalSize, angle);例如，在此演示中 ，您可以单击猫在其上应用一些弹Kong贴花。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
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还就该主题写了两篇很棒的文章：
新阴影引擎
向场景添加阴影总是可以增强真实感。 阴影引擎的早期版本只能处理定向光的动态阴影。 新版本增加了对聚光灯的支持以及两个新的滤镜，以产生非常漂亮的柔和阴影，如您在本演示中所看到的。
该演示向您展示了投射动态阴影所需的各种选项。
要进一步了解阴影，请阅读相关文档 。
参数形状
杰罗姆·鲍斯奎 （ Jerome Bousquie） （另一位杰出贡献者）根据参数形状添加了许多新网格。
到目前为止，您使用Babylon.js看到的基本网格都具有预期的形状：创建球形网格时，您希望看到的是球形。 盒子网格，圆环，圆柱体等也是如此。
还有另一种其最终形状不固定的网格。 它们的最终形状取决于特定功能使用的某些参数。 因此，我们将这些网格称为“参数形状”。
Jerome使用这些参数化形状，将以下形状添加到了现成的网格列表中：
- 色带
- 光碟
- 虚线
- 车床
- 管
如果您想了解更多有关参数形状的信息， 请参阅本指南 。
Jerome还创建了一个教程，以更好地理解色带： 在此处阅读 。
新镜头效果
Jahow （另一位杰出贡献者）使用了Babylon.js的后处理渲染管道，使您可以实现类似照片的真实感。
管道中使用了两个后处理：
- 一个“色差”着色器，它会在屏幕上稍微移动一些红色，绿色和蓝色通道。 此效果在边缘处更强。
- 一个“景深”着色器，实际上做的比这还要多：
- 镜头边缘模糊
- 镜头变形
- 景深模糊和高光增强
- 景深“散景”效果（形状出现在模糊区域）
- 颗粒效果（噪声或自定义纹理）
您可以在操场上进行现场演示。
与往常一样，如果您想走得更远： 请访问此页面以获取更多信息 。
等等
如前所述，这只是我们添加的功能中的一小部分。 因此，请随时使用以下链接自行进行测试：
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设备上进行远程测试
babylon.js
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
