不用邀請函、不用簽字板，“笑容”才是唯一的入場憑證。年會還有這樣的操作？

[[233768]]

最近在阿里巴巴內(nèi)部就掀起這樣一陣“笑容簽到”風(fēng)潮。在年會開場，大家是這樣排隊刷臉的：

[[233769]]

而刷臉成功后，入場人員的花名、頭像以及“笑容指數(shù)”會實時同步顯示在會場大屏幕上，并匯聚成一個“笑臉星球”。

[[233770]]

這是阿里巴巴信息平臺一群90后工程師，用兩周時間開發(fā)的一套年會開場秀系統(tǒng)：

觀眾在經(jīng)過人臉識別后，系統(tǒng)會根據(jù)人臉表情特征，識別出觀眾的花名（名字）與微笑指數(shù)，同時吐出一句“評語”。當(dāng)笑容越燦爛，評價就會越高。同時通過技術(shù)手段，這些信息還會上屏展示與互動。

[[233771]]

工程師們在現(xiàn)場調(diào)試

不僅是部門年會，在內(nèi)部一些大型比賽、重要頒獎典禮等活動開場，也逐步用起了這一套科技感滿滿的開場秀。同時根據(jù)活動不同主題，還可以進(jìn)行個性化定制呈現(xiàn)。

[[233772]]

阿里內(nèi)部一些重要大會陸續(xù)使用這套系統(tǒng)開場

究竟這套年會開場秀系統(tǒng)如何實現(xiàn)的？今天，阿里妹邀請到該項目團(tuán)隊中的開發(fā)小哥哥探源，來聊聊背后的實現(xiàn)原理與技術(shù)方案。

背景

傳統(tǒng)大會通常采用的暖場方式是，在大屏幕上循環(huán)播放宣傳視頻，等觀眾差不多到齊時，一個321的倒計時宣告開始，既老套又缺乏互動。更是白白錯過一次向觀眾展示公司技術(shù)與公司人才的機(jī)會。

那有沒有一種可以將科技感與互動感結(jié)合的開場秀呢？恰逢新一財年信息平臺部門大會在即，我們想以此為切入點，給大家玩一些不一樣的開場。

解決方案

任何一個“靠譜”的前端工程師，肯定會下意識想用H5動畫來替代視頻。我們的方案是：使用酷炫的H5動畫，并且結(jié)合智慧園區(qū)團(tuán)隊的人臉識別技術(shù)實現(xiàn)人員掃臉簽到+大屏展示的技術(shù)方案。既能運(yùn)用及展示內(nèi)部的技術(shù)，又能起到不錯的暖場效果。

根據(jù)方案構(gòu)想，很快就形成了初版需求demo。梳理一下，可以拆分出下面幾點功能：

• 初始狀態(tài)下，是默認(rèn)做自轉(zhuǎn)運(yùn)動的星球，周圍有圍繞的衛(wèi)星
• 當(dāng)人員進(jìn)場時，人臉識別成功后，在屏幕上展示
• 展示完之后，照片要飛回到自轉(zhuǎn)的球面上，跟著球一起做自轉(zhuǎn)運(yùn)動
• 會議開始前，人工控制照片做粒子效果，over

技術(shù)方案

當(dāng)功能拆解后，便是研究怎么實現(xiàn)方案了。出于對效果考慮，準(zhǔn)備選擇3維動畫來創(chuàng)作，并最終采用了Three.js作為3D引擎庫，結(jié)合tween.js作為配套的動畫庫，以及基于webpack的腳手架nowa鏈接作為技術(shù)支持。

whyThree.js?

目前市面上比較成熟的3D庫有Three.js和Babylon.js，但對比兩者后可發(fā)現(xiàn)：

• Babylon.js常用于制作3d游戲引擎，傾向于游戲開發(fā)；而Three.js是純渲染引擎。
• Babylon.js誕生不久（13年），社區(qū)活躍；而Three.js相對久一些（比webgl還久），且比較流行，代碼易讀，團(tuán)隊成員有相關(guān)的開發(fā)經(jīng)驗。
• Babylon.js已經(jīng)支持了webgl2的多數(shù)特性，并且能夠平滑降級；而Three.js還是處于提需求階段，并沒有支持。

所以最后選擇的是Three.js，想嘗試下webgl2.0的小伙伴可以試下Babylon.js。

技術(shù)實現(xiàn)

介紹完技術(shù)引擎后，接下來將結(jié)合整體的功能流程，為大家解析下如何通過技術(shù)實現(xiàn)。

step1：讓球體運(yùn)動起來

[[233774]]

這是動畫展示效果的第一步。通過Three.js的基本方法，很容易實現(xiàn)在場景中添加對象的功能。如上圖所示，在場景中添加了一個球體，并讓它做順時針的轉(zhuǎn)動，而讓球表面的圖做逆時針的轉(zhuǎn)動，并向場景中添加了不斷向z軸負(fù)方向運(yùn)動的星星，和做一定角度的公轉(zhuǎn)運(yùn)動的衛(wèi)星。

