Skip to content
Get packs

3D Retina Resolution

Makes WebGL/Three.js 3D canvases render sharply on Retina and HiDPI screens, with correct sizing and pointer math.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When this skill is installed, the agent knows how to fix blurry 3D canvases on high-density screens. It sets the drawing-buffer size and pixel ratio consistently across the renderer and post-processing passes, handles resizing and display changes, and keeps mouse/pointer selection accurate. It can also apply an explicit 200% scale, or an automatic scale capped at 2x, and includes guidance for falling back to lower quality when performance is poor.

Great for

  • Front-end developers building Three.js or WebGL scenes that look blurry on Retina displays
  • Teams building product viewers or 3D previews that need an explicit 2x render option
  • Developers debugging mismatched sizes between renderer and post-processing composer

Skip it if

  • Projects that do not use WebGL or a 3D canvas, since the guidance is specific to that rendering path
  • Users expecting it to sharpen blurry textures or low-resolution models; the skill says higher resolution does not fix those sources
  • Mobile-heavy apps without performance testing, since fixed 200% rendering can be costly on weaker GPUs

Try asking

  • “My Three.js canvas looks blurry on my MacBook. Can you make it render sharply on Retina screens?”
  • “Add an explicit 200% render quality option to this 3D product viewer.”
  • “Fix the bloom and post-processing pass so it lines up after resizing the canvas.”
  • “Make mouse clicks on my 3D model select the right object after I changed the canvas size.”
Step-by-step guide: how to use 3D Retina ResolutionInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    3d-retina-resolution.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip 3d-retina-resolution.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip 3d-retina-resolution.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the scale you want explicitly (Fixed 200%, Auto capped at 2x, or relative to native) so the agent does not guess.
  • Ask the agent to inspect your existing renderer and post-processing setup first, since the skill says to do this before changing sizing.
  • After changes, compare canvas CSS size with canvas.width/height and renderer.getDrawingBufferSize() to confirm the actual scale.

What's inside

  • agents/openai.yaml
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.