Interactive data visualizations like scatterplots require efficient rendering of thousands of points. What is the most performant PixiJS rendering stratgy for rendering many different graphics objects?
This repository tests the performance of different rendering strategies for this task, using the PixiJS v7 and v8.
Try the live demo.
The minimum FPS for each rendering strategy is shown below. The benchmark was conducted in Chrome (Version 120) on a MacBook Pro (M2). That PixiJS is highly optimized for rendering Sprites is clear from the results.
| Rendering Strategy | Description | Min FPS @ 4,000 points | Min FPS @ 16,000 points | Min FPS @ 64,000 points | Min FPS @ 128,000 points |
|---|---|---|---|---|---|
| Same Texture, Translate (source) | Every circle uses the same texture | 120 | 120 | 24 | 15 |
| Unique Texture, Translate (source) | Every circle is a unique texture | 120 | 60 | 13 | 2 |
| Unique Graphics, Translate (source) | Every circle is a Graphics object | 60 | 30 | 3 | 0 |
| Redraw Graphics (source) | All circles get drawn to the same Graphics object | 22 | 5 | 1 | 0 |
See here for a comparison of different 2D rendering engines.
pnpm install
pnpm run dev
The repository was scaffolded using pnpm create vite minimal-pixi-plots --template vanilla-ts