PixiJS 高性能 2D 渲染引擎

PixiJS 是什么

PixiJS 是一个面向 Web 的下一代 2D 渲染引擎，使用 TypeScript 编写，基于 WebGL 与 WebGPU 提供极速、轻量的 2D 图形渲染能力。它让开发者无需深入图形管线细节，就能在浏览器中构建流畅、丰富的交互式内容。

核心特性

• 🚀 双渲染后端：WebGL 与 WebGPU，自动选择最优路径
• ⚡️ 极致性能：面向大量精灵、粒子与高频重绘场景优化
• 🎨 易用 API：以场景图（Stage / Container）组织内容，学习曲线平缓
• 📦 资源加载器：统一管理纹理、图集、字体等资源
• ✋ 完整输入支持：鼠标与多点触控事件
• ✍️ 灵活文本渲染：位图字体与动态文本
• 📐 绘图能力：基础图元与 SVG 绘制
• 🖼️ 动态纹理、遮罩、滤镜与高级混合模式

快速上手

使用官方脚手架创建项目：

npm create pixi.js@latest

或在已有项目中安装：

npm install pixi.js

一个最小示例（创建应用并加载精灵）：

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

(async () => {
  const app = new Application();
  await app.init({ background: '#1099bb', resizeTo: window });
  document.body.appendChild(app.canvas);

  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');
  const bunny = new Sprite(texture);
  bunny.anchor.set(0.5);
  bunny.x = app.screen.width / 2;
  bunny.y = app.screen.height / 2;
  app.stage.addChild(bunny);

  app.ticker.add((time) => {
    bunny.rotation += 0.1 * time.deltaTime;
  });
})();

TypeScript 支持说明

PixiJS 支持 WebGPU，因此类型声明依赖 WebGPU 类型：

• TypeScript 5：内置类型不含 WebGPU，PixiJS 会自动引入 @webgpu/types，无需额外配置。
• TypeScript 6/7：WebGPU 类型已并入 dom，但部分版本可能缺失 GPUTextureUsage 等定义，建议改用 @types/web。

npm install --save-dev @types/web

{
  "compilerOptions": {
    "lib": ["esnext"],
    "types": ["@types/web"]
  }
}

适用与不适用

PixiJS 专注于 2D 渲染，非常适合网页小游戏、数据可视化、交互式 H5 与图形编辑器。但它本身不是游戏框架，不提供物理引擎、音频管理、场景切换等能力，这些需要搭配其他库或自行实现。

生态与许可

项目采用 MIT 协议，社区活跃，官方提供指南、教程、示例与 API 文档，并通过 Discord 与 Open Collective 支持维护。