https://benchmarks.slaylines.io/
- Up to a million different rectangles moving on a canvas with various speed.
- Be extra careful with "the danger zone" (⚠ / ⚡): it can easily hang your browser.
- Different choice of libraries used to render the scene :
| module kb | |
|---|---|
| PixiJS | |
| Mesh.js | |
| P5.js | |
| ZRender | |
| Two.js | |
| Konva.js | |
| CanvasKit | |
| Pencil.js | |
| Paper.js | |
| Fabric.js | |
| Three JS | |
| Scrawl-canvas | |
| Pts | |
| EaselJS | |
| SVG.js | |
| Next2D | |
| Phaser 3 | |
| LittleJS |
Thanks to KaliedaRik for the (highly unscientific) comparison of the performance in different browsers (MacBook Pro 2019, 8k boxes):
| Library | Chrome | Firefox | Safari |
|---|---|---|---|
| Pixi | 60 | 48 | 24 |
| Scrawl-canvas | 56 | 60 | 40 |
| P5 | 15 | 4 | 44 |
| Mesh | 47 | 34 | 18 |
| ZRender | 13 | 4 | 28 |
| Two | 23 | 25 | 16 |
| Konva | 23 | 7 | 19 |
| CanvasKit | 17 | 19 | 22 |
| Paper | 16 | 6 | 16 |
| Easel | 11 | 4 | 28 |
| Pencil | 12 | 3 | 19 |
| Pts | 12 | 4 | 13 |
| Fabric | 9 | 4 | 9 |
| SVG | 10 | 7 | 10 |
| Three | 8 | 7 | 4 |
| DOM | 17 | 1 | 11 |
| Raw JS | 19 | 19 | 39 |
Pure WebGL implementation outperforms them all with 60/120 fps on modern hardware (2023 laptop/tablet/mobile) for 1M boxes due to GPU offload of position computations.
$ yarn install
$ yarn build
$ yarn start
A list of webgl libraries : https://gist.github.com/dmnsgn/76878ba6903cf15789b712464875cfdc