在许多人的印象中，广告往往只是屏幕上的单调存在。然而，随着科技的进步，广告已经能够拥有丰富多彩的玩法和有趣的互动，展现出创新的一面。 例如，当你在刷抖音时，有没有尝试过这些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也感到非常的有成就感。 现在，有了AR的能力，我们就可以开始实现各种AR创意了。就像得到了一把宝刀，可以开始修炼武功了。 JackHong给同事们展示的第一个Demo就是手势AR。这项功能后来也成功应用在肯德基圣诞季的营销活动中。 要实现这个识别「比心」手势然后出现泡泡的效果，需要前端调用手机摄像头，将视频流绘制到屏幕上；同时将视频流转发给App进行手势识别，返回结果，确认比心手势成功后，播放冒泡特效，一连串的泡泡就从用户的手心飞出。 值得注意的是，这里一连串的「泡泡」们其实只有一个。它们本质上都是一张png图片，大小只有4k，非常节约内存。 借助这样一张图片，研发团队用代码控制它出现的频率、运动轨迹、大小和透明度的变化，用户的屏幕上就可以出现一连串流畅而自然的泡泡。 现在，这项手势AR功能已经能识别50多种手势，无论是单手手势还是双手手势，甚至拍手、击拳这样的动态的手部动作都可以实现。 在几种AR动态创意广告中，最难的还是这项射击效果。射中之后，原本漂浮在空中的各种食物会被打碎，变成无数个碎片，向四面八方飞去。如果你仔细看，会发现这些「碎片」都是大小不一的圆形粒子，并且他们的颜色都取自漂浮的食物。如果用户射中的是草莓奶油蛋糕，圆形粒子的颜色就是粉色和白色；如果射中的是巧克力派，粒子就是深浅不一的棕褐色。而且，每次射中之后，粒子飞向四面八方的运动轨迹都是随机的，每个粒子飞出去的方向和速度都是不一致的。 实现这样的功能非常复杂，研发同学为此做了一个「粒子引擎」，在3D环境中，根据图片本身的分辨率和颜色，把图片转成粒子，定义粒子的移动方向、大小和速度，以及发散的先后顺序。其中有非常多的参数调节。 不过，为什么非要用这么复杂的方案呢？ JackHong指出，尽管可以制作出每个击中特效都相同的效果，但这样的视觉效果并不理想。例如，瞄准目标是一个红色物体后，射击后飞出的却是蓝色粒子，这会造成视觉上的不协调，久而久之，用户可能会感到厌烦。此外，动效的每一帧都需要单独制作一张图片，一个25帧的动画需要25张png图片来渲染，这会导致加载时间过长，同时占用更大的手机内存，影响App运行的稳定性。 为了解决这个问题，团队采用了GPU加速技术。这是因为CPU渲染方式需要遍历所有粒子的运动状态和颜色变化，而GPU则可以实现多像素的并行计算，每个线程可以独立计算一个粒子的变化。这种方案大幅减少了内存消耗，但性能消耗有所提升，因此调用了GPU加速。 这支AR动态创意广告效果的背后，是字节跳动创意中心的努力。相比其他研发团队，他们更像是一个广告创意工作室，从前端、后端的开发，到底层算法，还有各式互动和特效，都是由他们产出的。服务的平台包括抖音、TikTok、今日头条等多个平台。 这个团队的一大特点就是国际化，办公室设在北京、上海、杭州、西雅图、山景城五个城市，除了中国同学之外，还有来自欧洲、美国、韩国、非洲等不同地方的成员。这种多元背景的碰撞让这支创意团队常常迸发出新的灵感。 团队负责人木易表示：“不同背景、不同文化、不同的思考方式的同学加入之后，总能带来一些惊喜。他们的历史背景、教育背景、跨文化的认知，都是对我们团队非常好的补充。” 除了各种形式丰富的互动广告之外，他们还研发了各种创意工具，比如拍摄视频、制作图片的工具，甚至还有机器自动写作、机器自动生成视频的一系列解决方案。 在JackHong看来，这支做创意广告的研发团队的确很不一样，大家都有一种「广告狂人」的气质：“在我看来，一项技术能怎么玩不仅仅是设计师要做的事情，研发也要帮助设计师来思考。设计同学对技术上的理解多少会有一些隔阂，经常会问我们有没有什么新技术，其实哪有那么多新技术来做创意，更需要的是怎么去巧妙地运用技术，这个时候就需要我们研发来提供一些奇思妙想了。” 这种创意空间的背后离不开团队宽松的管理风格。 作为团队的领导者，木易总是强调一个核心理念：“优秀”并不仅仅体现在个人经历背景的丰富程度上，更重要的是个人的思辨和解决问题的能力。他坚信，优秀的团队成员之所以能够聚集在一起，是因为大家有着共同的目标和追求，这种内在的驱动力促使他们自发地投入工作，而非依赖于严格的规章制度。 与此同时，JackHong也在努力实现自己的目标。他希望将AR广告创意玩法转化为一种工具，通过这种方式，可以仅替换设计物料而无需重复研发，就能复现类似的玩法。这种创新的思路不仅节省了成本，而且提高了工作效率，充分体现了团队的自主性和创造力。