angular-three-postprocessing

angular-three-postprocessing

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.

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.

Object Inputs (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

<ngtp-effect-composer [options]="{ multisampling: 0, frameBufferType: FloatType, enableNormalPass: true }">
	<ngtp-bloom />
</ngtp-effect-composer>
```

NgtpEffectComposerApi

This is an interface that provides access to the underlying NgtpEffectComposer instance, as well as the camera and scene being used. It also includes references to the NormalPass and DepthDownsamplingPass if they are enabled

export interface NgtpEffectComposerApi {
	composer: EffectComposer;
	camera: Camera;
	scene: Scene;
	normalPass: NormalPass | null;
	downSamplingPass: DepthDownsamplingPass | null;
	resolutionScale?: number;
}

To retrieve the NgtpEffectComposerApi for components within <ngtp-effect-composer />, you can use the injectEffectComposerApi function.

Effects

TBD