纯净玩（pureplay）· 原生 Canvas 棋类小游戏合集

PixiJS 是一个以 TypeScript 编写的 Web 2D 渲染引擎，仓库 README 将其定位为“面向 Web 的下一代、快速的 HTML5 创作引擎”。它的核心目标是在浏览器中提供高性能、轻量且易用的 2D 图形渲染能力，可用于游戏、数据可视化，以及替代 Canvas 2D 绘图等场景。

从 README 的定位看，PixiJS 并不只是一个“画图库”，而是一套围绕 2D 内容创作构建的渲染基础设施：它同时提供 WebGL 与 WebGPU 两种渲染后端，并配套资源加载、文本渲染、遮罩、滤镜、混合模式等能力。官方站点提供指南、教程、示例与 API 文档，便于开发者从入门到深入查阅。

需要说明的是，README 中出现的“最快”“无与伦比的性能”等表述属于项目自身的宣传性描述，具体性能表现与浏览器兼容范围仍需结合实际项目核验。

技术要点

渲染与图形管线

PixiJS 的核心是 2D 渲染，README 明确列出 WebGL 与 WebGPU 两条渲染路径。WebGPU 作为较新的 Web 图形 API，其类型定义会直接影响 TypeScript 项目的配置，这一点在 README 的 TypeScript 章节中有专门说明。

场景组织方式

从 Usage 示例可以看到 PixiJS 的基本使用模型：创建 Application 应用实例，初始化后把 app.canvas 挂载到页面；通过 Assets 加载纹理，用 Sprite 表示可绘制对象，设置锚点 anchor 与坐标，再通过 app.stage.addChild 加入舞台。舞台（stage）与容器式的子节点组织，构成了典型的 2D 场景图结构。

帧循环与时间步进

示例中使用 app.ticker.add 注册每帧回调，回调参数 time 提供 deltaTime。README 注释说明：在 100% 性能下 delta 为 1，用它与旋转量相乘可以得到与帧率无关的变换。这是 PixiJS 处理动画更新的推荐方式之一。

TypeScript 类型配置

由于支持 WebGPU，PixiJS 的类型声明依赖 WebGPU 类型，来源随 TypeScript 版本不同而变化：

• TypeScript 5：不内置 WebGPU 类型，PixiJS 会引入 @webgpu/types，无需额外配置。
• TypeScript 6 与 7：WebGPU 类型内置于 "dom" 库，但部分版本可能缺少 GPUTextureUsage 等定义；此时建议用 @types/web 替代 "dom"，并从 types 中移除 @webgpu/types 以避免冲突。

README 给出的配置示例为安装 @types/web 作为开发依赖，并在 compilerOptions 中设置 lib: ["esnext"] 与 types: ["@types/web"]。