[SOLVED] Will three.js *try* to render at 60fps by default using the WebGL renderer?

Questions
1

Basically, will it not go higher than 60 fps by default.

2

Assuming that you are using requestAnimationFrame, it will not go higher than the refresh rate of your monitor. If your monitor has a refresh rate of 240Hz, then your app may run at 240fps, but the same app on a 60Hz monitor will run at max 60fps.

3 Likes
3

Thank you for answering here. +1. Stackoverflow left a bad taste in my mouth.

4

Just out of curiousity, why?

5

Stackoverflow is not a welcoming place to beginners, I’m not surprised.

1 Like
6

I’ve asked just one question there, but before I did it, I’ve read, at least, about “How to ask”. Thus it wasn’t a problem for me to get the solving answer. :slight_smile:

2 Likes
7

What’s the right way to get higher fps than the monitor refresh rate?

8

What are you trying to achieve?

9

I want to know the maximum fps my computer can render even with a 60Hz monitor, like hardware benchmark from games like Quake.

10

You can try disabling vsync in your browser. There’s a guide here on how to do that:

https://cesium.com/blog/2014/12/01/webgl-profiling-tips/

I haven’t personally tried it, but that’s a good place to start.

11

Is it possible to keep it at maximum 60 fps?

12

Hey @Tibi

You could try limiting the max fps with the following solution…

const maxFPS = 60;
const frameDelay = 1000 / maxFPS;

let lastFrameTime = 0;

function update(currentTime) {

  const elapsed = currentTime - lastFrameTime;

  // Only render the frame if enough time has passed
  if (elapsed > frameDelay) {
    renderer.render(scene,camera)

    lastFrameTime = currentTime - (elapsed % frameDelay);
  }
requestAnimationFrame(update)
}

update() ;
13

How about not using requestAnimationFrame? All that does is invoking your callback at the right time that synchronizes with your monitor refresh rate (or ideal paint time).

Just replace it with setImmediate instead.