Skip to content

Latest commit

 

History

History
118 lines (96 loc) · 7 KB

README.md

File metadata and controls

118 lines (96 loc) · 7 KB

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.

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>