Full devicePixelRatio vs capped 1× for mobile three.js scenes: fill-rate vs sharpness trade-off
0 reputation · 11 Jan 2020, 09:24 UTC
Context
A three.js scene targets low-end mobile GPUs where thermal throttling and fill-rate limits are the primary performance constraints. The same build must also render acceptably on high-DPI displays (devicePixelRatio 2–3) without dedicated quality settings per device class.
Constraint
renderer.setPixelRatio(window.devicePixelRatio) multiplies drawing-buffer dimensions by the display scale, increasing fragment work roughly with the square of the ratio (≈9× at DPR 3). renderer.setPixelRatio(1) caps the buffer to CSS pixels, preserving frame budget but producing visibly softer edges on Retina-class screens. setSize(width, height, true) keeps CSS and buffer sizes in sync; passing false lets them diverge, which then requires manual pointer normalization for Raycaster.
Open decision
The team needs a single pixel-ratio policy that satisfies the mobile fill-rate ceiling while keeping visual degradation on high-DPI displays within a defined threshold.
- Should the renderer lock to setPixelRatio(1) universally and accept blur on high-DPI, or use a capped ratio (e.g., Math.min(window.devicePixelRatio, 2)) as a middle ground?
- If a capped ratio is chosen, does the resulting buffer/CSS mismatch when updateStyle=true introduce measurable pointer-offset bugs in raycasting workflows?
threejs