🙋🏻‍♀️ 编编拎重点：越来越复杂的营销场景是否为你的开发带来了烦恼？本文是蚂蚁集团前端工程师赤芍在 SEE Conf 2022 的分享，分享的主题是在营销场景下，如何通过互动技术提升复杂营销场景的渲染性能，以及如何通过算法智能生成营销场景，欢迎享用~

前言

大家好，我是来自支付宝体验技术部，MarsStudio 的赤芍。今天我分享的主题是营销场景下互动技术的应用与探索。今天的分享分为两part，第一part是WebGL渲染性能优化，第二part是基于机器学习和图像算法的智能动效方案。

随着手机性能的提升以及用户对营销场景下互动体验需求的提升，我们的营销场景已经变得越来越复杂。以去年的七夕大促为例，天猫大街整个营销场景下，一共有 150 多个独立的图层动画以及十数个粒子效果，我想如果设计师将一张有 150 多个独立动画的静态设计稿交给前端同学的话，大概前端同学会翻箱倒柜的找他四十米的大刀吧。

这里其实不怪前端同学的，因为这个体量的场景如果由传统的 CSS 动画或者 Canvas 动画来实现的话，大量独立动画意味着庞大的工作量，其次即使前端同学投入大量时间完成设计稿，手机性能能否支持又是影响上线的一个重要因素。所以我们提供了 MarsStudio 这个软件，让设计同学在 Mars 中设计场景与动效，然后前端同学直接使用，我们也是将整个场景的渲染交给 WebGL 来实现，通过 GPU 加速来保证场景的渲染性能。但是传统的渲染管线在大场景下也会有渲染性能问题。所以今天我分享的第一个主题就是在大场景下如何保证渲染性能。

大场景下渲染性能保证

首先我们一起来看一下传统的渲染管线。从图中可以看到传统的渲染管线包含顶点处理，前期面处理光栅化后期面处理以及像素处理几个过程后，将生成的图像保存在显存中，然后通过显示设备输出，整个渲染过程都是在 GPU 中完成，所以就意味着场景渲染过程中，我们需要将模型数据、渲染状态一次次从系统内存绑定到显存，而众所周知，CPU 与 GPU 之间的通信是一个很消耗性能的过程，所以在大场景下，减少 CPU 与 GPU 之间的通信是提升性能的一个很好的方法。

那么如何减少 CPU 与 GPU 之间的通信呢？

以天猫大街为例，我们来看一下在交互过程中，三维场景下发生了什么，这里是我们模拟的三维环境下用户在拖动屏幕时，实际看到场景的变化，左上角可以看做用户手机的手机屏幕，右下角是三维渲染中的相机，可以将它理解为当我们处于这个三维空间时，眼睛的位置与角度。我们可以看到在任意时刻，用户的屏幕都无完整的显示整个天猫大街，所以，我们可以将完全处于屏幕外的数据视为无效数据，剔除掉它们是不会让用户有体感差距的。这里我们就可以通过三维场景下相机的视锥碰撞与视锥包含检测，将完全处于屏幕外的物体区分出来，在进行场景组装的时候，将这部分数据进行剔除，从而减少 CPU 与 GPU 之间的通信。

在剔除完元素后，我们可以看到，其实单个场景下还是会有 30 多个元素，那么我们如何对这部分数据再进行优化呢？这里我们需要考虑一下从 CPU 向 GPU 绑定数据的特性，其实无论是 attribute 还是 uniform 数据，它们都满足三个特性，数据只读，同一内存数据可以多次读取，且整个数据所有部分的类型固定。所以我们也是根据这些特性，采用了 InterLeaved 模式，我们会尽可能多的数据进行打包绑定，然后再通过下标与偏移值对 GPU 内存进行分别绑定，换个说法，农夫要带一大堆白菜过河，一次运一个肯定没有在船的承载能力范围内，一次尽可能多的运输白菜来得快。同理采用 interleaved 模式也可以达到减少 CPU 与 GPU 之间通信的效果，保证大场景下的渲染性能。

