Resolve performance issues in fullscreen visualizer in Firefox
Steps to reproduce
- Play a song in Firefox
- Toggle visualizer on
- Go to the fullscreen
What happens?
The visualizer is clearly lagging behind and not responding to the music.
What is expected?
The animation should be as smooth as possible
Context
As it can be seen in the videos, performance in both browsers goes down. That's because the screen resolution is 2560x1080 and the canvas is rendered as a square of 2560x2560. That is 3,788,800 pixels that are rendered offscreen. Previously I decided to render the canvas as a square due to the visualizer preset in the videos - Rovastar + Loadus + Geiss - FractalDrop (Triple Mix)
. If it was rendered in a 2560x1080 rectangle, the effect of the visualizer preset was not as pleasing as when it is rendered in a square.
Firefox:
Ungoogled Chromium:
The quality of the videos is dumped a bit and they lack a couple of frames. The stuttering in Ungoogled Chromium in fullscreen is much less noticible IRL