Significant FPS difference between chrome and firefox

Questions
1

In a video game I am developing, there appears to be a rendering issue on non-chromium based browsers which causes frame rate issues. Specifically, the game runs at ~50 fps on chromium based browsers (tested on Opera, Chrome, Chromium, and Edge) versus Firefox, where it runs at ~20 fps. On Firefox, I observed that the average frame rendering time scales at a 1:1 ratio with window size/resolution, which suggests the bottleneck is Fragment Processing (per this source). This was observed across 2 devices, one Linux and one Windows. This thread on Bugzilla describes a similar issue.

To Reproduce

I’ve observed the issue while running the code below, which comes straight from the ThreeJS Docs. To reproduce, simply run the following Javascript in Firefox in fullscreen (or at least 1920x1080) and compare with Chrome (or any chromium based browser) at the same resolution.

import * as THREE from "https://threejs.org/build/three.module.js";
import Stats from "https://threejs.org/examples/jsm/libs/stats.module.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const stats = Stats();

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
document.body.appendChild( stats.dom );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

const animate = function () {
  stats.update();
	requestAnimationFrame( animate );

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render( scene, camera );
};

stats.begin();
animate();

I’ve put the code in this jsfiddle (you might have to resize the window to reproduce the issue since the scene is rendered on a much smaller canvas in JSfiddle).

Can anyone help me solve this issue? I’m guessing the only way would be to mess with WebGL (which I’d prefer to avoid) but if there’s something that you can modify in the code above that fixes (or even marginally improves) I would really appreciate it!

2

hello ,

Firefox vs chromium vs edge performance

and the last link about this issue
1693555 - Poor performance on FF85 on nasa.gov simulations

1 Like