PixiJS
PixiJS is a fast, flexible 2D WebGL renderer that creates rich interactive graphics, games, and visualizations. It leverages hardware acceleration for smooth performance across devices.
In This Section
- Getting Started — Setup, renderer, stage, and sprites
- Graphics & Textures — Drawing shapes, sprite sheets, and texture management
- Animation & Interactivity — Ticker-based animation, event handling, and filters
- Text & Bitmap Fonts — Text objects, bitmap fonts, and rich text styling
- Performance & Best Practices — Optimization, pooling, and production deployment
Pages in this section
PixiJS Getting Started — Complete Beginner's Guide to 2D WebGL
Learn PixiJS from scratch: setup, renderer, stage, sprites, and textures. Build your first 2D WebGL scene step by step with interactive examples.
✓ LivePixiJS Graphics & Textures — Drawing Shapes and Managing Spritesheets
Master PixiJS Graphics API and texture management: draw shapes, work with sprite sheets, BaseTexture vs Texture, RenderTexture, and texture regions.
✓ LivePixiJS Animation & Interactivity — Ticker, Events, Drag-and-Drop, Filters
Create interactive PixiJS apps: ticker-based animation, pointer events, drag-and-drop, hit areas, filters, and tweening. Build a draggable shape playground.
✓ LivePixiJS Text & Fonts — Text Objects, Bitmap Fonts, and Rich Text Styling
Render text in PixiJS: Text objects, TextStyle, web fonts, bitmap fonts, rich text tags, and performance comparison between Text and BitmapText.
✓ LivePixiJS Performance Optimization — Batching, Object Pooling, Culling, and Best Practices
Optimize PixiJS performance: sprite batching, ParticleContainer, object pooling, texture atlases, viewport culling, HiDPI handling, and production tips.
✓ Live