三維坐標(biāo)系中的點坐標(biāo)x，y，z可以轉(zhuǎn)換成了（上圖）中的極坐標(biāo)r，θ，φ（半徑r和兩個角度θ 和φ），同樣可以用來表示點的位置（反過來也能推導(dǎo)）。

球面上的方片也是由對象構(gòu)成。人員簽到成功之后，方片上會變成照片，這里需要事先計算出方片相對于球面的位置以便生成方片。根據(jù)前期配置的到場人數(shù)n，從而讓球面生成均勻分布的n個點，得到每個點的極坐標(biāo)系位置，再轉(zhuǎn)換成點坐標(biāo)位置，這些位置就是方片位置。

step2：加入“微笑”展示效果

[[233776]]

前端通過輪詢定時請求后端接口，來拉取人臉識別數(shù)據(jù)，展示之后告訴后端已經(jīng)展示過了。由于現(xiàn)場人臉識別后的“微笑”需要實時展示在主屏上，每場年會活動到場人數(shù)不等（約500-1500人），在這一狀況下，如何保證在規(guī)定時間內(nèi)完成人員入場與展示。我們的方案是：展示時間可以動態(tài)調(diào)節(jié)，人流量大時識別成功之后大屏就展示快一些，反之則展示慢一些。

因此，需要在前端維護(hù)了一個隊列，用于存儲識別成功但還未展示人員，輪詢拉取的數(shù)據(jù)會進(jìn)入到隊列中，展示過的數(shù)據(jù)則會從隊列中移除，一個展示動畫的時長會根據(jù)隊列的長度動態(tài)調(diào)節(jié)，取值范圍2.5-5s不等。

step3：讓“微笑”隨球體一起運(yùn)動

“微笑”展示后，還有個照片飛回球面并跟著球體一起運(yùn)動的效果。因為牽涉到坐標(biāo)系的相對運(yùn)動（球面的位置是相對于父元素來實現(xiàn)的），這一效果較難實現(xiàn)。

通過step1，可以計算出方片的位置position(position是個三維向量：xyz)，因為位置是相對球體的，所以從球體看來方片的位置永遠(yuǎn)是xyz，而在全局看來，方片的位置是永遠(yuǎn)在變化的，而這個位置坐標(biāo)怎么獲取是一個問題。

當(dāng)時，小伙伴們想到了兩種方案：

第一種：讓照片相對球體運(yùn)動，這樣就不用去考慮方片位置了，因為這個位置是不變的。但這樣的弊端是，因為球體在運(yùn)動，照片也需要一直運(yùn)動。如果要達(dá)到視覺上看“照片不動”的效果，就需要照片永遠(yuǎn)對著攝像頭。

第二種：讓照片相對全局運(yùn)動，在每一幀的時候去獲取方片相對于全局的坐標(biāo)。然后在這一幀內(nèi)慢慢趨近于這個坐標(biāo)，最后實現(xiàn)位置的重疊。

經(jīng)過討論，決定采用第二種方案。因為核心是要解決坐標(biāo)系相對轉(zhuǎn)換的問題，但第一種方案并沒有解決，只是把問題方式轉(zhuǎn)移了。還好，Three.js提供了現(xiàn)成的方法：getWorldPosition用于返回表示對象在世界空間中的位置向量。

這樣，就可以得到方片的全局坐標(biāo)。

現(xiàn)在知道了照片的位置和最后需要到達(dá)的位置。但如果直接從初始位置向最后位置運(yùn)動，還會有個問題：照片可能直接穿過球體而達(dá)到最后的位置（不符合運(yùn)動規(guī)律），所以這里需要盡可能做曲線運(yùn)動，而不是讓照片穿過球體。

我們還是用到了上面的坐標(biāo)系轉(zhuǎn)極坐標(biāo)系的公式，通過初始的極坐標(biāo)位置（sourceR，sourcePhi，sourceTheta）和目標(biāo)位置的（targetR，targetPhi，targetTheta）。根據(jù)線性差值公式計算出在每一幀中的中間位置（currentR，currentPhi，currentTheta），再轉(zhuǎn)換成點坐標(biāo)系下的位置，即為每一幀時照片的位置，從軌跡上來看是一個曲線運(yùn)動，且不會穿過球體。

step4：粒子動畫開場

[[233777]]

終于進(jìn)入最后的環(huán)節(jié)了。在活動正式開場前，“笑臉星球“會散開成粒子狀態(tài)，通過粒子運(yùn)動拼成本場活動的主題文案。這里運(yùn)用到粒子動畫效果，需要事先知道每個粒子最后運(yùn)動的位置。我們參考了canvas粒子動畫的效果（具體可以自行查一下），簡化如下：

