Canvas 扛不住的 2D 画面，PixiJS 搬上 GPU 就顺了

DOM 和 CSS 动画再怎么优化，同屏元素一多就会掉帧，这是浏览器排版引擎的物理上限。真要几万个精灵同屏跑满 60 帧，答案只有一个：下到 GPU 去画。PixiJS 就是干这个的，README 自称 the fastest, most lightweight 2D library available for the web，仓库 4.9 万星、MIT 协议，最新版 v8.22.0，npm 月下载 505 万，是这个系列第 5 个工具，负责画面渲染这一环的「发动机」。

一、WebGL 与 WebGPU 双引擎

v8 换了新的渲染架构，同时支持 WebGL 和 WebGPU 两个后端，浏览器支持哪个就用哪个。官方 README 罗列的能力清单，基本覆盖了 2D 视觉的全套需求：资源加载器、鼠标与多点触控、灵活的文字渲染、图元和 SVG 绘制、动态纹理、遮罩、滤镜和高级混合模式。

初始化变成了显式的异步操作，v8 的最小用法长这样：

import { Application, Assets, Sprite } from 'pixi.js';

const app = new Application();
await app.init({ width: 1920, height: 1080 });
document.body.appendChild(app.canvas);

const texture = await Assets.load('assets/logo.png');
const sprite = new Sprite(texture);
app.stage.addChild(sprite);

和 Canvas 2D API 的区别在于心智模型：PixiJS 里一切都是舞台（stage）上的显示对象，位置、缩放、旋转都是属性，改完下一帧自动渲染，不用自己管理重绘。

二、一条命令搭好工程

上手有官方 CLI：npm create pixi.js@latest，从模板生成带构建配置的工程；已有项目就 npm install pixi.js。官网的 Tutorials 和 Examples 都是可交互的，agent 读起来也不费劲，示例库的覆盖面意味着大部分常见效果都有现成参考代码可以抄。

滤镜值得单独一提：模糊、辉光、置换这一类效果在 PixiJS 里是对显示对象挂 filter，GPU 上实时跑。做动态海报、直播贴片背景、数据大屏的粒子层，都是它的主场。

三、在这个系列里的位置

工具链里画面的分工是这样的：生成式创意草图归 p5.js，3D 场景归 Three.js，而要性能的 2D 画面归 PixiJS。三者都输出到 canvas，通常也能嵌进 Remotion 的组件树逐帧出图。agent 生成 PixiJS 代码的一个好处是 API 面直观，显示对象树就是场景结构，出错容易定位。

对做视频的人来说，它最实际的用法是当「效果层」：主时间线交给 Remotion 管，粒子、噪声、光效这些重渲染的素材用 PixiJS 单独画，生成序列帧或直接作为组件嵌入，两头都不耽误。

下一篇是 p5.js，聊聊生成式视觉和它的创意编程生态。