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

4564564561

腾讯DeepOcean原创文章：http://dopro.io/web-3d-power.html
得益于手机厂商爆炸式的配置堆砌与移动互联时代到来，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性能等方面做一下对比，其大致数据如图所示：




可以发现，其中白鹭、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得一分。




02｜模型体积
我们准备了两个模型，一个是比较简单的狼，另一个则是面较多的巨龙。如下图所示：








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




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




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




为啥呢？？这不科学啊！
因为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代码：




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




综合这两段代码可以看出，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无疑是一个非常棒的帧率。




2. 内存占用
内存占用同样也是一个非常重要的指标，因为手机不比PC电脑，内存资源比较有限，如果内存占用的越少则意味着它在更多的手机上能流畅的展示，我们通过Chrome工具与Android studio模拟器检测页面的内存占用。
首先是Chrome任务管理器（打开方式：浏览器右上角选项卡→更多工具→任务管理器），通过这个工具我们可以观察两个页面占用的内存情况，从图中我们可以发现，Three.js与Layabox的内存占用都在84M左右，差距可以忽略。




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




综合上面两次测试，我们可以发现Three.js与Layabox在Web中帧率、内存占用差距都不大，并且性能都不错，足以满足日常的轻量3D开发。所以Three.js与Layabox各得1分。
  
0x4 总结
经过上面一系列的分析，Three.js与Layabox其最后比分为3:3持平，各有优劣。对于轻量的3D开发，它们开发门槛都不算高，其中Three.js整体的资源体积小于Layabox，而Layabox在模型导出侧优于Three.js。条条大路通罗马，大家可以根据各自需求来具体选择。

欢迎关注"腾讯DeepOcean"微信公众号,每周为你推送前端、人工智能、SEO/ASO等领域相关的原创优质技术文章：

看小编搬运这么辛苦，关注一个呗：)

http://weixin.qq.com/r/IiiVjTvEs2bMrX-u930w (二维码自动识别)

流云

babylonjs呢?

NMZR1991

太多太多了，学无止境

yjy289439

babylonjs我用了两年，用ts开发不错。

CUA-4109

three.js很强大。但是它的UI层面几乎为0，很难在实际游戏项目中实用。cocos creator已经支持3d动画模型。微软旗下Babylon.js其实是这当中表现最均衡的3d webgl引擎，可惜实际项目偏少，社区搞不起来，微软没用心。

show712416

视觉效果差了点，离商业应用还有距离

wqt0806

babylonjs光一个gltf的扩展支持度就秒你列的所有了。https://github.com/cx20/gltf-test

fran558

如果对于3D模型（比如3D打印、工业设计、机械设计）类文件的可视化，我还试过一个比three.js更封装简单的开发包，叫EverAPI（https://evercraft.co/zh/api），还挺简单的，零基础10分钟可以跑通。最少只需要四到五条代码，就可以达到在线3D可视化的功能，支持stl、obj等常用格式，还有stp、igs等工程格式，并且提供了更多的模型后处理操作功能，也可以试试。

Blueferry

EverAPI呢？（https://https://evercraft.co/zh/api）

№_唯宠、那女子

首先，引擎多了去了。其次没什么可比性，3d方面基本是丢给GPU，性能是一样的，内存真是web痛，比较这个参数，真是智者见智。再者，three算是开发者用的，很多文件都是demo性质的库，实际并不是工具链的一环。

异乡人

第一个图，厘米秀不支持3D怎么还有10分的3D性能

tanjunkun_gz

web3d是未来发展必然趋势，web3d商品展示欢迎探讨

http://www.lvyaar.com/web3d/5017

最初の

分享微波炉展示http://www.lvyaar.com/web3d/4992

Djrichy

可惜中文太少

流云

感谢，我去试一下

孙潜

无论用哪个，只要用心，技术到位，还是能做出让市场满意的产品或者案例。贴一个在bowell制作的案例 可口可乐（瓶）

甜心萝卜糕

推荐一款2D设计师也能轻松上手的Web3d渲染编辑器，即得宝 ，支持导入3D模型，在线编辑材质，搭建3D场景，保存发布3D页面，同步小程序。

kimicheng

黑洞呢