Does three.js automatically update the WebGLRenderer drawing buffer when devicePixelRatio changes, or must the app re-apply setPixelRatio and setSize?

Three.js does not automatically update the WebGL drawing buffer when the devicePixelRatio changes. You must manually detect the change and re-apply both setPixelRatio and setSize to ensure the rendering remains crisp.

The WebGLRenderer caches the pixel ratio provided to setPixelRatio. It only recomputes the internal drawing buffer (the backing store) when setSize or setPixelRatio is explicitly called. Because it does not subscribe to browser-level media query changes or window movements between displays with different scaling factors (e.g., moving from a standard monitor to a 4K laptop display), the canvas will often appear blurry or incorrectly scaled unless the application triggers a manual update.

How to Implement Manual Updates

To handle these transitions reliably, follow these steps:

• Listen for changes: Use the resize event for layout changes. However, for DPR-only changes (like moving between screens), use a matchMedia listener on window.devicePixelRatio.
• Clamp the ratio: It is best practice to clamp the pixel ratio (usually to a maximum of 2) to prevent performance degradation on ultra-high-density displays.
• Update the renderer: When a change is detected, call the renderer methods with the new values.

const mediaQuery = window.matchMedia(`(device-pixel-ratio: ${window.devicePixelRatio})dppx)`);

function onResize() {
  const dpr = Math.min(window.devicePixelRatio, 2);
  renderer.setPixelRatio(dpr);
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onResize);
mediaQuery.addEventListener('change', onResize);

// Initial call
onResize();

Assumptions and Uncertainty

This explanation assumes you are using the standard WebGLRenderer. While the behavior of caching the pixel ratio is consistent across stable versions, the exact way browsers report a devicePixelRatio change during window dragging can vary slightly between OS and browser combinations. Using matchMedia is the most robust cross-browser method to catch these specific shifts without polling the value in the animation loop.