Blend4Web vs Unity: WebGL 的性能比较

简介

Unity 引擎开发者宣布于2015年十二月“官方正式支持”WebGL。自此点看来，Unity 可被认为是 3D Web 领域的竞争对手 。所以能够对成熟和完备的 Blend4Web 和 Unity 进行有趣的功能比较。

我建立了三个不一样复杂度的测试应用做为基准。这些基准专为两个引擎同时建立，彻底对称。他们的场景，对象，纹理，甚至 材质设置几乎相同。没有针对任一方引擎有特别的优化或不利之处。使用默认的开箱即用功能。

虽然在某些状况下，我只能即兴。尤为是，为了使屏幕分辨率的移动设备上相同，一行相应的 Blend4Web 文件代码被添加到 Unity HTML 文件中（咱们要公平，对吧？）：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

全部场景和模型都在 Blender 准备，而后通过纹理和导出到引擎中。在某些状况下，由于他们应该刚好在哪里，因此我使用 Empty空 物件放置照相机和光源代替(由于这些 Unity 没法从 blend 文件导入)。

比较基于几个标准: loading time加载时间，FPS (亦称 frames per second 帧速率)和 memory consumption内存消耗。此外，加载时间测量两次: 首先，是一次冷 启动与浏览器缓存清除，而后做为从缓存中检索大部分数据的热启动。这有助于咱们肯定哪些引擎能够在浏览器启动场景时， 有更快，更好的效率。您知道的，人们一般不喜欢等过久...

第一个测试

这项和随后的试验是在谷歌 Chrome 53 浏览器于 PC 机上进行（英特尔 i5-3570，8RAM，GTX 650，屏幕分辨率为 1680х1050），摩托罗拉 Nexus 6，三星 Galaxy S6 Edge 和 苹果 iPad 3（Safari 10 浏览器）。

这是一个很是简单的场景，相似于一个游戏的设计。有几个模型，几个光源和基本的动画。这里没有使用先进的技术。

试验 #1. 加载时间，冷启动（以秒为单位，越少越好）。

测试结果已经颇有趣了。咱们可看到，Blend4Web加载场景比 Unity 快得多。

这是由于创建一个 WebGL 项目时，Unity，在默认状况下，压缩了文件(至关大)。而后，下载完成后，应用程序在客户端应用 程序中完成对客户端提取。固然，这须要额外的时间。别忘了屏幕加载，这增长了更多的几秒钟，也与 WebGL 自己的初始化 有关。第二个表（热启动）显示两个引擎的效率差别特别惊人：

试验 #1. 加载时间，热启动（以秒为单位，越低越好）。

这是引擎需显示并加载场景的“确切”时间。Blend4Web 几乎一瞬间，而其竞争对手则须要六倍的时间。固然，您可经过移除启动画面来缩短加载时间，付费版的 Unity 会移除它，但这不太可能使得原本的初始化加快。

试验 #1. 帧速率 (越多越好)。

你们最喜欢的 FPS 也就是一个很是重要的标准了。没有人喜欢冻结或停顿。

在这里，Blend4Web 与 Unity 表现几乎不相上下，但只有在 PC 机上。在移动设备上的应用，Blend4Web 以 60 FPS“顶到天了”。不幸的是，彷佛没办法在移动浏览器上限制 FPS。而在台式机上，谷歌 Chrome 浏览器则运行在“--disable-gpu-vsync” (禁用 GPU 垂直同步) 选项上。

Unity 显示了一个小不一样的结果。只有 Galaxy S6 可以取得扎实的成效。苹果 iPad 3 能只得 9 分，而摩托罗拉设备彻底没法运 行测试场景。

试验 #1. 内存消耗，MB（越少越好）。

内存消耗数据是由谷歌 Chrome 桌机浏览器里边的 Task Manager任务管理器 中取得。正如您所见，这两款引擎都表现出很好的效果。

说实话，我期待着一个不一样的图片来解释 Unity 应用程序形成的浏览器崩溃。但测试没有显示出内存消耗的主要差别，至少对 于这个简单的场景来讲。使人惊讶的是，这使得在 Nexus 上的浏览器崩溃。

第二个测试

接着，这里是“海洋中的海岛”场景。它还没有优化，既笨重又肥大。相信我，我没有作任何事情来使它适合运行在移动装置上 ！

这个场景最复杂的事是让两个引擎看来同样。这在 Blend4Web 很容易 – 模型和景观都在 Blender 里边创造， 水的材质 和环境 也在里边作了，没有什么复杂。

但对 Unity 来讲，有些问题。首先，我决定不使用 Unity 提供的地形。雕塑和植树容易且有趣，但这种解决方案尽管很方便，却可能得多花点时间。因此，我直接从 Blender 导出了一个场景，包含景观模型和已放置好的对象。这让我使两个场景尽量 地类似。

其次，像是树叶从背面透明方面，基本的 Unity 着色没法使用双面材质。我试图用其余现成的材质像“树叶”，但由于某种原 因，它并无帮助。因此我决定不进一步研究，而是发现了在线的第三方 着色材质，这完美的完成个人任务。