1. newImage加載圖片
2. 用context.drawImage把圖片畫到一張canvas畫布上
3. 通過context.getImageData就可以獲取畫布上指定區(qū)域的像素數(shù)據(jù)
4. 比較每個點的像素值就可以記錄下需要像素點的位置信息，轉(zhuǎn)換成3D的坐標(biāo)
5. （這邊會涉及坐標(biāo)系的轉(zhuǎn)換，需要特別注意一下，平面canvas的坐標(biāo)系和THREE.js的坐標(biāo)系是不一樣的）。
6. 創(chuàng)造粒子，讓粒子做飛散狀運(yùn)動起來，最后到達(dá)指定位置即可
7. 事先準(zhǔn)備兩張圖片，一張白底透明，一張彩色透明，粒子運(yùn)動完成之后白底漸漸顯示
8. 然后白底漸隱，彩色的漸漸顯示

性能優(yōu)化

客觀因素如：大屏分辨率、設(shè)備顯卡等不考慮，但需要更多從可控條件來解決部分性能問題。一般衡量動畫是否卡頓用fps衡量，如果在30-60幀之內(nèi)肉眼基本無感知，再往下，會感受到很明顯的卡頓。第一版開發(fā)完成之后，在mac上的幀率只有20+到40。肯定達(dá)不到標(biāo)準(zhǔn)，所以從以下幾個方面開始優(yōu)化。

1.盡量重用Material和Geometry，或者緩存模型；

BufferGeometry 會緩存網(wǎng)格模型，性能要高效點。網(wǎng)格模型生成原理。

• Geometry 生成的模型是這樣的 （代碼）-> (CUP 進(jìn)行數(shù)據(jù)處理，轉(zhuǎn)化成虛擬3D數(shù)據(jù)) -> (GPU 進(jìn)行數(shù)據(jù)組裝，轉(zhuǎn)化成像素點，準(zhǔn)備渲染) -> 顯示器第二次操作時重復(fù)走這些流程。
• BufferGeometry 生成模型流程 (代碼) -> (CUP 進(jìn)行數(shù)據(jù)處理，轉(zhuǎn)化成虛擬3D數(shù)據(jù)) -> (GPU 進(jìn)行數(shù)據(jù)組裝，轉(zhuǎn)化成像素點，準(zhǔn)備渲染) -> (丟入緩存區(qū)) -> 顯示器第二次修改時，通過API直接修改緩存區(qū)數(shù)據(jù)，流程就變成了這樣(代碼) -> (CUP 進(jìn)行數(shù)據(jù)處理，轉(zhuǎn)化成虛擬3D數(shù)據(jù)) -> (修改緩存區(qū)數(shù)據(jù)) -> 顯示器。

2.減少渲染的對象,或者渲染的時候讓對象不可見：渲染過不再需要的對象可以設(shè)置visible = false，或者直接從scene中remove，兩者的區(qū)別可以參考Three.js scene.remove vs. visible=false；

3.謹(jǐn)慎地在render()中操作：一般FPS為60也就意味著一秒會執(zhí)行60次如果render()中有有實例化或是賦值操作很容易會崩潰；

4.選擇合適的對象：粒子我就是用Sprite代替Mesh實現(xiàn)的；

5.考慮光源的影響：會影響場景中對象的渲染；

6.渲染的對象時side屬性盡量用FrontSide，DoubleSide會導(dǎo)致更多的渲染，也是減少渲染的方法；

7.可以用著色器來渲染，用更底層的glsl來實現(xiàn)。

優(yōu)化完之后的狀態(tài)：在mac上基本上都是60fps。保證了最終效果的實現(xiàn)：

[[233778]]

未來規(guī)劃

萬萬沒想到，一套專為部門年會做的方案，正逐步演變成一個成熟產(chǎn)品。并且通過可視化、定制化的配置，結(jié)合人臉識別技術(shù)已經(jīng)支持集團(tuán)多個部門的年會與活動。

隨著使用場景的不斷豐富，未來我們還將針對活動主題，在活動過程中增加互動。比如根據(jù)入場時的人臉識別，支持抽獎等現(xiàn)場互動，實現(xiàn)年會大屏、觀眾手機(jī)、人臉閘機(jī)等多屏互動。此外，在面向參會觀眾，還將生成現(xiàn)場圖片等素材，方便收藏。

信息平臺事業(yè)部是阿里巴巴經(jīng)濟(jì)體服務(wù)的基礎(chǔ)平臺，為阿里巴巴提供生態(tài)化、國際化、數(shù)據(jù)化、移動化以及安全穩(wěn)定的企業(yè)信息服務(wù)。我們希望能有更多同學(xué)加入，通過技術(shù)創(chuàng)新，挑戰(zhàn)自己的不可能，同時為阿里巴巴更多可能性的發(fā)生貢獻(xiàn)力量。

【本文為51CTO專欄作者“阿里巴巴官方技術(shù)”原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者】

戳這里，看該作者更多好文