Guide · Agent skill

How to use the 3D Retina Resolution agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

The 3D Retina Resolution skill gives an AI agent a set of rules for making Three.js and WebGL canvases render sharply on Retina and HiDPI screens. It covers explicit 200% rendering, keeping the renderer and post-processing sizes in sync, accurate mouse and pointer coordinates, and lower-quality fallbacks when performance suffers. This guide explains what the skill does, how to install it, how to ask for it, and where it helps or doesn't.

3D Retina ResolutionMengTo/Skills · MIT Download the skill

Quick start

1Download the skill. Get the ZIP for agent-skills/3d/3d-retina-resolution from the directory page.
2Unzip into the right folder. Place the folder in ~/.claude/skills/ for personal use, or in the project's .claude/skills/ for one repository. You can also upload it under Settings → Capabilities → Skills in the Claude apps.
3Confirm your project fits. Make sure you have a Three.js WebGL scene with a renderer and camera, and a resizeCustomTargets adapter if you use custom render targets.
4Ask for the fix in plain language. Describe the blurry canvas or 2x request and say whether you want fixed 200% or Auto.
5Review the sizing changes. Check that renderer, composer and custom targets all use the same ratio and that the camera aspect is updated.
6Verify on DPR 1 and Retina screens. Compare the canvas CSS size with the drawing buffer size, and confirm pointer selection still lines up.

What is an agent skill and what does this one do?

An agent skill is a folder of instructions (a SKILL.md file plus optional supporting files) that an AI coding agent loads when a task matches the skill's description. Once loaded, the agent follows the skill's guidance instead of improvising.

This skill targets blurry 3D output. When installed, the agent knows how to set the drawing-buffer size and pixel ratio consistently across the renderer and post-processing passes, handle resizing and display-density changes, and keep mouse selection accurate. It can apply a fixed 200% scale or an automatic scale capped at 2x.

Fixed 200%: the effective pixel ratio is 2, regardless of the device's pixel ratio.
Auto: the ratio is Math.min(window.devicePixelRatio || 1, 2), so an ordinary 1x display may render at 1x. The skill asks that this be labelled Auto, not 200%.
Fallbacks: guidance for stepping down quality when frame time is poor, without resizing every few frames.

Install the 3D Retina Resolution skill

Download the ZIP for agent-skills/3d/3d-retina-resolution from the directory page. The package contains agents/openai.yaml, REFERENCES.md and SKILL.md.

For a personal install, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder so it applies only to that repository.

In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.

Personal: ~/.claude/skills/3d-retina-resolution/
Project: .claude/skills/3d-retina-resolution/ inside your repository
Claude apps: Settings → Capabilities → Skills → upload

Check that your project meets the requirements

The skill is written for a 3D project that uses Three.js WebGL. Its examples assume a renderer, a camera, and optionally an EffectComposer. If you have custom render targets, the app must supply a resizeCustomTargets adapter, because the skill does not create that for you.

The skill does not run scripts and does not use the network, so it only supplies instructions to the agent.

A Three.js WebGL scene with a renderer and camera
Optional EffectComposer for post-processing
An app-supplied resizeCustomTargets adapter for any custom render targets

Trigger the skill with natural requests

You don't need a special command. Describe the problem in plain language and mention the rendering context. The skill's description covers blurry WebGL output, 2x rendering, high-resolution previews, and display-density changes, so requests using those ideas are the most likely to load it.

Be specific about which behaviour you want. Say whether you need a fixed 200% render or an automatic scale, and name the files or components involved if you know them.

"My Three.js canvas looks blurry on my MacBook. Make it sharp on Retina."
"Add an explicit 2x render option to our product viewer."
"The bloom pass looks soft after I changed the canvas size. Fix the renderer and composer sizes."
"Clicks on my 3D model are landing in the wrong place on a high-DPI screen. Fix the pointer coordinates."

Apply the sizing pattern in your code

The skill's core pattern sets the pixel ratio and logical size on the renderer and composer together, then passes physical dimensions to any custom targets. The composer is given logical sizes and is not multiplied again. Use CSS to size the canvas and measure the container in CSS pixels.

