scottstts/threejs-awesome-graphics-agent-skills

threejs-image-pipeline

Build a deliberate final-image pipeline for advanced Three.js scenes.

Zobacz źródło
Oryginalny dokument Skill

Treść z repozytorium z zachowaniem nagłówków, przykładów, kodu, tabel, linków i obrazów.

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

text
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.

z tego samego repozytorium

Więcej Skills

Wszystkie Skills
scottstts
Społeczność

threejs-atmosphere-aerial-perspective

Implement physically motivated sky and aerial-perspective systems in Three.js. Use for planetary atmospheres, ground-to-space transitions, Rayleigh/Mie scattering, precomputed LUTs, depth-based transmittance and inscattering, sun/moon discs, and atmosphere-aware lighting.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-bloom

Implement production bloom in advanced Three.js scenes. Use for HDR signal ordering, bloom-node controls, dual selective bloom with guaranteed material restoration, scene-relative emissive hierarchy, and effect-isolation diagnostics.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-camera-direction

Direct advanced Three.js camera systems. Use for scale-aware chase rigs, thrust lag, side/orbit cameras, body-relative up vectors, quaternion handoffs, authored cinematic framing, floating origins, pointer-look controls, camera collision constraints, projection ownership, and lifecycle restoration.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź
scottstts
Społeczność

threejs-exposure-color-grading

Build a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.

instalacje
2
GitHub Stars
911
Aktualizacja
15 paź