2024 抖音欢笑中国年(五)：Wasm、WebGL 在互动技术中的创新应用

前言

随着 Web 前端技术的不断发展，越来越多的新兴技术方案被引入到 Web 开发中，其中 Wasm 和 WebGL 作为前端领域的两大利器，为开发者带来了更多的可能性。

本文将结合2024 年抖音欢笑中国年的部分项目，重点介绍如何利用 Wasm 和 WebGL 对目前流行的一些前端互动技术（比如 Lottie、渲染引擎、动画图片等）进行创新和实践，利用 Wasm 和 WebGL 等新技术方案的特性和优势提升业务性能和流畅度，给用户带来更好的体验。

Simple 渲染引擎

WebAssembly（Wasm）是一种可以在 Web 浏览器中运行，提供比 JavaScript 更高的性能，并且支持多种编程语言的全新的字节码格式；基于其高性能的优势，我们团队尝试将其应用到渲染场景中，推出了基于 Wasm + WebGL 的高性能、轻量化的 Simple 渲染引擎。

以期借助于 Wasm 的高性能计算，以 Simple 引擎为基础，保持轻量化的同时，解决目前前端动效和轻互动场景主流技术方案如 Lottie 动画、动画图片（序列帧、 Apng 、WebP）、JS 渲染引擎等存在的能力受限、资源体积大、性能较低等问题。

引擎架构

考虑到前端用户学习和使用成本，Simple 引擎使用 TypeScript 语言开发上层接口，主要是利用 TS 封装简单对象，同时做类型提示方便前端用户使用，另外还提供尽可能高性能的方式和 Wasm 进行交互；底层则使用 C/C++，主要处理计算工作，比如：矩阵计算、图形计算、动画计算、动态合批等；

Simple 引擎目前的渲染管线主要以 2D 为主，也分为两部分：JS 部分负责处理数据量少但是 GL 调用频繁的操作，Wasm 部分则相反负责处理数据量多但是 GL 调用少的操作，尽可能达到性能最优解。

整体架构如下：

性能收益

受益于 Wasm 的计算性能优势，Simple 引擎相比主流的 JS 渲染引擎，比如：PixiJS 6.3、Cocos 2.4 在 Spine 动画、精灵旋转、精灵跳动、图形水平移动等基准性能测试场景中取得了不俗的表现：

以上测试数据来自 Android OPPO Find X1 抖音 跨端框架 V8 环境，可以看到基于 Wasm 的 Simple 引擎相比基于 JS 的引擎性能提升明显，计算任务越复杂，性能收益越大。

计算任务复杂度：骨骼动画 > 图形计算 > 旋转变换 > 位移变换

测试代码

100 个 Spine 动画 Simple 和 Cocos 2.4 测试代码如下：

• Cocos 2.4

• Simple