Verify the result: at fixed 200%, a 1200 × 800 CSS canvas should have a 2400 × 1600 drawing buffer, with the layout and camera framing unchanged.

Set the renderer and composer pixel ratio to the same chosen value.
Call setSize with logical (CSS) dimensions and pass false to renderer.setSize so CSS keeps owning the displayed size.
Update the perspective camera aspect and projection matrix after each resize.

function resize3D(width, height, ratio = 2) {
  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
  if (!Number.isFinite(ratio) || ratio <= 0) throw new RangeError('Invalid render ratio');
  renderer.setPixelRatio(ratio);
  renderer.setSize(width, height, false);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  if (composer) {
    composer.setPixelRatio(ratio);
    composer.setSize(width, height);
  }
  const physicalWidth = renderer.domElement.width;
  const physicalHeight = renderer.domElement.height;
  resizeCustomTargets(physicalWidth, physicalHeight);
}

Handle layout changes, pointers and fallbacks

Observe the canvas container with ResizeObserver, coalesce the notifications, and resize only when dimensions or the effective ratio change. Skip zero-sized hidden views and retry when they become visible. For pointer selection, normalize using canvas.getBoundingClientRect(), so raycasting uses CSS-space coordinates.

The skill also warns that higher resolution does not fix a blurry texture, coarse model, or low-resolution shadow map. Check those sources separately, and avoid CSS scaling or image-rendering: pixelated as a substitute for the correct drawing buffer.

Pointer normalization: (clientX - rect.left) / rect.width, and the same for Y.
Auto mode may step down after sustained poor frame time and recover with hysteresis.
A fixed 200% selection should stay fixed unless a concrete allocation failure requires a visible fallback, and the UI should report the actual scale.

Test the result on different displays

Measure the scene at 1x and 2x with the same camera, tracking frame time and target dimensions. Compare the canvas CSS size with canvas.width, canvas.height and renderer.getDrawingBufferSize(). Expect roughly 2x on each axis, allowing for integer rounding.

Test on both a DPR 1 display and a Retina display. Fixed 200% should stay at 2x on both, while Auto should follow its cap.

Resize from wide to narrow, then hide and show the view.
Check thin edges and detailed materials at the same apparent size.
Confirm that pointer selection and UI alignment still work.

What people use it for

Making a Three.js product viewer sharp on Retina laptops and phones.
Adding an explicit 2x high-resolution preview option for a 3D configurator.
Fixing a soft bloom or ambient-occlusion pass caused by mismatched renderer and composer sizes.
Correcting mouse picking on a 3D model when the page is viewed at high display density.
Adding a quality setting that falls back to lower resolution when frame times are poor.

Frequently asked questions

Is the 3D Retina Resolution skill free to use?

The directory lists the skill's licence as MIT. Check the licence file in the package to confirm the terms before using it in your own product.

What do I need to use this skill?

You need a 3D project that uses Three.js WebGL, with a renderer and camera, and optionally an EffectComposer. If you have custom render targets, your app must provide a resizeCustomTargets adapter.

How do I install the 3D Retina Resolution skill?

Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can upload it under Settings → Capabilities → Skills.

Will this skill make my blurry textures sharp?

No. The skill says higher resolution does not fix blurry textures, coarse models, shadow maps, or low-resolution reflections. Those sources need to be checked and fixed separately.

Does the skill run scripts or access the internet?

According to the listing, it runs no scripts and uses no network. It provides instructions to the agent only.

Why is my canvas still blurry after installing the skill?

Check whether you are in Auto mode on a standard display, which renders at 1x, and whether the renderer and composer ratios match. Also confirm the texture or model itself is high enough resolution.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you build Three.js or WebGL scenes that look blurry on Retina screens, or you need an explicit 2x preview option and want the renderer, composer and pointer logic handled consistently. Skip it if your project does not use WebGL or a 3D canvas, or if your real problem is low-resolution assets, and test carefully before using fixed 200% rendering on weaker mobile GPUs.

Download the skill