Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/etowahadams/pixijs-rendering-comparison
A comparison of different PixiJS rendering strategies
https://github.com/etowahadams/pixijs-rendering-comparison
pixijs
Last synced: about 2 months ago
JSON representation
A comparison of different PixiJS rendering strategies
- Host: GitHub
- URL: https://github.com/etowahadams/pixijs-rendering-comparison
- Owner: etowahadams
- Created: 2024-01-11T17:19:19.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-05-16T17:46:43.000Z (8 months ago)
- Last Synced: 2024-10-18T17:27:27.896Z (3 months ago)
- Topics: pixijs
- Language: TypeScript
- Homepage: https://etowahadams.github.io/pixijs-rendering-comparison/
- Size: 139 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# PixiJS Rendering Comparison
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](https://github.com/pixijs/pixijs) v7 and v8.
Try the [live demo](https://etowahadams.github.io/pixijs-rendering-comparison/).
## Results
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](https://github.com/etowahadams/pixijs-rendering-comparison/blob/main/src/texture-scatter-plot.ts)) | Every circle uses the same texture | 120 | 120 | 24 | 15 |
| Unique Texture, Translate ([source](https://github.com/etowahadams/pixijs-rendering-comparison/blob/main/src/texture-unique-scatter-plot.ts)) | Every circle is a unique texture | 120 | 60 | 13 | 2 |
| Unique Graphics, Translate ([source](https://github.com/etowahadams/pixijs-rendering-comparison/blob/main/src/translate-scatter-plot.ts)) | Every circle is a Graphics object | 60 | 30 | 3 | 0 |
| Redraw Graphics ([source](https://github.com/etowahadams/pixijs-rendering-comparison/blob/main/src/redraw-scatter-plot.ts)) | All circles get drawn to the same Graphics object | 22 | 5 | 1 | 0 |
See [here](https://benchmarks.slaylines.io/) for a comparison of different 2D rendering engines.
## Local development
```
pnpm install
pnpm run dev
```
## How this was made
The repository was scaffolded using `pnpm create vite minimal-pixi-plots --template vanilla-ts`