渲染引擎的核心架构
很多人以为 Pixi.js 就是"在 canvas 上画图的库"，但实际上——它是一个完整的渲染管线系统。从 v8 开始，Pixi.js 同时支持 WebGL 和 WebGPU 两套后端，渲染架构也因此经历了一次彻底重构。
Pixi.js, WebGPU
/**
* 我不知道的 Pixi.js
* 共 10 篇文章
*/
export const series = {
name : "我不知道的 Pixi.js" ,
count : 10 ,
guide : "我不知道的 Pixi.js — 系列导读与阅读路径" ,
description : "《我不知道的 Pixi.js》系列导读、阅读路径与文章索引。" ,
};
文章数量： 10 篇 Pixi.js 版本： v8.16.0（2026 年 2 月）
根据不同背景选择入口：
如果想系统学习 Pixi.js： 按编号 01 → 10 顺序阅读
如果只关心渲染原理： 重点看 01（架构）、02（纹理）、04（滤镜）、06（图形与遮罩）
如果在做游戏开发： 重点看 05（Ticker）、07（性能优化）、09（物理集成）、10（插件生态）
如果在排查性能问题： 直接看 07（性能优化），再看 01 中的批处理部分
| # | 文章 | 核心内容 |
|---|---|---|
| 01 | 渲染引擎的核心架构 | v8 初始化、场景树、变换矩阵、渲染队列与批处理 |
| 02 | 纹理与 Sprites 的管理机制 | Assets 加载、TextureSource/Texture/Sprite 三层架构、Spritesheet、GC |
| # | 文章 | 核心内容 |
|---|---|---|
| 03 | 交互事件的底层实现 | EventSystem、eventMode、命中测试、冒泡捕获、事件委托 |
| 05 | 动画系统的 Ticker 解析 | Ticker 调度、deltaTime vs deltaMS、回调优先级、帧率控制 |
| # | 文章 | 核心内容 |
|---|---|---|
| 04 | 滤镜系统的设计原理 | RenderTarget、GlProgram/GpuProgram 双后端、Uniform、ping-pong 策略 |
| 06 | 图形与遮罩的渲染机制 | v8 链式 Graphics API、三角化、Stencil Mask vs Alpha Mask |
| # | 文章 | 核心内容 |
|---|---|---|
| 07 | 性能优化与调试实践 | Draw Call 优化、Spritesheet、Culling、对象池、内存管理 |
| 08 | 多分辨率与自适应渲染 | DPR、resolution/autoDensity、@1x/@2x 纹理、letterbox/cover 缩放 |
| # | 文章 | 核心内容 |
|---|---|---|
| 09 | 物理引擎的集成实践 | Matter.js 集成、坐标同步、固定时间步进、碰撞事件映射 |
| 10 | 插件与扩展生态 | Spine 骨骼动画、粒子系统、@pixi/ui、自定义插件开发 |
很多人以为 Pixi.js 就是"在 canvas 上画图的库"，但实际上——它是一个完整的渲染管线系统。从 v8 开始，Pixi.js 同时支持 WebGL 和 WebGPU 两套后端，渲染架构也因此经历了一次彻底重构。
很多人以为 Pixi.js 的纹理就是"把图片贴到 Sprite 上"，但实际上纹理管理涉及三层抽象：TextureSource（GPU 上的图像数据）、Texture（纹理上的矩形区域）、Sprite（屏幕上的可渲染对象）。搞清楚这三层关系，大部分纹理相关的性能问题和内存泄漏…
Pixi.js 能渲染画面，但画面要能点、能拖、能悬停，才算一个完整的应用。很多人以为 Pixi.js 的事件就是"给 Sprite 绑个回调"，但实际上——v8 的事件系统经历了一次彻底重构，从 InteractionManager 切换到了基于 W3C 标准的 EventS…
给 Sprite 加个模糊效果只需要两行代码，但 Pixi.js 在背后做了大量工作：创建临时渲染目标、把对象先画到离屏缓冲区、运行 Shader 处理像素、再把结果贴回主画布。v8 的滤镜系统还要同时支持 WebGL 和 WebGPU 两套 Shader 语言，复杂度比表面看…
Pixi.js 的 Ticker 是整个渲染循环的心跳。每一帧画面的更新——无论是角色移动、粒子飘散还是滤镜动画——都由 Ticker 驱动。很多人以为 Ticker 就是 requestAnimationFrame 的封装，但实际上它还管理着回调优先级、时间步长计算和帧率控制…
Pixi.js 的 Graphics 类用来绘制矢量图形——矩形、圆形、线条、多边形。但 v8 对 Graphics API 做了一次大幅重构，beginFill()/endFill() 这套老接口被移除了，换成了链式调用 + 独立的 fill()/stroke() 方法。如果…
Pixi.js 号称"最快的 2D 渲染引擎"，但一个场景放上几千个 Sprite 后照样会卡。性能问题不在引擎本身，而在于开发者是否理解引擎的工作方式。这篇文章不讲泛泛的"减少开销"建议，而是聚焦 Pixi.js 特有的性能杠杆：Draw Call、批处理中断、纹理管理和对象…
同一个 Pixi.js 应用在 MacBook 的 Retina 屏上清晰锐利，在普通显示器上却模糊发虚——这是最常见的多分辨率问题。很多人以为设个 resolution: 2 就能解决，但实际上多分辨率适配涉及三个独立的维度：画布物理尺寸、渲染分辨率和纹理资源选择。这三者需要…
Pixi.js 是渲染引擎，不是物理引擎——它能把东西画出来，但不会让东西"掉下去"。要实现重力、碰撞、弹跳这些物理行为，需要集成第三方物理引擎。这篇文章以 Matter.js 为例，拆解集成过程中的几个核心问题：坐标如何同步、时间步进怎么对齐、碰撞事件如何转化为视觉反馈。
Pixi.js 的核心只负责渲染——把像素高效地画到屏幕上。骨骼动画、粒子系统、UI 组件这些能力都由插件提供。v8 的插件生态经历了一次大规模迁移，部分老插件已经适配了新架构，部分还在路上。这篇文章梳理 v8 生态中最常用的几个插件，并拆解自定义插件的开发方式。