PostprocessingSyncSystem

Builds and manages a THREE.js EffectComposer pipeline from the Postprocessing component's state, enabling full-screen visual effects in the rendered scene.

Overview

PostprocessingSyncSystem runs every frame and is responsible for:

• Building an EffectComposer with a RenderPass base and adding post-process passes derived from the enabled effects in Postprocessing.
• Rebuilding the composer pipeline when the effect configuration changes (detected by signature).
• Handing off the composer to RenderSystem via scene.userData.ecsPostprocessingComposer so the render pass uses it instead of the default renderer.render().
• Disposing old composers and passes when the configuration changes or the component is removed.

Queried components

Component	Access
Postprocessing	Read (effects array and each effect's enabled/parameter state)

Supported effects

Effect	THREE.js pass
bloom	UnrealBloomPass
dotScreen	DotScreenPass
glitch	GlitchPass
film	FilmPass
bokeh	BokehPass
ssao	SSAOPass
hueSaturation	ShaderPass (HueSaturationShader)
sepia	ShaderPass (SepiaShader)
vignette	ShaderPass (VignetteShader)

Behavior notes

• Composer handoff — when the composer is active, scene.userData.ecsPostprocessingComposerActive is set to true and scene.userData.ecsPostprocessingComposer holds the composer reference. RenderSystem checks this flag and delegates rendering to the composer instead of calling renderer.render() directly.
• Signature-based rebuild — the full effect configuration is serialized each frame. The composer is only rebuilt when the signature changes, so parameter tweaks during runtime (e.g. adjusting bloom strength from the inspector) are applied efficiently.
• Cleanup — when the Postprocessing component is removed from the scene, or when the composer is rebuilt, all existing passes are disposed and the composer is torn down.

API reference

• Class: Postprocessing
• Source: core/systems/PostprocessingSyncSystem.ts