angular-three-postprocessing 4.0.0-next.119 → 4.0.0-next.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -18,7 +18,16 @@ npm install angular-three-postprocessing three-stdlib maath postprocessing
|
|
|
18
18
|
|
|
19
19
|
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.
|
|
20
20
|
|
|
21
|
-
###
|
|
21
|
+
### Usage
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<ngtp-effect-composer [options]="{ multisampling: 0 }">
|
|
25
|
+
<ngtp-bloom [options]="{ luminanceThreshold: 0.9, intensity: 0.5 }" />
|
|
26
|
+
<ngtp-vignette [options]="{ darkness: 0.5 }" />
|
|
27
|
+
</ngtp-effect-composer>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Options (NgtpEffectComposerOptions)
|
|
22
31
|
|
|
23
32
|
| Property | Description | Default Value |
|
|
24
33
|
| ------------------ | ------------------------------------------------------------------------------------------------- | ------------- |
|
|
@@ -34,30 +43,76 @@ This is a wrapper component that manages and applies post-processing effects to
|
|
|
34
43
|
| `camera` | The camera to use for rendering. If not provided, the default camera from the store will be used. | undefined |
|
|
35
44
|
| `scene` | The scene to render. If not provided, the default scene from the store will be used. | undefined |
|
|
36
45
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
46
|
+
## Effects
|
|
47
|
+
|
|
48
|
+
All effects are available from `angular-three-postprocessing`:
|
|
49
|
+
|
|
50
|
+
| Effect | Selector | Description |
|
|
51
|
+
| ------------------------- | --------------------------- | ------------------------------------- |
|
|
52
|
+
| `NgtpAscii` | `ngtp-ascii` | ASCII art effect |
|
|
53
|
+
| `NgtpBloom` | `ngtp-bloom` | Bloom/glow effect |
|
|
54
|
+
| `NgtpBrightnessContrast` | `ngtp-brightness-contrast` | Brightness and contrast adjustment |
|
|
55
|
+
| `NgtpChromaticAberration` | `ngtp-chromatic-aberration` | Chromatic aberration effect |
|
|
56
|
+
| `NgtpColorAverage` | `ngtp-color-average` | Color averaging effect |
|
|
57
|
+
| `NgtpColorDepth` | `ngtp-color-depth` | Color depth reduction |
|
|
58
|
+
| `NgtpDepth` | `ngtp-depth` | Depth visualization |
|
|
59
|
+
| `NgtpDepthOfField` | `ngtp-depth-of-field` | Depth of field effect |
|
|
60
|
+
| `NgtpDotScreen` | `ngtp-dot-screen` | Dot screen effect |
|
|
61
|
+
| `NgtpFXAA` | `ngtp-fxaa` | Fast approximate anti-aliasing |
|
|
62
|
+
| `NgtpGlitch` | `ngtp-glitch` | Glitch effect |
|
|
63
|
+
| `NgtpGodRays` | `ngtp-god-rays` | God rays/light shafts |
|
|
64
|
+
| `NgtpGrid` | `ngtp-grid` | Grid overlay |
|
|
65
|
+
| `NgtpHueSaturation` | `ngtp-hue-saturation` | Hue and saturation adjustment |
|
|
66
|
+
| `NgtpLensFlare` | `ngtp-lens-flare` | Lens flare effect |
|
|
67
|
+
| `NgtpLUT` | `ngtp-lut` | LUT (Look-Up Table) color grading |
|
|
68
|
+
| `NgtpNoise` | `ngtp-noise` | Noise effect |
|
|
69
|
+
| `NgtpOutline` | `ngtp-outline` | Outline effect |
|
|
70
|
+
| `NgtpPixelation` | `ngtp-pixelation` | Pixelation effect |
|
|
71
|
+
| `NgtpScanline` | `ngtp-scanline` | Scanline effect |
|
|
72
|
+
| `NgtpSelectiveBloom` | `ngtp-selective-bloom` | Selective bloom on specific objects |
|
|
73
|
+
| `NgtpSepia` | `ngtp-sepia` | Sepia tone effect |
|
|
74
|
+
| `NgtpShockWave` | `ngtp-shock-wave` | Shock wave distortion |
|
|
75
|
+
| `NgtpSMAA` | `ngtp-smaa` | Subpixel morphological anti-aliasing |
|
|
76
|
+
| `NgtpTiltShift` | `ngtp-tilt-shift` | Tilt-shift blur |
|
|
77
|
+
| `NgtpTiltShift2` | `ngtp-tilt-shift-2` | Alternative tilt-shift implementation |
|
|
78
|
+
| `NgtpToneMapping` | `ngtp-tone-mapping` | Tone mapping |
|
|
79
|
+
| `NgtpVignette` | `ngtp-vignette` | Vignette darkening |
|
|
80
|
+
| `NgtpWater` | `ngtp-water` | Water effect |
|
|
81
|
+
|
|
82
|
+
### Effect Example
|
|
83
|
+
|
|
84
|
+
```typescript
|
|
85
|
+
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
86
|
+
import { NgtpEffectComposer, NgtpBloom, NgtpVignette, NgtpNoise } from 'angular-three-postprocessing';
|
|
87
|
+
|
|
88
|
+
@Component({
|
|
89
|
+
template: `
|
|
90
|
+
<ngtp-effect-composer>
|
|
91
|
+
<ngtp-bloom [options]="{ luminanceThreshold: 0.9, luminanceSmoothing: 0.025, intensity: 0.5 }" />
|
|
92
|
+
<ngtp-noise [options]="{ opacity: 0.02 }" />
|
|
93
|
+
<ngtp-vignette [options]="{ eskil: false, offset: 0.1, darkness: 1.1 }" />
|
|
94
|
+
</ngtp-effect-composer>
|
|
95
|
+
`,
|
|
96
|
+
imports: [NgtpEffectComposer, NgtpBloom, NgtpVignette, NgtpNoise],
|
|
97
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
98
|
+
})
|
|
99
|
+
export class PostProcessing {}
|
|
41
100
|
```
|
|
42
|
-
````
|
|
43
101
|
|
|
44
|
-
|
|
102
|
+
## N8AO (Ambient Occlusion)
|
|
45
103
|
|
|
46
|
-
|
|
104
|
+
A separate sub-library provides N8 Ambient Occlusion:
|
|
47
105
|
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
composer: EffectComposer;
|
|
51
|
-
camera: Camera;
|
|
52
|
-
scene: Scene;
|
|
53
|
-
normalPass: NormalPass | null;
|
|
54
|
-
downSamplingPass: DepthDownsamplingPass | null;
|
|
55
|
-
resolutionScale?: number;
|
|
56
|
-
}
|
|
106
|
+
```bash
|
|
107
|
+
npm install n8ao
|
|
57
108
|
```
|
|
58
109
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
110
|
+
```typescript
|
|
111
|
+
import { NgtpN8AO } from 'angular-three-postprocessing/n8ao';
|
|
112
|
+
```
|
|
62
113
|
|
|
63
|
-
|
|
114
|
+
```html
|
|
115
|
+
<ngtp-effect-composer [options]="{ enableNormalPass: true }">
|
|
116
|
+
<ngtp-n8ao [options]="{ aoRadius: 0.5, intensity: 1 }" />
|
|
117
|
+
</ngtp-effect-composer>
|
|
118
|
+
```
|