Individual skill

3d-retina-resolution

Render a 3D canvas sharply on Retina and HiDPI displays, including explicit 200 percent resolution, synchronized renderer and post-processing sizes, correct pointer coordinates, and measured quality fallbacks. Use for blurry WebGL output, 2x rendering, high-resolution previews, and display-density changes.

agent-skills/3d/3d-retina-resolution/SKILL.md

Read pinned source

Source commit 5ea1661a0e05d82b054553daaa6baf6d0233c33c

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
Yes
Observed behavior
Not checked yet
Last checked
Nov 8, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
7,324
Repository last updated
Nov 5, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 3D Retina Resolution

Treat an explicit **200% rendering** request as two drawing-buffer pixels per CSS pixel in each dimension. A 1200 × 800 CSS canvas therefore uses a 2400 × 1600 drawing buffer, or four times the pixels of 100%. Layout and camera framing stay unchanged.

## Choose the scale deliberately

- **Fixed 200%:** effective pixel ratio is `2`, independent of device pixel ratio. This is the default when the user explicitly requests 200%.
- **Automatic Retina, capped at 2×:** effective ratio is `Math.min(window.devicePixelRatio || 1, 2)`. This can render at 1× on an ordinary display; label it Auto rather than claiming it always renders at 200%.
- **Relative to native resolution:** multiply native DPR only when the user explicitly wants that meaning. Native 2× multiplied by another 2 becomes 4× per dimension, or sixteen times the CSS pixel count.

Keep an explicit quality selection distinct from automatic adaptation. Inspect the project's renderer and post-processing architecture before changing sizing.

## Synchronize the rendering pipeline