这群程序员中的「广告狂人」，把抖音广告做成了AR游戏

在大部分人印象里，广告总是占据屏幕却平平无奇。但现在，广告也可以有丰富的玩法和有趣的互动，充满创新。

 

比如，你在刷抖音的时候，有没有玩过这些AR互动广告？

 

瞄准悬浮在空中的菜品，它们就都成了射击的靶子：

 

 

做一个比心手势，就可以召唤出一连串的泡泡，还能获得肯德基优惠券：

 

 

接住从天而降的红包：

 

 

就可以参与抽奖：

 

 

限定时间内参与，还能获得优惠福利：

 

 

AR的形式让广告变成了充满游戏性和乐趣的互动体验，不仅服务了客户，也为用户创造了娱乐空间。

 

所以，这些抖音AR动态创意广告，到底是怎么做出来的呢？

 

字节跳动的研发团队，又在里面埋了哪些小彩蛋？

 

 

 

如何让H5学会做AR？

 

这类内容丰富、形式多样的互动大多使用H5来开发，通过app端嵌入webview的方式来呈现。

 

但是H5和AR之间却有着不少适配问题。比如有些App里，AR能力集成在App里，H5无法调用；有些还需要验证陀螺仪。

 

因此，需要另一种技术能力，来打通H5和App之间的壁垒。

 

研发团队选择了Lynx。

 

Lynx，字节跳动原创客户端跨端引擎框架，以JavaScript为开发语言，可以让前端研发人员用Web技术快速构建Native视图，而且还可以实现跨端开发。

 

在今年春晚活动中，Lynx也有非常好的表现，极大缩减了客户端发版成本。

 

研发团队发现了Lynx在开发AR互动中的三大优点：

 

第一，Lynx框架支持canvas动态渲染，适合AR开发；

 

第二，Lynx和前端开发非常契合，匹配前端技术栈；

 

最后，用Lynx来开发，所有内容更新不依赖云端发版，也就是说当有新的创意广告效果时不需要专门做App版本更新。

 

这支团队的同学JackHong说：“你可以理解为Lynx是一张白纸，渲染库里是各种画笔颜料，可以用来作图。”

 

但确定Lynx作为技术选型，意味着庞大而复杂的前期准备工作——Lynx不兼容H5，需要修改H5底层渲染库以适配Lynx的API。

 

这是一项非常复杂的大工程，JackHong和他的伙伴们一改就是三四个月，排查bug、定位问题，逐渐调试之后，渲染库里的各种「画笔颜料」终于能派上用场了。

 

最早，他们先实现了用H5在Lynx框架上绘制图形的能力：

 

 

有了绘制图形的能力，就能在图形基础上增加更多交互元素，自制一个2048小游戏：

 

 

甚至实现了光影自然、动作流畅的3D渲染：

 

 

在这些能力都完成之后，接入Lynx开放的端API，获取AR识别的渲染能力。

 

最终，将AR能力集成到动态创意SDK里，前期准备终于完成。现在，H5的表现能力、互动能力，端上的AR能力都被集成在了一起。

 

JackHong看着手机里流畅运行Demo，成就感爆棚，觉得自己这几个月的努力都没有白费。他有些羞涩又骄傲的回忆当时的情景：“做成了之后，当然就各种秀啊，给我们团队的同学秀了一遍，给Lynx团队的同学秀了一遍，给设计团队秀了一遍。”

 

几个对接团队的同学看到效果都非常赞叹，JackHong也成就感满满。

 

现在，H5有了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广告创意玩法做成工具，借此可以实现只替换设计物料，无需重复研发就可以复现类似的玩法。