Skip to content

Hardware requirements

Matthew Khouzam edited this page Aug 14, 2020 · 28 revisions

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

Drawing assumptions

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.

Benchmark

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.

https://pixijs.io/bunny-mark/

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 @ 650 MHz 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 @ 5 GHz 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.

Clone this wiki locally