mcpField
T
threejs-image-pipeline

threejs-image-pipeline

github.com/scottsttsCreative & media94899 installsUpdated 1w ago
Repository

About threejs-image-pipeline

A skill for coordinating multiple image-space effects and shared buffers in Three.js. It defines pass ordering and ownership, while directing single-effect work to the relevant specialized skill.

Key features

  1. 01Coordinate shared image-space buffers
  2. 02Define explicit pass ordering
  3. 03Keep HDR bloom before tone mapping
  4. 04Meter exposure from a luminance target
  5. 05Upsample with depth- and normal-aware weights
  6. 06Provide pass toggles and effect-only views

Use cases

  1. 01Combining multiple image-space effects
  2. 02Planning production rendering pass graphs
  3. 03Coordinating depth and normal buffer contracts
  4. 04Tuning effects with isolated views and toggles

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/scottstts/threejs-awesome-graphics-agent-skills --skill threejs-image-pipeline

After installing, type/threejs-image-pipelinein Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlreferences/production-image-pipeline.md

Details

From the project README

Image Pipeline

Use this skill only when composing several image-space systems or defining shared buffers. For one effect, load its atomic skill instead.

Load:

  • $threejs-screen-space-ambient-occlusion for GTAO, bent normals, denoising, or AO application;
  • $threejs-bloom for HDR extraction and bloom;
  • $threejs-exposure-color-grading for metering, adaptation, tone mapping, LUTs, and output conversion.

The pipeline must expose its signals and ordering. Do not install a pile of effects and tune the final frame blindly.

Signal order

scene HDR color + depth + normals + albedo where required
  → lighting-related screen effects
  → atmosphere/transparency composition
  → bloom
  → exposure
  → tone mapping
  → grading
  → lens/presentation effects
  → output conversion

Read references/production-image-pipeline.md for four production pass graphs, their buffer/resolution contracts, and the ownership boundaries between whole-scene and effect-local graphs.

Rules

  • Tone-map once.
  • Keep HDR bloom before tone mapping.
  • Meter exposure from a small luminance target, not the final 8-bit screen.
  • Separate direct and indirect light before applying bent-normal ambient tint when possible.
  • Upsample low-resolution effects with depth/normal-aware weights.
  • Build pass toggles and effect-only views before tuning.
  • UI rendered in the same target needs an explicit protection strategy.
  • Do not load all atomic post skills by default. Route only the effects actually requested.

Routing boundary

Use this skill when multiple image-space systems must share buffers, ordering, or output ownership. For one isolated effect, use its atomic skill without loading this coordinator.

Comments

Markdown supported