Device pixel ratio
The multiplier between CSS size and actual canvas pixels. Doubling it looks sharper but makes the GPU shade four times as many pixels.
See it
What it is
Device pixel ratio, exposed as window.devicePixelRatio, says how many physical display pixels correspond to one CSS pixel in each direction. A Retina MacBook reports 2 and most recent iPhones report 3. A 400 by 800 CSS-pixel canvas at DPR 3 needs a 1200 by 2400 drawing buffer for native sharpness. That is nine times as many pixels to shade as DPR 1, not three times.
It is the fastest quality-versus-performance dial in a WebGL app. Use the real DPR for crisp output when the device can afford it, or cap it on phones and heavy scenes. Fullscreen post-processing and render targets feel the same squared cost, so a small reduction can recover a large amount of fill rate and GPU memory.
Gotcha: CSS size and drawing-buffer size are separate. Setting only the canvas CSS dimensions stretches a low-resolution buffer and looks blurry; blindly matching a DPR of 3 or 4 can waste work users barely see. DPR can also change with browser zoom or when a window moves between displays, so update it with the resize path instead of assuming it is fixed at startup.
Ask AI for it
Make this three.js canvas sharp without letting high-density screens overload the GPU. On every resize, call renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) and renderer.setSize(container.clientWidth, container.clientHeight, false), then call EffectComposer.setPixelRatio() with the same capped value and EffectComposer.setSize() with the CSS dimensions. Add a quality control for DPR 1, 1.5, and 2 and show the drawing-buffer dimensions.