Hi all
I'm totally new to Pixi, WebGL, Canvas... and actually I'm not making a game but a React webapp, hope this is fine to post there...
What I want to build:
- Draw an image (A4 document scan, generally jpeg/png from 100k to 1m)
- On top of each word of the image, draw an interactive rectangle which can be hovered/clicked
- Thanks to deep learning/OCR, I already have the size of the image and the relative positions of the document words
- Documents can have from 0 to 3000 words
- Ability to zoom
I tried first with regular CSS, but clearly found out that using position absolute was not performant to position thousands of rectangles on the document: performance was not good on scroll for example.
I tried using PixiJS to draw the rectangles on top of the image. The result is better, but I still see some performance problems on my old computer, particularly when the image is zoomed (it affects scroll so it's not really related to JS code I guess)
Here is the result: https://dhatim-poc-mlhafeauav.now.sh/
Can someone tell me how to optimize this for older computers?
How can I audit the performance of this solution properly?
Is there an easy way to simulate an old computer on my dev env? particularly regarding GPU instead of CPU throttling?
The solution I used for the above document of
- An html img tag
- A transparent canvas sitting on top of the image, on which I draw the rectangles (Graphics, drawRect)
I tried to follow some recommendations found here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
- I use a background image instead of drawing the image to the canvas (not sure it has a large impact because there is no "game loop")
- I use Math.floor for the position of the words
Are there other recommendations you could give to have better performances?
Particularly:
- should I use a small canvas size and use a scale transform to handle the zooming? (see Mozilla perf link above)
- should I use Sprite or Graphics for the rectangles?
- should I use canvas or WebGL?
- how can I measure my performance optimizations? I currently feel I'm totally blind and not even sure that what I do produce a better result without concrete numbers
Edit: here is a version with a canvas scale transform: https://build-ybbdwoumva.now.sh/
Thanks