在大部份人印象裏，廣告總是占據螢幕卻平平無奇。但現在，廣告也可以有豐富的玩法和有趣的互動，充滿創新。
比如，你在刷抖音的時候，有沒有玩過這些AR互動廣告？
瞄準懸浮在空中的菜品，它們就都成了射擊的靶子：
做一個比心手勢，就可以召喚出一連串的泡泡，還能獲得肯德基優惠券：
接住從天而降的紅包：
就可以參與抽獎：
限定時間內參與，還能獲得優惠福利：
AR的形式讓廣告變成了充滿遊戲性和樂趣的互動體驗，不僅服務了客戶，也為使用者創造了娛樂空間。
所以，這些抖音AR動態創意廣告，到底是怎麽做出來的呢？
字節跳動的研發團隊，又在裏面埋了哪些小彩蛋？
如何讓p學會做AR？
這類內容豐富、形式多樣的互動大多使用p來開發，透過app端嵌入webview的方式來呈現。
但是p和AR之間卻有著不少適配問題。比如有些App裏，AR能力整合在App裏，p無法呼叫；有些還需要驗證陀螺儀。
因此，需要另一種技術能力，來打通p和App之間的壁壘。
研發團隊選擇了Lynx。
Lynx，字節跳動原創客戶端跨端引擎框架，以JavaScript為開發語言，可以讓前端研發人員用Web技術快速構建Native檢視，而且還可以實作跨端開發。
在今年春晚活動中，Lynx也有非常好的表現，極大縮減了客戶端發版成本。
研發團隊發現了Lynx在開發AR互動中的三大優點：
第一，Lynx框架支持canvas動態渲染，適合AR開發；
第二，Lynx和前端開發非常契合，匹配前端技術棧；
最後，用Lynx來開發，所有內容更新不依賴雲端發版，也就是說當有新的創意廣告效果時不需要專門做App版本更新。
這支團隊的同學JackHong說：「你可以理解為Lynx是一張白紙，渲染居里是各種畫筆顏料，可以用來作圖。」
但確定Lynx作為技術選型，意味著龐大而復雜的前期準備工作——Lynx不相容p，需要修改p底層渲染庫以適配Lynx的API。
這是一項非常復雜的大工程，JackHong和他的夥伴們一改就是三四個月，排查bug、定位問題，逐漸偵錯之後，渲染居里的各種「畫筆顏料」終於能派上用場了。
最早，他們先實作了用p在Lynx框架上繪制圖形的能力：
有了繪制圖形的能力，就能在圖形基礎上增加更多互動元素，自制一個2048小遊戲：
甚至實作了光影自然、動作流暢的3D渲染：
在這些能力都完成之後，接入Lynx開放的端API，獲取AR辨識的渲染能力。
最終，將AR能力整合到動態創意SDK裏，前期準備終於完成。現在，p的表現能力、互動能力，端上的AR能力都被整合在了一起。
JackHong看著手機裏流暢執行Demo，成就感爆棚，覺得自己這幾個月的努力都沒有白費。他有些羞澀又驕傲的回憶當時的情景：「做成了之後，當然就各種秀啊，給我們團隊的同學秀了一遍，給Lynx團隊的同學秀了一遍，給設計團隊秀了一遍。」
幾個對接團隊的同學看到效果都非常贊嘆，JackHong也成就感滿滿。
現在，p有了AR的能力，就可以開始實作各類AR創意了。就好像獲得了一把寶刀，可以開始修煉武功了。
一張圖片造動效，50種+手勢可辨識
JackHong給同事們看的第一個Demo就是手勢AR，這項功能後來也成功用在了肯德基聖誕季的行銷活動中。
要實作這個辨識「比心」手勢然後出現泡泡的效果，需要前端呼叫手機網絡攝影機，將影片流繪制到螢幕中；同時將影片流轉發給App進行手勢辨識，返回結果，確認比心手勢成功後，播放冒泡特效，一連串的泡泡就從使用者的手心飛出。
值得註意的是，這裏一連串的「泡泡」們其實只有一個。它們本質上都是這樣一張png圖片，大小只有4k，非常節約記憶體。
借助這樣一張圖片，研發團隊用程式碼控制它出現的頻率、運動軌跡、大小和透明度的變化，使用者的螢幕上就可以出現一連串流暢而自然的泡泡。
現在，這項手勢AR功能已經能辨識50多種手勢，無論是單手手勢還是雙手手勢，甚至拍手、擊拳這樣的動態的手部動作都可以實作。
飛向四面八方的粒子
幾種AR動態創意廣告中，最難的還是這項射擊效果。
射中之後，原本漂浮在空中的各種食物會被打碎，變成無數個碎片，向四面八方飛去。
如果你仔細看，會發現這些「碎片」都是大小不一的圓形粒子，並且他們的顏色都取自漂浮的食物。如果使用者射中的是草莓鮮奶油蛋糕，圓形粒子的顏色就是粉色和白色；如果射中的是巧克力派，粒子就是深淺不一的棕褐色。
而且，每次射中之後，粒子飛向四面八方的運動軌跡都是隨機的，每個粒子飛出去的方向和速度都是不一致的。
實作這樣的功能非常復雜，研發同學為此做了一個「粒子引擎」，在3D環境中，根據圖片本身的分辨率和顏色，把圖片轉成粒子，定義粒子的移動方向、大小和速度，以及發散的先後順序。其中有非常多的參數調節。
不過，為什麽非要用這麽復雜的方案呢？
JackHong說：「雖然可以做成每個射中的特效都一樣，但這樣視覺效果並不好，比如瞄準的目標是一個紅色的東西，然後射中之後飛出來是一些藍色的粒子，看起來會比較違和，使用者看多了就會看膩。並且，動效的每一幀都要單獨做一張圖片，一個25幀的動畫，一秒就要25張png圖片，就需要載入很久，而且占用更大手機記憶體，影響App執行穩定性。」
用這種方案大幅減少了記憶體消耗，但效能消耗是有一定提升的，因此呼叫了GPU加速。因為如果用CPU渲染，需要遍歷所有粒子的運動狀態和顏色變化，GPU則可以實作多像素的平行計算，每個執行緒單獨計算一個粒子的變化即可。
會寫程式碼的「廣告狂人」
這些AR動態創意廣告效果，均來自字節跳動創意中心。
相比其他研發團隊，他們更像一個廣告創意工作室，從前端、後端的開發，到底層演算法，還有各式互動和特效都由他們產出，服務抖音、TikTok、今日頭條等多個平台。
這支團隊的一大特點就是國際化，辦公室設在北京、上海、杭州、西雅圖、山景城五個城市，除了中國同學之外，還有來自歐洲、美國、南韓、非洲等不同地方的成員，這種多元背景的碰撞讓這支創意團隊常常迸發出新的靈感。
團隊負責人木易說：「不同背景、不同文化、不同的思考方式的同學加入之後，總能帶來一些驚喜，他們的歷史背景、教育背景、跨文化的認知，都是對我們團隊非常好的補充。」
除了各種形式豐富的互動廣告之外，他們的另一項工作就是研發各種創意工具，比如拍攝影片、制作圖片的工具，甚至還有機器自動寫作、機器自動生成影片的一系列解決方案。
在JackHong看來，這支做創意廣告的研發團隊的確很不一樣，大家都有一種「廣告狂人」的氣質：「在我看來，一項技術能怎麽玩不僅僅是設計師要做的事情，研發也要幫助設計師來思考。設計同學對技術上的理解多少會有一些隔閡，經常會問我們有沒有什麽新技術，其實哪有那麽多新技術來做創意，更需要的是怎麽去巧妙地運用技術，這個時候就需要我們研發來提供一些奇思妙想了。」
這種創意空間的背後離不開團隊寬松的管理風格。
作為團隊Leader，木易說：「我個人幾乎很少花時間在管理上，我們的風格就是優秀、坦誠、自由。優秀也不一定專指多麽強大的經歷背景，雖然我們確實有很多MIT、史丹佛等頂尖院校畢業的同學，但更重要的是思辨和解決問題的能力。我相信一些優秀的人聚集在一起，一定是因為有一個共同目標，這讓大家自驅的去做很多事情，而不是靠條條框框的規定來管理。」
現在，JackHong也在自驅的朝一個新目標努力。他希望把這些AR廣告創意玩法做成工具，借此可以實作只替換設計物料，無需重復研發就可以復現類似的玩法。
點選檢視更多內容
關註「字節跳動技術範兒」，了解字節跳動技術實踐、招聘資訊和研發們的成長&生活~
