utsuboco / r3f-perf

Easily monitor your ThreeJS performances.
https://codesandbox.io/s/perlin-cubes-r3f-perf-wtp9t?file=/src/App.js
MIT License
573 stars 21 forks source link

Inaccurate results in Firefox #21

Closed looeee closed 3 years ago

looeee commented 3 years ago

It seems like the GPU timing and memory is not accurate in Firefox:

ff

There's no way to have each frame take 40ms and still get 60fps so this is clearly inaccurate.

Compare this to the same app running in Chrome: cr

In Firefox I get this console message:

Disjoint_time_query extension not available.

Sure enough, the extension is Chrome only.

Given this, would it be possible to note in the readme that the GPU measurements only work in Chrome? Or even better, hide the inaccurate results completely when the extension is not available.

RenaudRohlinger commented 3 years ago

@looeee oh wow I'm surprised firefox doesn't support it. Well instead of removing it we could do a fallback if not available. I saw that there is a trick to measure the GPU timing by making a promise with a settimeout 0 in the RAF for each draw instructions to get the time it took to execute the gpu and stack them. For example:

const t = performance.now()
// raf
gpuAccums = 0

const glFinish = async (t) =>
  Promise.resolve(setTimeout(() => {
    const dt = this.now() - t;
    gpuAccums += dt;
}, 0));

const addProfiler = (fn, self, target) => function() {
  const t = self.now();
  fn.apply(target, arguments);
  glFinish(t);
};

['drawArrays', 'drawElements', 'drawArraysInstanced',
  'drawBuffers', 'drawElementsInstanced', 'drawRangeElements', etc...]
  .forEach(fn => { if (gl[fn]) gl[fn] = addProfiler(gl[fn], this, gl) });
RenaudRohlinger commented 3 years ago

@looeee Hello. I invested a bit and firefox is giving me the exact same result. About that warning, it was an old code that I cleaned referring to Disjoint_time_query that was deprecated after the GLitch exploit. Also now I manually do a gl.flush() after the endQuery of the timing just to be more precise at it seems to prevent unexpected spikes.

image

RenaudRohlinger commented 3 years ago

I think the only logical reason would be that firefox is weaker than chrome when it comes to webgl?. Maybe you got some extensions that could affect the performances only on firefox. Did you try with a fresh install or private navigation if it affects the performances?

looeee commented 3 years ago

Hey, sorry it's been crunch time over the past week.

I think the only logical reason would be that firefox is weaker than chrome when it comes to webgl?

This is what I thought as well at first, but it seems like the numbers don't make sense. It's reporting 40ms for the GPU time, but 59fps. I'm pretty sure that's not possible, 40ms would give 1000/40 = 25fps. The app certainly doesn't feel like it's running at 25fps in Firefox, it feels just as smooth as Chrome.

There's also the issue with the memory, surely that should be similar even if the frame rate is different?