Hardware requirements

Drawing assumptions

We want probably 60 fps, I would argue 10 fps is a fine compromise for the WORST case

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 number):

• 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.)
• 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

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.