日志

Blend4Web vs Unity: WebGL 的性能比较

2016-12-26

编者序言

这篇文章最初在 Habrahabr发表 ,它是一个流行于 IT 专业人员的俄罗斯网站。这个主题主题引发了成千上万读者的兴趣并留下了几十个评论。我们很乐意的介绍这个关于 Unity WebGL 和 Blend4Web 性能上非常有趣的研究翻译,其中考虑了报告的问题 以及针对两个引擎基准做最新的版本更新。

简介

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

源文件

请随意测试并分享自己的经验!

评论
注册登录 后发送信息。