玩大了！ 阿里工程师的年会竟然这样搞？

不用邀请函、不用签字板，“笑容”才是唯一的入场凭证。年会还有这样的操作？

最近在阿里巴巴内部就掀起这样一阵“笑容签到”风潮。在年会开场，大家是这样排队刷脸的：

而刷脸成功后，入场人员的花名、头像以及“笑容指数”会实时同步显示在会场大屏幕上，并汇聚成一个“笑脸星球”。

这是阿里巴巴信息平台一群90后工程师，用两周时间开发的一套年会开场秀系统：

观众在经过人脸识别后，系统会根据人脸表情特征，识别出观众的花名（名字）与微笑指数，同时吐出一句“评语”。当笑容越灿烂，评价就会越高。同时通过技术手段，这些信息还会上屏展示与互动。

工程师们在现场调试

不仅是部门年会，在内部一些大型比赛、重要颁奖典礼等活动开场，也逐步用起了这一套科技感满满的开场秀。同时根据活动不同主题，还可以进行个性化定制呈现。

阿里内部一些重要大会陆续使用这套系统开场

究竟这套年会开场秀系统如何实现的？今天，阿里妹邀请到该项目团队中的开发小哥哥探源，来聊聊背后的实现原理与技术方案。

背景

传统大会通常采用的暖场方式是，在大屏幕上循环播放宣传视频，等观众差不多到齐时，一个321的倒计时宣告开始，既老套又缺乏互动。更是白白错过一次向观众展示公司技术与公司人才的机会。

那有没有一种可以将科技感与互动感结合的开场秀呢？恰逢新一财年信息平台部门大会在即，我们想以此为切入点，给大家玩一些不一样的开场。

解决方案

任何一个“靠谱”的前端工程师，肯定会下意识想用H5动画来替代视频。我们的方案是：使用酷炫的H5动画，并且结合智慧园区团队的人脸识别技术实现人员扫脸签到+大屏展示的技术方案。既能运用及展示内部的技术，又能起到不错的暖场效果。

根据方案构想，很快就形成了初版需求demo。梳理一下，可以拆分出下面几点功能：

初始状态下，是默认做自转运动的星球，周围有围绕的卫星

当人员进场时，人脸识别成功后，在屏幕上展示

展示完之后，照片要飞回到自转的球面上，跟着球一起做自转运动

会议开始前，人工控制照片做粒子效果，over

技术方案

当功能拆解后，便是研究怎么实现方案了。出于对效果考虑，准备选择3维动画来创作，并最终采用了Three.js作为3D引擎库，结合tween.js作为配套的动画库，以及基于webpack的脚手架nowa链接作为技术支持。

whyThree.js?

目前市面上比较成熟的3D库有Three.js和Babylon.js，但对比两者后可发现：

Babylon.js常用于制作3d游戏引擎，倾向于游戏开发；而Three.js是纯渲染引擎。

Babylon.js诞生不久（13年），社区活跃；而Three.js相对久一些（比webgl还久），且比较流行，代码易读，团队成员有相关的开发经验。

Babylon.js已经支持了webgl2的多数特性，并且能够平滑降级；而Three.js还是处于提需求阶段，并没有支持。

所以最后选择的是Three.js，想尝试下webgl2.0的小伙伴可以试下Babylon.js。

技术实现

介绍完技术引擎后，接下来将结合整体的功能流程，为大家解析下如何通过技术实现。

step1：让球体运动起来

这是动画展示效果的第一步。通过Three.js的基本方法，很容易实现在场景中添加对象的功能。如上图所示，在场景中添加了一个球体，并让它做顺时针的转动，而让球表面的图做逆时针的转动，并向场景中添加了不断向z轴负方向运动的星星，和做一定角度的公转运动的卫星。