3D探索——Web 3D哪家强?

timg

得益于手机厂商爆炸式的配置堆砌与移动互联时代到来,html在手机上的效果愈加丰富,Web开发者已经不满足于2D效果的实现,而把目标放到了更加炫酷的3D效果上。

在Web3D百花齐放的今天,和大家简单探讨一下目前主流的3D库。

0x1 常见的3D库

01|Egret

官方将Egret定位为一整套游戏开发的“游戏解决方案”,包括游戏开发框架、开发辅助工具,生态环境相对完善。基于TypeScript进行开发,支持Flash到Egret的高效转换、跨平台支持,可打包为HTML5,以及iOS 和Android平台原生app。

02|Three.js

Three.js的定位是一个基于JavaScript 3D库,但无疑它非常的强大而轻量。从创建简单的3D动画到创建交互的3D游戏,通过暴露简单的API,将3D内容的开发复杂性降至最低。

03|Pixi.js

Pixi与Three.js一样,定义为“2D WebGL renderer with canvas fallback”。它只是一款轻量的2D Webgl库,但同样可以根据它的API来开发游戏,将2D WebGL开发复杂性降到最低。

04|Layabox

Layabox与白鹭一样,也是成熟的整套游戏开发的”游戏解决方案“,同时支持2D、3D、VR的H5引擎,专为高性能游戏而设计,支持ActionScript 3.0,TypeScript,JavaScript编程语言。开发一次,发布flash,HTML5,mobile。

05|Hilo

Hilo 是阿里巴巴集团开发的一款HTML5跨终端游戏解决方案,它可以帮助开发者快速创建HTML5游戏,多种渲染方式, 提供DOM,Canvas,Flash,WebGL等多种渲染方案。

06|Cocos2d

Cocos2d是老牌的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone8,Mac,Windows等平台。

07|厘米秀引擎

厘米秀引擎是QQ轻游戏使用的引擎bricks,为腾讯自研的游戏引擎,脚本层使用JavaScript。bricks引擎支持原生、WebGL,Canvas等多种渲染以及开发方式,开发者可以直接调用bricks引擎,也可以使用第三方游戏引擎封装的进行开发。

 

0x2 基本对比

我们对上述各个框架、引擎在2D Canvas、2D WebGL、3D WebGL、2D性能、3D性能等方面做一下对比,其大致数据如图所示:

3D探索——Web 3D哪家强?

可以发现,其中白鹭、Three.js、Pixi.js、Layabox、厘米秀性能最好,但本文主要探讨的是3D相关开发,所以我们选取Three.js、Layabox两个高性能库/引擎进行对比(Egret引擎过重暂不考虑)。所以接下来主要讨论Three.js、Layabox的各方面对比。

 

0x3 Three.js Vs Layabox

01|库体积

首先我们对比下下这两个库体积,我们发现,Three.js在体积上远远优于Layabox,但Layabox极限精简Gzip后也仅有300K,也算比较轻量级。在JS资源体积这一点上Three.js得一分。

3D探索——Web 3D哪家强?

02|模型体积

我们准备了两个模型,一个是比较简单的狼,另一个则是面较多的巨龙。如下图所示:

3D探索——Web 3D哪家强?

3D探索——Web 3D哪家强?

 

我们分别将其导出为Three.js、Layabox适用的文件,Three.js的模型采用的是json文件,而Layabox则是自己的二进制文件。我们将导出后的模型文件体积进行一下对比,可以发现在未Gzip之前,Layabox对比Three.js还是很有优势的,但是一旦开启Gzip,Three.js在模型体积就远远小于Layxbox了,而Layxbox导出的二进制模型文件无法Gzip比较吃亏,Three.js再得一分。

3D探索——Web 3D哪家强?

但在Three.js导出到json格式这一步中,踩坑无数。可能设计师做出来是这样子:

3D探索——Web 3D哪家强?

而你将这个模型导出到Blender中却成了这样:

3D探索——Web 3D哪家强?

为啥呢??这不科学啊!

因为Three.js导出模型依赖于Blender,所以首先需要将模型导入到Blender中,这一步就非常依赖于设计师在构建模型时的构建方式,经过血与泪的洗礼,大概总结了有以下几点雷区:

  • 控制模型面数

  • 禁用第三方插件

  • 需提供展 UV 贴图

