Skip to content

Adaptive DPR

Video Lecture

Section Video Links
Adaptive DPR Adaptive DPR Adaptive DPR 

 (Pay Per View)

You can use PayPal to purchase a one time viewing of this video for $1.49 USD.

Pay Per View Terms

  • One viewing session of this video will cost the equivalent of $1.49 USD in your currency.
  • After successful purchase, the video will automatically start playing.
  • You can pause, replay and go fullscreen as many times as needed in one single session for up to an hour.
  • Do not refresh the browser since it will invalidate the session.
  • If you want longer-term access to all videos, consider purchasing full access through Udemy or YouTube Memberships instead.
  • This Pay Per View option does not permit downloading this video for later viewing or sharing.
  • All videos are Copyright © 2019-2025 Sean Bradley, all rights reserved.

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

<>