# PixiJS — The HTML5 Creation Engine with Fast 2D WebGL

> PixiJS is the fastest, most flexible 2D WebGL/WebGPU renderer for the web. Powers interactive ads, games, data viz, and rich media experiences. Used by Google, IKEA, Disney, and countless HTML5 games on Poki and CrazyGames.

## Install

Save as a script file and run:

## Quick Use

```bash
npm i pixi.js
```

```ts
import { Application, Assets, Sprite } from "pixi.js";

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((ticker) => {
  bunny.rotation += 0.05 * ticker.deltaTime;
});
```

## Intro

PixiJS is the fastest, most flexible 2D WebGL/WebGPU renderer for the web. Started in 2013 by Goodboy Digital, it powers interactive ads, HTML5 games, rich data visualizations, and creative coding experiments. Now on v8 with first-class WebGPU support.

- **Repo**: https://github.com/pixijs/pixijs
- **Stars**: 46K+
- **License**: MIT

## What PixiJS Does

- **Rendering** — Sprites, Graphics, Meshes, Text, NineSlice
- **Ticker** — frame loop with delta time
- **Scene graph** — Container hierarchy with transforms
- **Filters** — blur, glow, noise, color-matrix post effects
- **Textures** — spritesheets, atlas, base textures
- **Interaction** — events (pointer, tap, drag) via FederatedEvents
- **Assets** — smart loader for images, fonts, JSON, spritesheets
- **WebGPU** — v8 experimental backend

## Architecture

A renderer paints the stage (root Container) each tick. Sprites hold a texture + transform. Graphics draws vector shapes. v8 introduced a new renderer architecture that unifies WebGL and WebGPU paths and removed the mandatory global registration.

## Self-Hosting

Client library, ships in bundle.

## Key Features

- 2D WebGL + WebGPU renderer
- Sprites, graphics, meshes, text
- Post-processing filters
- Spritesheet and texture atlas
- Custom shaders
- Asset loader
- Event-based interaction
- Tree-shakeable imports (v8)

## Comparison

| Library | Scope | Renderer | Framework |
|---|---|---|---|
| PixiJS | 2D renderer | WebGL/WebGPU | No |
| Phaser | 2D game framework | Canvas/WebGL | Yes |
| Three.js | 3D | WebGL/WebGPU | No |
| Konva | 2D on canvas | Canvas 2D | No |

## 常见问题 FAQ

**Q: PixiJS vs Phaser 区别？**
A: PixiJS 只做渲染（更灵活，自己组装游戏循环）；Phaser 是完整游戏框架（场景、物理、输入、音频）。需要快速出游戏用 Phaser，需要高度定制用 PixiJS。

**Q: v8 有什么变化？**
A: 重写了渲染核心，WebGPU 支持，更好的 tree-shaking，移除全局注册、ESM-first。升级有 breaking changes。

**Q: 能做 3D 吗？**
A: PixiJS 是 2D 引擎。3D 选 Three.js 或 Babylon.js。

## 来源与致谢 Sources

- Docs: https://pixijs.com
- GitHub: https://github.com/pixijs/pixijs
- License: MIT

---
Source: https://tokrepo.com/en/workflows/3ae8ffec-35aa-11f1-9bc6-00163e2b0d79
Author: Script Depot