Runs extremely slowly in firefox

[endigma]

Description

Observed game speed is 1/2 or less of what I experience in chrome.

Chrome 112.0.5615.49 (64-bit)
Firefox 112.0.2 (64-bit)

Screenshots

No response

Additional information

No response

[hillmarcus]

I'm having the same issue.

✅ Chromium 112.0.5616.165 (64-bit)
❌ Firefox 112.0.2 (64-bit)

Running on linux (Manjaro) for what its worth.

Cute game, good work on it. Hope you can figure this out.

[ofabel]

Same here:

✔️ Brave 1.51.114 (64-bit)
✖️ Firefox 113.0 (64-bit)

Running on Kubuntu 23.04:

CPU: Intel i7-10875H (16) @ 5.100GHz
GPU: Intel CometLake-H GT2 [UHD Graphics]
GPU: NVIDIA Quadro T2000 Mobile / Max-Q
Memory: 31823MiB

Keep up the good work 👍

[jorendorff]

I think there's an easy way to fix this!

I used https://profiler.firefox.com/ to see what's so slow. The game is spending all its time in Canvas methods (drawImage for the backgrounds and stroke for the axes). I filed a Firefox bug about those being slow.

There are two easy ways the game can work around Firefox's slow Canvas:

1. Drop frames.
   The current code draws the whole every time tick() is called. The game could instead skip the rendering if we are behind. Since we are not skipping any math, the simulation will proceed exactly the same, and we'll still peg a CPU, but we'll save a ton of work.

2. (maybe) Don't make a huge Canvas.
   I noticed the slowness on laptops with high-pixel-density displays, and found that if I shrink the window to cover a quarter of the screen, it runs much faster. So the game could check for screens over 2000 pixels wide (or just check for sluggish rendering), and in that case make the canvas half as wide and half as tall. The rendering code would definitely run faster -- the only question is how it would look.

A pro game developer would want to get off the CPU. Maybe this is crazy, but I wonder if the game would suddenly run much faster if it just used images (scaled with CSS) for the backgrounds. It's possible to take it much further and use SVG for everything, or make the jump to WebGPU, but I bet maybe it's not necessary.

[jorendorff]

OK, #562 implements fix 1.

Fix 2 is a bit harder. Currently, screen coordinates (such as the coordinates in mouse click events) are assumed to be the same as canvas coordinates. I think it's possible to fix this by applying a transform to ctx, but I haven't tried it yet.

[endigma]

from ff bugzilla:

Looks to be filled with filters. D2d-canvas is faster than GPU-canvas.

I'm not super versed with canvas APIs, but shouldn't it be possible to move this to the GPU? If not, what might a WebGL port look like?

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

[jorendorff]

the only question is how it would look.

It looks incredibly ghastly. No good.

[Domssson]

The FPS is around 8-10 in Firefox 120.0 (64-bit) on my computer. In the current (https://sinerider.com) version also the time is slowed down, however it's fixed in the development version (https://sinerider.hackclub.dev) - but the performance is still poor.

[polypixeldev]

Also seeing this on https://sinerider.hackclub.dev on Firefox 121, Fedora Linux 39