摘要

本文介绍了 Wasm 和 WebGL 在抖音前端互动技术中的创新应用，包括 Simple 渲染引擎、Lottie WebGL 渲染、WebGL 帧差序列帧等方面的内容，展示了相关技术的性能优势、兼容性等，并对未来发展进行了展望。

一、前言

文章开篇提到随着 Web 前端技术发展，Wasm 和 WebGL 被引入 Web 开发。本文将结合 2024 年抖音欢笑中国年项目，介绍这两项技术在前端互动技术中的创新应用，以提升业务性能和流畅度，改善用户体验。

二、Simple 渲染引擎

1. 引擎基础

Simple 渲染引擎基于 Wasm + WebGL 构建。Wasm 是一种可在浏览器运行、性能高于 JavaScript 且支持多编程语言的字节码格式。Simple 引擎上层接口用 TypeScript 开发，利用 TS 封装简单对象并提供类型提示方便前端用户，底层用 C/C ++处理计算工作，如矩阵、图形、动画计算和动态合批等。

// 这里可能是 Simple 引擎上层接口相关的 TypeScript 代码示例

2. 渲染管线

其渲染管线以 2D 为主，分为两部分：JS 部分处理数据量少但 GL 调用频繁的操作，Wasm 部分处理数据量多但 GL 调用少的操作，以达性能最优。

3. 性能收益

在 Spine 动画、精灵旋转等基准性能测试场景中，Simple 引擎相比 PixiJ 6.3、Cocos 2.4 等主流 JS 渲染引擎性能提升明显。在 Android OPPO Find X1 抖音跨端框架 V8 环境下，计算任务越复杂，性能收益越大（骨骼动画>图形计算>旋转变换>位移变换）。例如 100 个 Spine 动画的测试代码对比中可看出 Simple 引擎的性能优势。

// 这里可能是 100 个 Spine 动画测试相关的 JavaScript 代码示例

4. 兼容性

Wasm 规范不断发展，主流浏览器已全面支持。Simple 引擎自 2022 年 7 月启动，在多个业务场景落地，2024 年初用于春节项目。抖音跨端框架中使用 Wasm 的用户占比高达 96.97%，不支持 Wasm 时可使用 Simple 引擎编译的 asm.js 版本降级，其兼容性稳定可靠。

三、Lottie WebGL 渲染

1. 渲染方案

Lottie WebGL 渲染利用 Wasm + WebGL 渲染引擎渲染 Lottie 动画，在还原 Lottie 动画基础上，扩展交互控制能力、丰富特性支持并提升性能。

2. 性能收益

（1）官方渲染方案性能低

Lottie 官方在 Web 上的三种渲染方式（SVG、Canvas 2D、HTML）性能偏低，在复杂动画场景有性能瓶颈。例如某 Lottie 动画在 Chrome 6 倍降速模拟移动端设备时，Simple Lottie 相比 Lottie SVG 性能提升近 6 倍。

// 这里可能是性能测试相关的 JavaScript 代码示例

（2）离屏 Canvas 渲染性能低

主流 JS WebGL 渲染引擎用离屏 Canvas 渲染 Lottie 动画，流程复杂导致性能低。如 12 * 18 个 Lottie 动画在 i7 Mac Chrome 上测试，WebGL 直接渲染比离屏 Canvas 渲染帧数高 35 fps，性能提升近 3 倍。

（3）JS 图形计算性能低

基于 JS WebGL 渲染引擎渲染 Lottie 动画在矢量图形场景可能性能劣化，而 Simple 引擎能全面优化性能。如在动画峰值时，SVG 每帧仅需 6.26 毫秒，PixiJ 每帧需 11.68 毫秒，Simple Lottie 每帧仅需 5.35 毫秒（含 JS 动画参数插值计算部分，后续 JS 计算下沉 Wasm 还能优化）。

3. 交互控制

Simple 引擎渲染 Lottie 动画增加了交互控制便利，如素材替换、事件监听等。以 2024 年春节群红包雨项目为例，开发可方便实现红包相关动画效果。

4. 特性支持

Simple 引擎渲染 Lottie 动画能在原有特性基础上增加能力。如动画素材上可合成雪碧图、转成压缩纹理以减少资源请求和内存占用并提升渲染速度；还能增加渲染效果，如粒子滤镜，也可基于 WebGL 能力封装实现自定义效果，如透明视频等。

四、WebGL 帧差序列帧

1. 规范与背景

帧差序列帧基于 WebGL 1.0 标准，由首帧图片、帧差图片和帧差配置信息组成。原始 Lottie 动画支持 AE 特性有限，设计师会转成序列帧实现不支持的特性，导致素材体积增加。主流素材视频、Apng、WebP 各有问题，如视频兼容性、交互性和性能问题，Apng 和 WebP 帧间压缩差。

// 这里可能是处理帧差序列帧相关的 JavaScript 代码示例

2. 资源体积优化

基于 WebGL 1.0 实现帧间压缩算法，可在动画场景以更小资源体积替代序列帧、Apng、WebP，一般素材可减少 50%左右体积。

3. 交互能力

帧差序列帧能以高性能实现任意时刻切任意帧的交互能力，满足轻互动场景需求，相比视频和 3D 模型有优势，如小火人、打年兽和徽章项目。

五、未来展望

Wasm 标准更新的新特性会影响现有引擎架构升级；帧差序列帧帧间压缩效率与视频还有差距；Lottie 动画优化后的能力需高效开放给设计和开发使用，改进工作流效率等问题有待探索。

六、团队介绍

作者所在的抖音前端架构 - 互动体验技术团队，为字节跳动业务提供互动技术解决方案，技术产品包括 SAR Creator 等，与其他团队一同推进技术建设与业务落地。

七、下期预告

下期主题是前端互动场景中的性能优化，将介绍相关性能问题及解决方案。还回顾了 2024 抖音欢笑中国年系列的往期内容。