Maintaining optimal frames per second using three.js

Question

Maintaining optimal frames per second using three.js

When using a WebGLRenderer instance with antialias = true, performance problems become evident as the resolution increases, particularly on retina displays (window.devicePixelRatio === 2).

As it is not feasible to switch antialiasing modes dynamically, the query arises: how can we automatically modify the pixel ratio in an attempt to maintain FPS above a specific threshold (e.g. 30)?

javascript performance three.js

Answer 1

Answer №1

The concept involves tracking FPS within the rendering loop (by measuring intervals between requestAnimationFrame calls) and adjusting DPR (Device Pixel Ratio) accordingly.

When we say "tracking", it means storing these intervals in an array, filtering out extreme values to prevent spikes, calculating an average, and comparing it against predefined thresholds.

const highFrequencyThreshold = 20; // ~50 FPS
const lowFrequencyThreshold = 34;  // ~30 FPS

const minDpr = 0.5;
const maxDpr = window.devicePixelRatio;
const deltaDpr = 0.1;

const relaxPeriod = 4000;
const accumulatorLength = 20;

const frameTimestamp = performance.now();
const frequencyAccumulator = [];
const lastUpdatedAt = null;

const renderer = new WebGLRenderer({
  antialias: true,
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

animate();

function animate(timestamp: number = performance.now()) {
  requestAnimationFrame(animate);

  monitor(frameTimestamp, timestamp);
  frameTimestamp = timestamp;

  // additional animation calculations and rendering
  // ...
}

function monitor(frameTimestamp: number, now: number) {
  collectFrequency(now - frameTimestamp);

  // if the accumulator is not yet full
  if (frequencyAccumulator.length < accumulatorLength) {
    return;
  }

  // a recent update has occurred
  if (now - lastUpdatedAt < relaxPeriod) {
    return;
  }

  const dpr = renderer.getPixelRatio();
  const frequencyMedian = median(...frequencyAccumulator);

  if (frequencyMedian > lowFrequencyThreshold && dpr > minDpr) {
    updateDpr(dpr, -deltaDpr, now);
  } else if (frequencyMedian < highFrequencyThreshold && dpr < maxDpr) {
    updateDpr(dpr, deltaDpr, now);
  }
}

function collectFrequency(frequency: number) {
  if (frequency > 0) {
    frequencyAccumulator.push(frequency);
  }

  if (frequencyAccumulator.length > accumulatorLength) {
    frequencyAccumulator.shift();
  }
}

function updateDpr(dpr: number, delta: number, now: number) {
  renderer.setPixelRatio(dpr + delta);
  frequencyAccumulator = [];
  lastUpdatedAt = now;
}

function median(...elements: number[]): number {
  const indexOfMin = elements.indexOf(Math.min(...elements));
  const indexOfMax = elements.indexOf(Math.max(...elements));
  const noMinMax = elements.filter((_, index) => index !== indexOfMin && index !== indexOfMax);

  return average(...noMinMax);
}

function average(...elements: number[]): number {
  return elements.reduce((sum, value) => sum + value, 0) / elements.length;
}

Keep in mind that adjusting the DPR can lead to temporary animation stuttering.

Additionally, a more intelligent method could be implemented for fine-tuning the DPR value instead of using a linear step of 0.1, such as employing a bisectional search technique.

Answer 2

The concept involves tracking FPS within the rendering loop (by measuring intervals between requestAnimationFrame calls) and adjusting DPR (Device Pixel Ratio) accordingly.

When we say "tracking", it means storing these intervals in an array, filtering out extreme values to prevent spikes, calculating an average, and comparing it against predefined thresholds.

const highFrequencyThreshold = 20; // ~50 FPS
const lowFrequencyThreshold = 34;  // ~30 FPS

const minDpr = 0.5;
const maxDpr = window.devicePixelRatio;
const deltaDpr = 0.1;

const relaxPeriod = 4000;
const accumulatorLength = 20;

const frameTimestamp = performance.now();
const frequencyAccumulator = [];
const lastUpdatedAt = null;

const renderer = new WebGLRenderer({
  antialias: true,
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

animate();

function animate(timestamp: number = performance.now()) {
  requestAnimationFrame(animate);

  monitor(frameTimestamp, timestamp);
  frameTimestamp = timestamp;

  // additional animation calculations and rendering
  // ...
}

function monitor(frameTimestamp: number, now: number) {
  collectFrequency(now - frameTimestamp);

  // if the accumulator is not yet full
  if (frequencyAccumulator.length < accumulatorLength) {
    return;
  }

  // a recent update has occurred
  if (now - lastUpdatedAt < relaxPeriod) {
    return;
  }

  const dpr = renderer.getPixelRatio();
  const frequencyMedian = median(...frequencyAccumulator);

  if (frequencyMedian > lowFrequencyThreshold && dpr > minDpr) {
    updateDpr(dpr, -deltaDpr, now);
  } else if (frequencyMedian < highFrequencyThreshold && dpr < maxDpr) {
    updateDpr(dpr, deltaDpr, now);
  }
}

function collectFrequency(frequency: number) {
  if (frequency > 0) {
    frequencyAccumulator.push(frequency);
  }

  if (frequencyAccumulator.length > accumulatorLength) {
    frequencyAccumulator.shift();
  }
}

function updateDpr(dpr: number, delta: number, now: number) {
  renderer.setPixelRatio(dpr + delta);
  frequencyAccumulator = [];
  lastUpdatedAt = now;
}

function median(...elements: number[]): number {
  const indexOfMin = elements.indexOf(Math.min(...elements));
  const indexOfMax = elements.indexOf(Math.max(...elements));
  const noMinMax = elements.filter((_, index) => index !== indexOfMin && index !== indexOfMax);

  return average(...noMinMax);
}

function average(...elements: number[]): number {
  return elements.reduce((sum, value) => sum + value, 0) / elements.length;
}

Keep in mind that adjusting the DPR can lead to temporary animation stuttering.

Additionally, a more intelligent method could be implemented for fine-tuning the DPR value instead of using a linear step of 0.1, such as employing a bisectional search technique.

Maintaining optimal frames per second using three.js

Answer №1

Similar questions

Adjust the size of an element in response to changes in the size of

How to implement a timeout feature in JavaScript/TypeScript for cloud functions

When items are removed client-side, the Listbox becomes null

Transferring information and storing it in a textbox

What steps are needed to set up React SPA authentication using Keycloak and the PKCE flow?

Is there a way to modify the color of my question post-submission?

I am facing difficulty creating a dropdown menu with nested options that only appear when the user hovers over the main selection

By setting `queue: false` when calling jQuery's `show()` method, you can

Guide to integrating a static page with personalized CSS and JavaScript resources within a Rails project

The Google Maps marker is not accurately displaying the designated location

The function dispatch is not recognized and will be removed from the database. An error will be generated indicating that dispatch is not a valid function

What is the best way to create a button with this functionality?

Error: Attempting to access the 'style' property of a non-existent element(index):110 onclick

When attempting to transfer data to a CSV file from my Firebase database, I encounter an issue where the

Add a npm module without type definitions

The problem of IE being interrupted by Ajax requests

Managing JSON data retrieval and manipulation techniques

Utilize specific Angular JS methods just a single time

Divide and store parts in an array

"Troubleshooting: My Three.js scene is displaying blank, what could