但，就让咱们瞧瞧测试结果吧，由于真是使人震惊！

试验 #2. 加载时间，冷启动（以秒为单位，越少越好）。

试验 #2. 加载时间，热启动（以秒为单位，越少越好）。

第一件事是，在运行 Unity 应用程序时，Nexus 的浏览器再次崩溃。Unity 也表现出很长，几乎太长，的加载时间。有趣的是 ，这引擎，“冷”和“热”的启动时间几乎没有区别。Unity 彷佛花费了难以想象的时间准备展现的场景。

试验 #2. 帧速率 (越多越好)。

这项测试在性能方面也表现出有趣的结果。两个引擎在 Galaxy 设备上显示几乎相同的 FPS 帧数，但在 PC上的差别很是显着。 有趣的是，在不一样的引擎中改变场景的大小也会对 FPS 带来不一样的影响。当从相机看着岛上缩小退后时，Unity 到达最高值。 而 Blend4Web 是尽量靠近岛时，会表现出最好的结果。看来，这两个引擎使用的是不一样的优化方法。该表格显示最大可能 的 FPS 值时，而这对于特定引擎是最有利的。

如今，关于苹果 iPad 3 的意外崩溃…是的，您可看到，这已经加入了Nexus 设备。不像摩托罗拉，虽然，它奋勇战斗到了极 限，接着在启动场景以后崩溃了。因此咱们可以测量加载时间，但，在这种状况下 Unity 应用程序的工做容量原来是零。

也许缘由隐藏在下表中。

试验 #2. 内存消耗，MB（越少越好）。

第三个测试

我固然也不能错过物理这块，因此最后的测试是专为此而来。场景中有个立方体，是封闭的内部空间，里边有几十个小球。立 方体缓慢旋转，使球体滚动。

没有复杂的着色和效果。现场只使用刚体和简单的碰撞。

像往常同样，在这个场景里它花了一些努力使物理现象出现。我想您已经猜出了问题是什么。

这些球体顽强地试图离开笼子，并简单地滚出本身的极限。这现象在两个引擎都发生。最终，在PC平台上，我找到一个可接受 的解决方案，全部对象都如预期的那样，但在移动设备上，这场景看来很好笑。所以，引进了一个新的测试标准:物理稳定，或 “外围球体”，我是这么叫它的。现场景跑了一分钟，而后检查笼子里留下了多少球。留下的球越多，越好。

如今...

试验 #3. 加载时间，冷启动（以秒为单位，越少越好）。

试验 #3. 加载时间，热启动（以秒为单位，越少越好）。

试验 #3. 帧速率 (越多越好)。

注意在移动设备上 Blend4Web 场景同等的 FPS 数值。这是安全的假设，若是不受垂直同步的限制，该引擎能够提供多于60 帧以上的数值。这是由于 Blend4Web 能够在一个单独分开的线程（处理器）中处理物理过程。据我所知，这是 Unity 没法作 到的事情。这是得到如此高 FPS 数值的缘由，同时，如您所见，稳定至关性高。

试验 #3. 物理稳定性（球失去的百分比，越少越好）。

如同我所说，Unity 和 Blend4Web 在 PC 平台上的表现都很好。全部的球体都待在它们该待的地方。

Galaxy S6 （Blend4Web）是在移动设备的领导者，而 iPad 3（Blend4Web）无疑是个局外人。Unity 应用程序于此标准测试下失败， 但在 PC 平台除外。

一切的一切，Unity 在 WebGL 的物理表现上，整个留了个很差的印象。加载场景后，屏幕冻结，几秒钟 后，它才终于达到了期待已久的 FPS 数值。这固然只在 PC 。在移动设备上，一切都更加地使人沮丧。少少几秒钟内大部分的 球体就掉出来了。而后，场景几乎空了，因此该应用程序可以实现扎实的每秒 60 帧速率。

这么不靠谱的可能缘由，或许是 Unity 的物理行为在如下的记忆内存测试结果撒了谎。

试验 #3. 内存消耗，MB（越少越好）。

与前两个场景相比，第三个证实了更多的内存消耗，两个引擎都相同。

Unity 应用程序以一种很是奇怪的方式表现。就在场景启动后，它消耗了大于 700 Mb 的内存，几秒钟后，这个数值降到400 。甭说，这时候，不给力的移动设备已失去了它们全部的球。所以它们的 FPS 数值不许确，由于它们在渲染一个空的立方体， 里面没有物件。

如何解释这种行为，这我还真不知道，但事实是事实: Unity 在 WebGL 的物理表现没法给人留下好印象。

结语

测试结果证实有点使人惊讶。我但愿这篇文章不只对用户有帮助，且对开发者也有帮助。

这里是连接的文件。请注意，Unity 连接实际上有做用，他们只是没显示装载。并请铭记在心，Unity 载入相对慢得多。

测试 #1: Blend4Web | Unity

测试 #2: Blend4Web | Unity

测试 #3: Blend4Web | Unity