不用邀請(qǐng)函、不用簽字板，“笑容”才是唯一的入場(chǎng)憑證。年會(huì)還有這樣的操作？

[[233768]]

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

[[233769]]

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

[[233770]]

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

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

[[233771]]

工程師們?cè)诂F(xiàn)場(chǎng)調(diào)試

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

[[233772]]

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

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

背景

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

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

解決方案

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

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

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

技術(shù)方案

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

whyThree.js?

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

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

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

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

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

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

[[233774]]

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

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

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

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

[[233776]]

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

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

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

“微笑”展示后，還有個(gè)照片飛回球面并跟著球體一起運(yùn)動(dòng)的效果。因?yàn)闋可娴阶鴺?biāo)系的相對(duì)運(yùn)動(dòng)（球面的位置是相對(duì)于父元素來實(shí)現(xiàn)的），這一效果較難實(shí)現(xiàn)。

通過step1，可以計(jì)算出方片的位置position(position是個(gè)三維向量：xyz)，因?yàn)槲恢檬窍鄬?duì)球體的，所以從球體看來方片的位置永遠(yuǎn)是xyz，而在全局看來，方片的位置是永遠(yuǎn)在變化的，而這個(gè)位置坐標(biāo)怎么獲取是一個(gè)問題。

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

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

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

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

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

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

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

step4：粒子動(dòng)畫開場(chǎng)

[[233777]]

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

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

性能優(yōu)化

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

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

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

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

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

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

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

5.考慮光源的影響：會(huì)影響場(chǎng)景中對(duì)象的渲染；

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

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

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

[[233778]]

未來規(guī)劃

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

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

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

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

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