当然这三点仅仅是雷区中的一点点,更多的是需要前端开发者与设计师一起对模型进行磨合,因为1000个设计师有1000中建模方法,所以还是要在实践中不断的磨合、踩坑,才能最终导出完美的模型。

而Layaxbox借助于Untiy可以轻松的将模型导出来,所以Layabox在模型导出这里得1分。

03|实现难度

这一步就是要将3D模型展示在网页中了,Three.js与、Layabox都提供了相对应的接口与方法,能够让我们快速的将导出的数据展示在页面上。

ThreeJS中提供了许多种类的Loader,分别针对不同的使用需求。比如,JSONLoader针对的是.json格式的模型,OBJLoader针对的是.obj格式的模型等等。翻阅网上资料的时候还可以看到SceneLoader的踪影,这就是用来加载整个场景的.json格式文件的。可是在ThreeJS的新版本中,SceneLoader已经被废弃,取而代之的是更为智能的ObjectLoader。ObjectLoader可以判断导出的模型到底是什么种类,从而将它们转化为ThreeJS中的对应对象便于开发者使用。

当然Json格式无疑是最为轻量最为简洁的导出格式,并且可以很好的支持骨骼动画,下图为我们为狼模型编写的Three.js  js代码:

3D探索——Web 3D哪家强?

而Layzbox则简便很多,按照官方给出的Api,直接传入对应的ls文件,就可以加载之前导出的场景。ls文件包含了整个3D场景:模型、材质、贴图、动画、光照贴图等等,可以理解与上述Three.js文件导出的Json相同,仅仅是文件的结构不同。

3D探索——Web 3D哪家强?

综合这两段代码可以看出,Three.js需要手动的创建3D场景中的光源、场景、摄像机等等,但通过Layxbox通过Unity导出的模型仅仅通过导出的配置文件即可创建光源、场景、摄像机。但如果你想对3D场景做更多的定制化、提高场景可控性的话,Layabox也需要手动的添加场景、光源,但与Three.js不同的是,Layabox提供完整的中文Api参考与实例参考,而Three.js 的最新Api则是英文,并且个别Api文档会存在不适用的情况(因为Three.js更新的太快了,某些调整导致Api变更却又没有更新Api文档),所以单纯就易上手一点来看,Layabox再得一分,对新手快速开发会更友好一点。

 

04|性能对比

性能恐怕是开发者们最为看重的一点了,通过上面的简单对比我们可以知道,Three.js与Layabox在3D WebGL中的得分都为满分10分,那么都为10分的他们是否也存在细微的差异?现在我们仔细对比下两款框架/引擎在Web中的性能表现吧。

1. 帧率

首先对比下这它们在Web的帧率,Three.js我们借助stats.js来检测帧率,而Layabox自带帧率监控工具。

因为是性能测试,所以我们测试模型最复杂的龙模型,通过工具可以看到它们的帧率都可以稳定在60FPS,而60FPS无疑是一个非常棒的帧率。

3D探索——Web 3D哪家强?

2. 内存占用

内存占用同样也是一个非常重要的指标,因为手机不比PC电脑,内存资源比较有限,如果内存占用的越少则意味着它在更多的手机上能流畅的展示,我们通过Chrome工具与Android studio模拟器检测页面的内存占用。

首先是Chrome任务管理器(打开方式:浏览器右上角选项卡→更多工具→任务管理器),通过这个工具我们可以观察两个页面占用的内存情况,从图中我们可以发现,Three.js与Layabox的内存占用都在84M左右,差距可以忽略。

3D探索——Web 3D哪家强?

然后我们在进入Android studio开启一个全新的Android模拟器,使用原生的Web view打开上述两个页面,数据如下,我们可以发现他们内存仅有3M差距。

3D探索——Web 3D哪家强?

综合上面两次测试,我们可以发现Three.js与Layabox在Web中帧率、内存占用差距都不大,并且性能都不错,足以满足日常的轻量3D开发。所以Three.js与Layabox各得1分。

 

0x4 总结

经过上面一系列的分析,Three.js与Layabox其最后比分为3:3持平,各有优劣。对于轻量的3D开发,它们开发门槛都不算高,其中Three.js整体的资源体积小于Layabox,而Layabox在模型导出侧优于Three.js。条条大路通罗马,大家可以根据各自需求来具体选择。

3D探索——Web 3D哪家强?

始发于微信公众号: 腾讯DeepOcean

发表评论