Adaptive DPR

Video Lecture

Section	Video Links
Adaptive DPR

Description

On lower end GPUs, the reflections lesson would likely not perform very well.

Raymarching is an expensive operation if done many times, as is when calculating reflections.

A compromise, is to lower the renderers device pixel ratio (DPR) setting.

The DPR, also sometimes may be referred to as DPI, determines how many physical pixels correspond to one logical pixel, which affects rendering quality and performance.

If screen refresh is important for your application, than you can implement an adaptive DPR approach.

//Adaptive DPR
const clock = new THREE.Clock()
let targetFPS = 45 // see notes
let frameCount = 0
let elapsed = 0

function adjustDPR(renderer: THREE.WebGPURenderer) {
  elapsed += clock.getDelta()
  frameCount++

  if (elapsed >= 0.094) {
    let fps = frameCount * elapsed * 100
    frameCount = 0
    elapsed -= 0.1

    if (fps < targetFPS * 0.95) {
      renderer.setPixelRatio(
        Math.min(1, Math.max(0.1, renderer.getPixelRatio() * 0.9))
      )
    } else if (fps > targetFPS) {
      renderer.setPixelRatio(Math.min(1, renderer.getPixelRatio() * 1.1))
    }

    //console.log(`DPR: ${renderer.getPixelRatio()} (FPS: ${fps})`)
  }
}

function animate() {
    adjustDPR(renderer)

    // ... your existing animate function code

Note

Set the targetFPS to a number lower than your ideological target FPS, so that the DPR doesn't auto correct all the time or try to reach an unattainable value.

E.g., If you set targetFPS to 60, and your monitor refresh rate is also set to 60, then what may actually happen is a reported FPS of 59.9999. So this will cause the adaptive DPR function to fluctuate or never reach 60 since it is lower than 60. So 45 may be a better threshold to use for stability.

Warning

If copying the above code into a JavaScript only project, then remove the type annotation from the adjustDPR function signature.

I.e., use function adjustDPR(renderer) {

Working Example

<>