What problem does it solve? WebGL canvases often look blurry on Retina and HiDPI displays because the drawing buffer, renderer pixel ratio, and post-processing composer sizes fall out of sync. This Skill provides a disciplined workflow for rendering a 3D canvas at an explicit 200% resolution without breaking layout, camera framing, or pointer coordinates. ## Core Features & Use Cases - Deliberate scale selection: Distinguishes fixed 200% rendering, automatic Retina capped at 2x, and native-DPR-relative scaling so the reported quality matches the actual output. - Synchronized pipeline sizing: Keeps renderer.setPixelRatio, renderer.setSize, composer.setPixelRatio, composer.setSize, camera aspect, and custom render targets consistent in logical and physical pixels. - Resize and pointer handling: Uses ResizeObserver, DPR re-evaluation on zoom or display changes, and getBoundingClientRect-based pointer normalization for correct raycasting. - Budget and fallback policy: Measures frame time at 1x and 2x, checks GPU limits, and steps down optional post-effects before compromising the main view. - Use Case: A user reports that their Three.js landing page hero looks soft on a MacBook display. Use this Skill to set a fixed 200% drawing buffer, synchronize the EffectComposer, and verify canvas.width matches twice the CSS size. ## Quick Start Use the 3d-retina-resolution skill to render this Three.js scene at fixed 200% resolution and verify every render buffer matches the expected drawing buffer size.
