EffectComposer

The EffectComposer is a crucial component in Angular Three’s postprocessing pipeline. It allows you to combine multiple postprocessing effects and apply them to your 3D scene. The EffectComposer manages the rendering process, applying effects in the order they are defined.

Usage

To use the EffectComposer, wrap your effects inside the <ngtp-effect-composer> component:

1
<ngtp-effect-composer>
2
  <!-- Add your effects here -->
3
  <ngtp-bloom [options]="bloomOptions" />
4
  <ngtp-vignette [options]="vignetteOptions" />
5
</ngtp-effect-composer>

Options

The EffectComposer accepts the following options:

Option	Type	Default	Description
enabled	boolean	true	Enables or disables the EffectComposer
depthBuffer	boolean	undefined	Enables depth buffer
stencilBuffer	boolean	undefined	Enables stencil buffer
autoClear	boolean	true	Automatically clears the render target
resolutionScale	number	undefined	Scales the render resolution
multisampling	number	8	Sets the number of samples for multisampling anti-aliasing
frameBufferType	TextureDataType	HalfFloatType	Sets the frame buffer type
renderPriority	number	1	Sets the render priority
camera	Camera	undefined	Custom camera for rendering
scene	Scene	undefined	Custom scene for rendering

Examples

Basic usage with Bloom and Vignette effects:

1
<ngtp-effect-composer>
2
  <ngtp-bloom [options]="{ luminanceThreshold: 0.6, luminanceSmoothing: 0.5, intensity: 1.2 }" />
3
  <ngtp-vignette [options]="{ offset: 0.5, darkness: 0.5 }" />
4
</ngtp-effect-composer>

Using EffectComposer with custom options:

1
<ngtp-effect-composer [options]="{ autoClear: false, multisampling: 0 }">
2
  <ngtp-outline [options]="{ edgeStrength: 2.5, pulseSpeed: 0, blur: true, kernelSize: KernelSize.SMALL }" />
3
  <ngtp-smaa />
4
</ngtp-effect-composer>

Combining EffectComposer with other scene elements:

1
<ngt-color attach="background" *args="['black']" />
2

3
<ngts-orbit-controls />
4

5
<ngt-ambient-light />
6
<ngt-point-light [position]="[0, -1, -1]" [decay]="0" color="green" />
7
<ngt-directional-light [position]="[0, 1, 1]" />
8

9
<!-- Your 3D objects here -->
10

11
<ngtp-effect-composer>
12
  <ngtp-outline [options]="outlineOptions" />
13
  <ngtp-smaa />
14
</ngtp-effect-composer>