大场景下的渲染性能得到保障之后，前端同学也可以直接跳过与设计同学 battle 场景大小以及动效细节的过程了。解决完这个问题后，我们回归到动效本身。

智能动效

随着动效应用场景越来越多后，我们也发现，动效相较于静态图是有实质的业务提升的。首先动效拥有更好的视觉表现，有效的增加了用户粘性，其次它也有更好的业务表现，多次 AB 实验也证明了动效在 ctr 以及页面停留时间上都有增长作用。然而在前端同学的常规业务中，很多时候都会面临项目倒排、时间紧张的问题，导致设计同学没有空去做动效，传统的制作动效通常需要一定的设计软件门槛，前端同学也很难抽出大量的精力去学习设计软件，最后只能以静态图“草草了事”。因此我们也基于机器学习与图像算法提出了智能动效的方案 。

那么什么是智能动效呢？简单来说，就是让前端同学可以通过简单的操作，化身神笔马良，让图片活过来。

首先我们提供了配置式的动效生成方案。这里也是给大家展示一个操作实例，前端同学上传图像后，只要选择不同的动效参数，就可以直接生成动效进行预览，我们为每种动效都预设了合理的时间运动曲线和动画幅度，同时支持了图像的大小和位置的自适应。在预览满意后前端同学可以直接下载动效作为页面素材。

除此之外，我们还基于机器学习提供了更便捷的一键生成能力，根据上传图片自动生成出与它匹配的动效。我们可以看到，其实这里的几种动效都与这张图片适配，所以我们的动效并不是唯一解，这也意味着我们不能采用机器学习中的传统的分类模型，所以我们采用了对抗生成网络来解决这个问题，生成出符合真实数据分布的动效。

这里我们也是介绍一下什么是对抗生成网络。首先，对抗生成网络的意义就是生成不存在的真实数据。可能有些拗口啊，在对抗生成网络中也是有两位主角，首先是生成器，顾名思义，它的作用就是生成动效数据，那么机器生成的数据如何能保证数据的有效性呢？这里也就引出了第二位主角，也就是判别器，判别器就是用来鉴别动效数据的有效性，只有生成器生成的数据通过判别器，我们才会将其视为有效，也是可以从一个真实的案例来看一下。

我们首先输入一张图片，然后我们的生成器可以看作一个函数 g(x)，这个函数输出的结果就是动效。当然这个函数 g(x) 可能很复杂，因为它是由深度神经网络构成的。开始时生成器的能力很差，产生的动效几乎是随机的。我们的判别器也可以很容易判断出这些动效不符合我们的要求。

接下来，我们会通过数据库中已经标注好的图片与动效配对的数据，来训练我们的模型。通过不断训练，生成器和判别器都都会有所加强，逐渐的，我们的生成器就可以产生出符合判别器要求的动效了。

在生成器和判别器不断对抗的过程中，我们的生成器还会不断学习、不断成长，最后判别器已真假难分，说明生成器可以拥有了动效智能推荐的能力了。针对不同的图片输入，我们的生成器也会输出不同的动效，这样就可以实现“千图千效”的效果。

而动效生成后，我们还需要考虑最后一个问题，就是这个动效应该如何放到最合适的位置呢。这里我们会通过图像算法，找到图片的主体，根据主体与图像的相对位置将动效添加在一个合适的位置，从而生成最终的动效。至此，前端同学也就可以直接下载动效作为页面素材了。

这儿不知道大家有没有注意到，其实我们的工作重心始终围绕着打通设计同学与前端同学的工作链路，保证大场景的渲染性能可以让设计同学有更好的发挥空间，同时也让前端同学无需再与设计同学 battle，直接在指定逻辑播放动效即可；而智能动效方案可以在设计同学无暇为前端同学设计动效的时候，前端同学可以简洁的动效生成方案制作动效，让自己的页面酷炫起来。

最后带个货，我们是蚂蚁体验技术部的 Mars Studio 团队，我们一直在互动技术领域进行深耕和探索。我们也欢迎有更多感兴趣的前端同学与设计同学能与我们来进行功能的沟通与开发，让 Mars 能够在将来更好的为前端与设计同学服务。我的演讲到此结束，感谢大家的观看。