angular-three-postprocessing

January 1, 2026 · View on GitHub

This is the main entry point for post-processing effects in Angular Three. It provides a way to apply various visual effects to your 3D scene after it has been rendered. This library relies on maath, three-stdlib, and postprocessing as dependencies.

Documentation

All public APIs are documented with JSDoc comments. Your IDE will provide inline documentation, parameter hints, and examples as you code.

Installation

npm install angular-three-postprocessing three-stdlib maath postprocessing
# yarn add angular-three-postprocessing three-stdlib maath postprocessing
# pnpm add angular-three-postprocessing three-stdlib maath postprocessing

NgtpEffectComposer

This is a wrapper component that manages and applies post-processing effects to your scene. It takes content children of effects and applies them in the order they are provided.

Usage

<ngtp-effect-composer [options]="{ multisampling: 0 }">
	<ngtp-bloom [options]="{ luminanceThreshold: 0.9, intensity: 0.5 }" />
	<ngtp-vignette [options]="{ darkness: 0.5 }" />
</ngtp-effect-composer>

Options (NgtpEffectComposerOptions)

Property	Description	Default Value
`enabled`	Whether the effect composer is enabled.	true
`depthBuffer`	Whether to use a depth buffer.	undefined
`enableNormalPass`	Whether to enable the normal pass. This is only used for SSGI currently.	undefined
`stencilBuffer`	Whether to use a stencil buffer.	undefined
`autoClear`	Whether to automatically clear the output buffer before rendering.	true
`resolutionScale`	A scaling factor for the resolution of the effect composer.	undefined
`multisampling`	The number of samples to use for multisample anti-aliasing (MSAA). Set to 0 to disable MSAA.	8
`frameBufferType`	The data type to use for the frame buffer.	HalfFloatType
`renderPriority`	The render priority of the effect composer.	1
`camera`	The camera to use for rendering. If not provided, the default camera from the store will be used.	undefined
`scene`	The scene to render. If not provided, the default scene from the store will be used.	undefined

Effects

All effects are available from angular-three-postprocessing:

Effect	Selector	Description
`NgtpAscii`	`ngtp-ascii`	ASCII art effect
`NgtpBloom`	`ngtp-bloom`	Bloom/glow effect
`NgtpBrightnessContrast`	`ngtp-brightness-contrast`	Brightness and contrast adjustment
`NgtpChromaticAberration`	`ngtp-chromatic-aberration`	Chromatic aberration effect
`NgtpColorAverage`	`ngtp-color-average`	Color averaging effect
`NgtpColorDepth`	`ngtp-color-depth`	Color depth reduction
`NgtpDepth`	`ngtp-depth`	Depth visualization
`NgtpDepthOfField`	`ngtp-depth-of-field`	Depth of field effect
`NgtpDotScreen`	`ngtp-dot-screen`	Dot screen effect
`NgtpFXAA`	`ngtp-fxaa`	Fast approximate anti-aliasing
`NgtpGlitch`	`ngtp-glitch`	Glitch effect
`NgtpGodRays`	`ngtp-god-rays`	God rays/light shafts
`NgtpGrid`	`ngtp-grid`	Grid overlay
`NgtpHueSaturation`	`ngtp-hue-saturation`	Hue and saturation adjustment
`NgtpLensFlare`	`ngtp-lens-flare`	Lens flare effect
`NgtpLUT`	`ngtp-lut`	LUT (Look-Up Table) color grading
`NgtpNoise`	`ngtp-noise`	Noise effect
`NgtpOutline`	`ngtp-outline`	Outline effect
`NgtpPixelation`	`ngtp-pixelation`	Pixelation effect
`NgtpScanline`	`ngtp-scanline`	Scanline effect
`NgtpSelectiveBloom`	`ngtp-selective-bloom`	Selective bloom on specific objects
`NgtpSepia`	`ngtp-sepia`	Sepia tone effect
`NgtpShockWave`	`ngtp-shock-wave`	Shock wave distortion
`NgtpSMAA`	`ngtp-smaa`	Subpixel morphological anti-aliasing
`NgtpTiltShift`	`ngtp-tilt-shift`	Tilt-shift blur
`NgtpTiltShift2`	`ngtp-tilt-shift-2`	Alternative tilt-shift implementation
`NgtpToneMapping`	`ngtp-tone-mapping`	Tone mapping
`NgtpVignette`	`ngtp-vignette`	Vignette darkening
`NgtpWater`	`ngtp-water`	Water effect

Effect Example

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NgtpEffectComposer, NgtpBloom, NgtpVignette, NgtpNoise } from 'angular-three-postprocessing';

@Component({
	template: `
		<ngtp-effect-composer>
			<ngtp-bloom [options]="{ luminanceThreshold: 0.9, luminanceSmoothing: 0.025, intensity: 0.5 }" />
			<ngtp-noise [options]="{ opacity: 0.02 }" />
			<ngtp-vignette [options]="{ eskil: false, offset: 0.1, darkness: 1.1 }" />
		</ngtp-effect-composer>
	`,
	imports: [NgtpEffectComposer, NgtpBloom, NgtpVignette, NgtpNoise],
	schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class PostProcessing {}

N8AO (Ambient Occlusion)

A separate sub-library provides N8 Ambient Occlusion:

npm install n8ao

import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';

<ngtp-effect-composer [options]="{ enableNormalPass: true }">
	<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: 1 }" />
</ngtp-effect-composer>