Skip to content
Image Generation
Skill

/threejs-screen-space-ambient-occlusion

Implement a production GTAO path in Three.js. Use for half-resolution horizon sampling, reversed-depth reconstruction, bent-normal encoding, full-resolution bilateral reconstruction, environment-light application, contact grounding, and halo diagnosis.

BOOST
From plugin
threejs-awesome-graphics-agent-skills
91124 skills
Install
$ npx -y skills add scottstts/threejs-awesome-graphics-agent-skills --skill threejs-screen-space-ambient-occlusion --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/threejs-screen-space-ambient-occlusion

Context preview

The summary Claude sees to decide when to auto-load this skill.

Implement a production GTAO path in Three.js. Use for half-resolution horizon sampling, reversed-depth reconstruction, bent-normal encoding, full-resolution bilateral reconstruction, environment-light application, contact grounding, and halo diagnosis.

SKILL.md

threejs-screen-space-ambient-occlusion.SKILL.md
name: threejs-screen-space-ambient-occlusion
description: Implement a production GTAO path in Three.js. Use for half-resolution horizon sampling, reversed-depth reconstruction, bent-normal encoding, full-resolution bilateral reconstruction, environment-light application, contact grounding, and halo diagnosis.

Screen-Space Ambient Occlusion

AO estimates missing ambient visibility. It must modulate indirect lighting, not repaint all scene color with a dark multiply.

Workflow

1. Verify linear depth and view-space normals. 2. Reconstruct view position consistently. 3. Sample horizon visibility in a controlled radius. 4. Estimate AO and optional bent normal. 5. Denoise with depth/normal-aware filters. 6. Apply to indirect diffuse and environment response.

Read [references/gtao-bent-normal-pipeline.md](references/gtao-bent-normal-pipeline.md).

Failure conditions

  • direct light and emission are darkened;
  • radius is specified only in pixels;
  • foreground silhouettes cast thick screen-space halos;
  • depth discontinuities are blurred together;
  • AO remains strong at distances where its world radius is subpixel;
  • bent normals are treated as ordinary geometric normals;
  • the implementation claims temporal accumulation even though this path has none.

Routing boundary

This skill owns GTAO gathering, bent normals, denoising, and AO application. Use `$threejs-image-pipeline` only when its depth/normal buffers or pass order must be coordinated with other image-space systems.

Read more
Ships withthreejs-awesome-graphics-agent-skills

Example gallery to visually inspect included examples This is a Three.js agent skills pack for producing awesome graphics.

Get the whole plugin