用2x做项目如今已经是第4个年头，在14年时刚接触2x导出lufy和egret的时候，就认定这是一款不错的工具。在此非常感谢小可坚持不懈的维护这款软件长达四年之久，前后迭代了4个四个大版本。如今终于作者终于打算开始收钱了。这两天前后和小可聊了很多，从过去到未来，从市场运营到产品设计无所不谈。最终也终于互相在群里立了个flag是关于 Adobe afterEffect转threejs的。

之所以谈到这个话题前不得我谈谈我的认识和看法。在乔帮主屏蔽Flash之后10年开始了移动互联网普及，上海本土互动圈在2011年前后彻底抛弃了flash转投移动端H5,在这时候adobe给出了最初的方案createjs，国内也有lufy写了lufylengend引擎，继而又有大厂白鹭腊鸭进局面。大家都在做的是同一件事——把当年Flash的轮子重新造一个。因此在作品表现上，互动圈关注的都是如何把一个曾今PC端的交互体验搬到移动端在手机内运行，而这期间所有的引擎都在为这个目标而努力。这期间做的最好的当然就是那个败家的adobe，他借助于自己的先发优势和gskiner研发的createjs合作给自己延续了寿命。flash+creatjsToolKit是当时flash导出的不二方案。

直到3年后，2014年小可研发的2x迈入了我们的视线，当然最重要的是运行效率远高于creatjs（主要是create底层优化的不好）。当时的2x基于国产轮子lufy和白鹭都甩开createjs很大一截的性能优势。所以当然没有第二选择的选了2x转白鹭，因为白鹭曾今的门面7yue以及巨额风投的原因。

在2014，2015两年内，大量的基于类似于pc搬运移动的项目此起彼伏。客户对于这样的玩法都比较认可。而到了16年年中项目量骤然下降。很多朋友都说和经济不好有关。不过在我看来主要还是玩腻了。其中有两点我觉得不合适：

1、PC插着网线通讯流量随便玩，当年基于flash的互动是重互动，我们称之为“富媒体”交互才得到了发展。而移动互联网起初几年并不便宜。大家欣赏一个H5的投入成本是很高的。在14年左右借助于微信2.0以后才有的朋友圈功能，成了H5引流的主要平台。然而问题来了，用户凭啥要点开一个带有H5吸流量的链接呢？因此1-2年玩下来后客户从数据分析角度都明显觉得H5交互重度互动网站PV非常低，而跳出率非常高。因此做重度H5是非常不划算的低效广告运营。

2、审美疲劳了，客户找代理制作一个H5从设计到开发成本也比较高昂，然而大家都在做，而且彼此没啥新意。没有新玩法就光show show动画对客户而言没啥意思，在刚出来时候显得自己做H5好玩以前没玩过，到了满大街都是这类H5的时候，固然审美疲劳了。吃力不讨好。因此打算换换玩法。

因此到了16年，大量视频H5出现了。同时微信底层也支持了 webkit -inline的属性可以让视频卡在播放器里不弹出来，这样从表现和体验上都非常惊艳和贴切，最著名的就是腾讯新闻那个 吴亦凡视频H5，吴亦凡从新闻的长页面里突然跳了出来然后展示一段街舞啥的。

视频玩了一年样子，在17年初出现了直播这种形势，H5也有不少类似的表现。但就如当年在H5里模仿Iphone手机来电这种形式一样，烂大街的H5题材永远都有一大批的抄袭者。也无法带来更大的用户PV.

在16年淘宝造物节里，2.0的shrek用自主研发的css3d引擎开发了一个基于全景3D展示的插画。而在16年双十一之际直接就用threejs的webgl技术做了一个纵深感很大的淘宝双十一邀请函。在17年淘宝双十一的邀请函依然离不开threejs的表现。而腾讯这边腾讯浏览器使用粒子拼凑效果制作了一个H5也使用了threejs。

webgl的使用率在如今的H5项目里比重越来越大。而使用门槛却越来越高。

目前的threejs可以支持blender导出的gltf格式的带动画的模型，并支持PBR真实光照模型的渲染。在2D上支持spine导出的骨骼动画。唯独没有一款方案可以让他兼容flash或者ae制作的motiongraphic动画。而我们曾经做过动画的都明白通过ae的2.5D视角可以做出比单纯flash酷炫上百倍的动画体验以及ae自带的摄像机，在美术使用角度比需要建模的3D软件好用很多体验上更接近flash，而在表现上补足了flash根本没法介入的3D视觉表现。因此有了最初文中头部提到的ae2threejs的话就不需要像如今一样开设两层canvas从而非常影响效率。

当然如果全局部署在threejs架构上，还能利用webgl特有的shader功能进行特效制作，可以实现2dcanvas几乎无法实现的效果，比如图片像素级的滤镜处理，有了这个我们可以制作类似于曾今只能用序列帧才能实现的破屏效果；还有图层滤镜，还记得我们曾今跟设计师说不要用正片叠底吗？未来不仅可以用而且可以做出花儿来。像素级的处理还包括鱼眼放大镜效果，图片halftone，水彩笔素描卡通等滤镜才能有的效果。关于这个你去shadertoy 和 interactiveshaderformat 去玩玩就全懂了。

当然还可以通过顶点着色器玩粒子，比如沙画一幅照片，用户手指滑到哪里就移开那些，这些效果在canvas2d层面基本是无法做到的，即使你能写也一定是卡死的。而在基于GPU并行运算的高效shader里，是轻而易举的。

因此我认为2D引擎在多，都不如一个threejs来的有效，2D层就当做3d的一个面片或者一些z为0的面片进行动画即可。而表现余地却非常大。这种封装结构要好于白鹭以及腊鸭那些为游戏开发而设计的引擎。他们的3d层和2d层基本都没法更自由的操作一般都是2d在3d的前面。并且从工具上他们都是基于unity导出的，对于美术学习上更适合游戏而不是广告交互人员。

所以我的总结就是只要为threejs开发一个良好的工作流，基本就可以秒杀所有的2D渲染引擎了。并在未来给教育广告带来新的活力。

而这个工作流具备以下特质。

1、基于motionGraphic的传统flash或者ae的支持。（方便广告影视的美术转型）

2、能对于3D模型有很好的处理以及支持。（对于threejs上层进行更快捷的模型导入以及处理的功能）

3、2d骨骼动画。（目前spine已经支持）

4、各种组件以及更方便的threejs编辑器（有待开发，可以考虑unity或者blender内部支持）

5、基于后处理的全局滤镜特效以及片元着色器处理（未来可以针对图片以及任何mc原件进行处理）

6、粒子渲染，流体渲染，物理引擎（有很多现成框架，也有待自己封装一些纳入工作流）

。。。有待补充

以上这些是我目前能想到个比较完美的基于threejs的工作流，基本覆盖了2d和3d所有项目需求甚至比如今的纯2d的方案更上一层楼。当然如今的anniejs也非常完美，导出快捷，并支持了小游戏小程序等框架。

但目前所有的最好，只是性能上的差异。在我们这个求快求变的广告领域，优化远不及创新。或许在未来长时调用摄像头也会普及，虽然目前只有ios10以及安卓chrome下才可以玩。因此ar,vr，动作识别，更复杂的捕捉都会是玩法上的挑战。客户不会满足于现在，只有当我们展示未来给他们看的时候，才能给自己未来。

期待小可和自己能在接下来的时间里创作出更新的佳绩。不知不觉扯了那么多。不知正在阅读的你能读懂几分，认可几分，欢迎不同意见以及想法的朋友下面留言探讨。谢谢。