t3d-effect-composer

name	t3d-effect-composer
description	Explain and build post-processing workflows with t3d-effect-composer. Use when working on EffectComposer, DefaultEffectComposer, post-processing pipelines, effect activation and ordering, buffer-dependent effects, per-object marked effects, composer resize/setup, or when a t3d scene needs bloom, SSAO, SSR, DOF, FXAA, color correction, or related screen-space effects.

T3D Effect Composer

Use this skill when the task has moved beyond a plain t3d scene render and into post-processing, screen-space effects, or composer-managed multi-pass rendering.

Read These References

• Treat SKILL.md and references/pitfalls.md as the highest-priority guardrails for this skill.
• Read references/quick-start.md when building a first composer-enabled example or comparing it with the plain t3d render path.
• Read references/composer-flow.md when explaining EffectComposer, DefaultEffectComposer, buffers, effect ordering, or the overall render lifecycle.
• Read references/default-effects.md when choosing built-in effects or enabling and tuning effects on DefaultEffectComposer.
• Read references/pitfalls.md before answering bug reports, blank-output issues, effect-not-working issues, or tasks that mix plain t3d rendering assumptions with composer usage.

Follow This Workflow

1. Confirm the runtime shape: npm app, bundler-based example, or plain HTML with importmap.
2. Confirm the package imports first:
   • t3d
   • t3d-effect-composer
   • optionally t3d/addons/... such as OrbitControls
3. Build or inspect the render path in this order: canvas, WebGL2 context, renderer, screen render target, composer, scene, mesh, light, camera, frame loop.
4. Keep the required t3d scene update sequence before every composer render:
   • scene.updateMatrix()
   • scene.updateRenderStates(camera)
   • scene.updateRenderQueue(camera)
5. Choose the composer shape:
   • DefaultEffectComposer when you want the built-in effect set and will selectively enable effects.
   • EffectComposer when you want to register only the specific effects or buffers you need.
6. Verify resize handling for both the visible target and the composer.
7. If the user does not actually need post-processing, prefer switching back to the simpler t3d-fundamentals path.

Quick Start

Use this as the default first example for t3d-effect-composer. It matches the plain t3d quick start closely, but replaces direct scene rendering with a composer render and explicitly enables one post-processing effect.

import * as t3d from 't3d';
import { OrbitControls } from 't3d/addons/controls/OrbitControls.js';
import { DefaultEffectComposer } from 't3d-effect-composer';

let width = window.innerWidth || 2;
let height = window.innerHeight || 2;

const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
document.body.appendChild(canvas);

const gl = canvas.getContext('webgl2', {
  antialias: true,
  alpha: false,
  stencil: true
});

const renderer = new t3d.WebGLRenderer(gl);
const screenRenderTarget = new t3d.ScreenRenderTarget(canvas);
screenRenderTarget.setColorClearValue(0.1, 0.1, 0.1, 1);

const effectComposer = new (width, height, {
  : .(renderer.., ),
  : renderer.. > ,
  : !!renderer..()
});

 bloom = effectComposer.();
 (bloom) {
  bloom. = ;
}

 scene =  t3d.();

 geometry =  t3d.(, , );
 material =  t3d.();
 mesh =  t3d.(geometry, material);
scene.(mesh);

 ambientLight =  t3d.();
scene.(ambientLight);

 directionalLight =  t3d.();
directionalLight..(-, , );
directionalLight.( t3d.(, , ),  t3d.(, , ));
scene.(directionalLight);

 camera =  t3d.();
camera..(, , );
camera.( t3d.(, , ),  t3d.(, , ));
camera.( /  * ., width / height, , );
scene.(camera);

 controls =  (camera, canvas);
controls..(, , );

 () {
  (loop);

  mesh.. = time /  * ;
  controls.();

  scene.();
  scene.(camera);
  scene.(camera);

  effectComposer.(renderer, scene, camera, screenRenderTarget);
}
(loop);

 () {
  width = . || ;
  height = . || ;

  camera.( /  * ., width / height, , );

  screenRenderTarget.(width, height);
  effectComposer.(width, height);
}
.(, onWindowResize, );

Key Differences From Plain T3D Rendering

• Install and import t3d-effect-composer as a separate package instead of assuming it ships inside t3d.
• Replace renderer.renderScene(scene, camera, screenRenderTarget) with effectComposer.render(renderer, scene, camera, screenRenderTarget).
• Keep the normal t3d scene update calls before rendering; the composer does not replace them.
• Resize both the visible target and the composer.
• DefaultEffectComposer pre-registers common effects, but they are turned off by default. Enable the ones you actually want.

Important Guardrails

• Prefer npm installation for both t3d and t3d-effect-composer so imports and local package sources stay aligned.
• In plain HTML examples, define an importmap for t3d, t3d/addons/, and t3d-effect-composer before the module script.
• Treat DefaultEffectComposer as a convenience preset, not as proof that effects are already active.
• If an effect appears to do nothing, check effect.active, required buffer dependencies, and whether the effect needs per-object marks.
• For glow-style or other marked effects, confirm the relevant objects expose mesh.effects = { EffectName: weight }.
• Prefer a single clearly visible effect such as Bloom, FXAA, or ColorCorrection for first examples before combining many passes.
• If the task becomes about custom buffers, custom effects, debuggers, or external attachments, explain the basic composer setup first and then narrow to the advanced extension point.