-
Notifications
You must be signed in to change notification settings - Fork 32
Hardware requirements
Timeline chart is leveraging the PIXI Js library to take advantage of hardware acceleration. This should allow the new implementation of a timeline to be faster than legacy products.
In terms of actual performance we want probably 60 fps, I would argue 10 fps is a fine compromise for the WORST case
The amount of elements shown depends on the screen resolution, here are the maximum possible amounts of elements to show.
| Resolution | Max # states (and textured pixels) | Max # vertexes | Fill rate (mega v/s) |
|---|---|---|---|
| 4k | 8.3 M | 33 M | 330 M |
| 1440p | 3.6 M | 15 M | 150 M |
| 1080p | 2 M | 8 M | 80 M |
| 720p | 1 M | 4 M | 40 M |
To give perspective (2020 numbers):
- This is the worst case, it is very very hard to achieve
- An old laptop or modern tablet should handle 720p
- A new laptop should handle 1080p
- A gaming console or desktop computer should handle 1440p
- A top notch PC can handle 4K
Optimisations that come to mind: Note: these optimizations will not accelerate the "average case" only degenerate cases.
- On the software side a quick optimisation is "if a state is one pixel wide, draw a line" this will divide the number of vertexes by 2
- We can also apply a "Zebra optimisation": one state is full and the other draws over. So we can make alternating colours draw as surfaces. So in some cases we can divide by 2 another time.
- Finally we can draw to a back buffer and over-render, then keep the image as a surface. Then panning will be trivial, we will lose in terms of memory usage and we will suffer aliasing issues with this.
- Check that we wait for VSync to avoid tearing issues. (we might already do that.)
- It appears that PIXI is single threaded and uses OpenGL in a single threaded way, this may lead to CPU bottlenecks.
- Finally we should avoid pre-mature optimisations I wrote them to show that we know there is work that can be done if needed on the software side.
bunny-mark is available by default with PIXI js. It scales really poorly (I tried it on several PCs and the results are not linear), but it uses pixiJS.
| CPU | GPU | Browser | Bunny Mark FPS |
|---|---|---|---|
| Intel i7-4610M | Intel HD Graphics 4600 | Firefox 79 | 2-3 |
| Intel i7-4610M | Radeon HD 8790M | Firefox 79 | 9-10 |
| AMD Ryzen 2700 @ 4.00 GHz | Radeon RX 570 @ 1.2 GHz | Firefox 79 | 15 |
| AMD Ryzen 2700 @ 4.00 GHz | Radeon RX 570 @ 300 MHz | Firefox 79 | 15 |
| AMD Ryzen 2700 @ 4.00 GHz | Radeon RX 570 @ 1.2 GHz | Chromium 84 | 17 |
| AMD Ryzen 2700 @ 4.00 GHz | Radeon RX 570 @ 300 MHz | Chromium 84 | 17 |
| AMD Ryzen 2700 @ 2.00 GHz | Radeon RX 570 @ 300 MHz | Chromium 84 | 12 |
| AMD Ryzen 2700 @ 2.00 GHz | Radeon RX 570 @ 1.2 GHz | Chromium 84 | 12 |
| Intel i7-3770k | Radeon RX 570 | Firefox | 6-16 |
| Intel i7-7770k @ 4.2 Ghz | Geforce GTX 1080Ti | Brave (chromium) | 23 |
| Intel i5-6200U @ 2.8 GHz | Intel® HD Graphics 520 | Chrome 84 | 11 |
| Intel i9-9750H @ 4.5 GHz | Quadro T1000 | Chrome 84 | 19 |
| Intel i7-6700K @ 4.0 GHz | Geforce GTX 1070 | Chrome 84.0.4147.105 | 20 |
| Snapdragon 855 @ 655 GHz | Adreno 640 | Edge Chromium | 14 |
| Intel i5-4690k @ 4.5ghz | Geforce GTX 1080Ti | Edge | 21 |
| Intel i7-8700K | Geforce RTX 2080 Ti | Chrome 84 | 23 |
| Intel i7-8700K | Geforce RTX 2080 Ti | Edge | 26 |
| Intel i5-7600k | [Geforce RTX 2070 super] | Chrome | 27 |
| [Intel i7-8850H] @ 2.60 ghz | [Quadro P3200] | Edge | 14 |
| 2x [Intel Xeon E5-2697 V3] | Quadro K620 | firefox 79 | 16 |
Conclusions: you need a GPU, but it is definitely single thread performance limited as a benchmark, it should be treated as a sanity test, not bandwidth test.