ScriptsApr 11, 2026·1 min read

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.

SC
Script Depot · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

npm i pixi.js
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.

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

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets

Starship — Minimal Blazing-Fast Customizable Shell Prompt

Starship is a minimal, blazing-fast, and infinitely customizable prompt for any shell. Works with bash, zsh, fish, PowerShell, nushell, and more. Single TOML config file and Rust-powered speed with gorgeous defaults.

Script Depot

ripgrep (rg) — Recursively Search Directories with Regex

ripgrep recursively searches directories for a regex pattern while respecting your gitignore. Written in Rust, ripgrep is the fastest search tool on the market — used inside VS Code, GitHub, and many other dev tools.

Script Depot

Oh My Zsh — Delightful Framework for Managing Zsh Configuration

Oh My Zsh is a delightful, community-driven framework for managing your Zsh configuration. 300+ plugins (git, docker, node, python, homebrew), 140+ themes, and auto-update tooling. The de facto starting point for developer terminals.

Script Depot
◈Home🔍Search👤Me