angular-three-postprocessing 2.2.0 → 2.3.0
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/esm2022/lib/effect-composer.mjs +31 -41
- package/esm2022/lib/effect.mjs +6 -6
- package/esm2022/lib/effects/ascii.mjs +3 -3
- package/esm2022/lib/effects/bloom.mjs +3 -3
- package/esm2022/lib/effects/brightness-contrast.mjs +3 -3
- package/esm2022/lib/effects/chromatic-abberation.mjs +3 -3
- package/esm2022/lib/effects/color-average.mjs +3 -3
- package/esm2022/lib/effects/color-depth.mjs +3 -3
- package/esm2022/lib/effects/depth-of-field.mjs +9 -15
- package/esm2022/lib/effects/depth.mjs +3 -3
- package/esm2022/lib/effects/dot-screen.mjs +3 -3
- package/esm2022/lib/effects/fxaa.mjs +3 -3
- package/esm2022/lib/effects/glitch.mjs +15 -19
- package/esm2022/lib/effects/god-rays.mjs +9 -13
- package/esm2022/lib/effects/grid.mjs +10 -14
- package/esm2022/lib/effects/hue-saturation.mjs +3 -3
- package/esm2022/lib/effects/index.mjs +2 -1
- package/esm2022/lib/effects/lens-flare.mjs +13 -17
- package/esm2022/lib/effects/lut.mjs +18 -22
- package/esm2022/lib/effects/noise.mjs +3 -3
- package/esm2022/lib/effects/outline.mjs +33 -30
- package/esm2022/lib/effects/pixelation.mjs +3 -3
- package/esm2022/lib/effects/scanline.mjs +3 -3
- package/esm2022/lib/effects/sepia.mjs +3 -3
- package/esm2022/lib/effects/shock-wave.mjs +3 -3
- package/esm2022/lib/effects/smaa.mjs +3 -3
- package/esm2022/lib/effects/tilt-shift-2.mjs +3 -3
- package/esm2022/lib/effects/tilt-shift.mjs +3 -3
- package/esm2022/lib/effects/tone-mapping.mjs +81 -0
- package/esm2022/lib/effects/vignette.mjs +3 -3
- package/esm2022/lib/effects/water.mjs +3 -3
- package/esm2022/n8ao/angular-three-postprocessing-n8ao.mjs +5 -0
- package/esm2022/n8ao/index.mjs +2 -0
- package/esm2022/n8ao/lib/n8ao.mjs +78 -0
- package/fesm2022/angular-three-postprocessing-n8ao.mjs +85 -0
- package/fesm2022/angular-three-postprocessing-n8ao.mjs.map +1 -0
- package/fesm2022/angular-three-postprocessing.mjs +269 -218
- package/fesm2022/angular-three-postprocessing.mjs.map +1 -1
- package/lib/effect-composer.d.ts +0 -4
- package/lib/effects/depth-of-field.d.ts +1 -2
- package/lib/effects/glitch.d.ts +2 -3
- package/lib/effects/god-rays.d.ts +1 -2
- package/lib/effects/grid.d.ts +0 -1
- package/lib/effects/index.d.ts +1 -0
- package/lib/effects/lens-flare.d.ts +5 -7
- package/lib/effects/lut.d.ts +2 -3
- package/lib/effects/tone-mapping.d.ts +43 -0
- package/n8ao/README.md +3 -0
- package/n8ao/index.d.ts +1 -0
- package/n8ao/lib/n8ao.d.ts +35 -0
- package/package.json +13 -1
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, afterNextRender, untracked } from '@angular/core';
|
|
3
|
-
import { injectStore, pick, extend,
|
|
2
|
+
import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, effect, afterNextRender, untracked } from '@angular/core';
|
|
3
|
+
import { injectStore, pick, extend, getLocalState, injectBeforeRender, NgtArgs, vector2, is, NgtSelection, omit, resolveRef } from 'angular-three';
|
|
4
4
|
import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
|
|
5
|
-
import { injectAutoEffect } from 'ngxtension/auto-effect';
|
|
6
5
|
import { mergeInputs } from 'ngxtension/inject-inputs';
|
|
7
|
-
import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, VignetteEffect } from 'postprocessing';
|
|
6
|
+
import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
|
|
8
7
|
import { HalfFloatType, Group, NoToneMapping, Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter, Vector3, Vector2, Mesh } from 'three';
|
|
9
8
|
import { isWebGL2Available } from 'three-stdlib';
|
|
10
9
|
import { easing } from 'maath';
|
|
@@ -14,15 +13,15 @@ class NgtpEffectBlendMode {
|
|
|
14
13
|
constructor() {
|
|
15
14
|
this.effect = inject(NgtpEffect, { optional: true });
|
|
16
15
|
}
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
16
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
|
|
19
18
|
@if (effect) {
|
|
20
19
|
<ngt-value [rawValue]="effect.blendFunction()" attach="blendMode.blendFunction" />
|
|
21
20
|
<ngt-value [rawValue]="effect.opacity()" attach="blendMode.opacity.value" />
|
|
22
21
|
}
|
|
23
22
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
23
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
24
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
|
|
26
25
|
type: Component,
|
|
27
26
|
args: [{
|
|
28
27
|
selector: 'ngtp-effect-blend-mode',
|
|
@@ -46,10 +45,10 @@ class NgtpEffect {
|
|
|
46
45
|
this.camera = this.store.select('camera');
|
|
47
46
|
this.invalidate = this.store.select('invalidate');
|
|
48
47
|
}
|
|
49
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
50
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.
|
|
48
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
49
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
51
50
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffect, decorators: [{
|
|
53
52
|
type: Directive,
|
|
54
53
|
args: [{ standalone: true }]
|
|
55
54
|
}] });
|
|
@@ -69,7 +68,6 @@ class NgtpEffectComposer {
|
|
|
69
68
|
constructor() {
|
|
70
69
|
this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
|
|
71
70
|
this.injector = inject(Injector);
|
|
72
|
-
this.autoEffect = injectAutoEffect();
|
|
73
71
|
this.store = injectStore();
|
|
74
72
|
this.size = this.store.select('size');
|
|
75
73
|
this.gl = this.store.select('gl');
|
|
@@ -122,48 +120,22 @@ class NgtpEffectComposer {
|
|
|
122
120
|
return { composer, normalPass, downSamplingPass };
|
|
123
121
|
});
|
|
124
122
|
extend({ Group });
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
this.setComposerSize();
|
|
128
|
-
this.updatePasses();
|
|
129
|
-
injectBeforeRender(({ delta }) => {
|
|
130
|
-
const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
|
|
131
|
-
this.composerData(),
|
|
132
|
-
this.options(),
|
|
133
|
-
this.gl(),
|
|
134
|
-
];
|
|
135
|
-
if (enabled) {
|
|
136
|
-
const currentAutoClear = gl.autoClear;
|
|
137
|
-
gl.autoClear = autoClear;
|
|
138
|
-
if (stencilBuffer && !autoClear)
|
|
139
|
-
gl.clearStencil();
|
|
140
|
-
composer.render(delta);
|
|
141
|
-
gl.autoClear = currentAutoClear;
|
|
142
|
-
}
|
|
143
|
-
}, { injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 });
|
|
144
|
-
});
|
|
145
|
-
}
|
|
146
|
-
// NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
|
|
147
|
-
disableToneMapping() {
|
|
148
|
-
this.autoEffect(() => {
|
|
123
|
+
// NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
|
|
124
|
+
effect((onCleanup) => {
|
|
149
125
|
const gl = this.gl();
|
|
150
126
|
const currentTonemapping = gl.toneMapping;
|
|
151
127
|
gl.toneMapping = NoToneMapping;
|
|
152
|
-
|
|
128
|
+
onCleanup(() => {
|
|
153
129
|
gl.toneMapping = currentTonemapping;
|
|
154
|
-
};
|
|
130
|
+
});
|
|
155
131
|
});
|
|
156
|
-
|
|
157
|
-
setComposerSize() {
|
|
158
|
-
this.autoEffect(() => {
|
|
132
|
+
effect(() => {
|
|
159
133
|
const [{ composer }, { width, height }] = [this.composerData(), this.size()];
|
|
160
134
|
if (composer) {
|
|
161
135
|
composer.setSize(width, height);
|
|
162
136
|
}
|
|
163
137
|
});
|
|
164
|
-
|
|
165
|
-
updatePasses() {
|
|
166
|
-
this.autoEffect(() => {
|
|
138
|
+
effect((onCleanup) => {
|
|
167
139
|
const [group, { composer, normalPass, downSamplingPass }, camera] = [
|
|
168
140
|
this.groupRef(),
|
|
169
141
|
this.composerData(),
|
|
@@ -203,24 +175,42 @@ class NgtpEffectComposer {
|
|
|
203
175
|
if (downSamplingPass)
|
|
204
176
|
downSamplingPass.enabled = true;
|
|
205
177
|
}
|
|
206
|
-
|
|
178
|
+
onCleanup(() => {
|
|
207
179
|
for (const pass of passes)
|
|
208
180
|
composer?.removePass(pass);
|
|
209
181
|
if (normalPass)
|
|
210
182
|
normalPass.enabled = false;
|
|
211
183
|
if (downSamplingPass)
|
|
212
184
|
downSamplingPass.enabled = false;
|
|
213
|
-
};
|
|
185
|
+
});
|
|
186
|
+
});
|
|
187
|
+
// NOTE: register beforeRender afterNextRender to ensure input is ready
|
|
188
|
+
afterNextRender(() => {
|
|
189
|
+
injectBeforeRender(({ delta }) => {
|
|
190
|
+
const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
|
|
191
|
+
this.composerData(),
|
|
192
|
+
this.options(),
|
|
193
|
+
this.gl(),
|
|
194
|
+
];
|
|
195
|
+
if (enabled) {
|
|
196
|
+
const currentAutoClear = gl.autoClear;
|
|
197
|
+
gl.autoClear = autoClear;
|
|
198
|
+
if (stencilBuffer && !autoClear)
|
|
199
|
+
gl.clearStencil();
|
|
200
|
+
composer.render(delta);
|
|
201
|
+
gl.autoClear = currentAutoClear;
|
|
202
|
+
}
|
|
203
|
+
}, { injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 });
|
|
214
204
|
});
|
|
215
205
|
}
|
|
216
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
217
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.
|
|
206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
207
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
218
208
|
<ngt-group #group>
|
|
219
209
|
<ng-content />
|
|
220
210
|
</ngt-group>
|
|
221
211
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
222
212
|
}
|
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpEffectComposer, decorators: [{
|
|
224
214
|
type: Component,
|
|
225
215
|
args: [{
|
|
226
216
|
selector: 'ngtp-effect-composer',
|
|
@@ -330,12 +320,12 @@ class NgtpASCII {
|
|
|
330
320
|
this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
|
|
331
321
|
this.effect = computed(() => new ASCIIEffect(this.options()));
|
|
332
322
|
}
|
|
333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
323
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
324
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
335
325
|
<ngt-primitive *args="[effect()]" />
|
|
336
326
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
337
327
|
}
|
|
338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpASCII, decorators: [{
|
|
339
329
|
type: Component,
|
|
340
330
|
args: [{
|
|
341
331
|
selector: 'ngtp-ascii',
|
|
@@ -355,15 +345,15 @@ class NgtpBloom {
|
|
|
355
345
|
this.effect = inject(NgtpEffect, { host: true });
|
|
356
346
|
this.options = input({});
|
|
357
347
|
}
|
|
358
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
359
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
360
350
|
<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
|
|
361
351
|
<ngtp-effect-blend-mode />
|
|
362
352
|
<ng-content />
|
|
363
353
|
</ngt-bloom-effect>
|
|
364
354
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
365
355
|
}
|
|
366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBloom, decorators: [{
|
|
367
357
|
type: Component,
|
|
368
358
|
args: [{
|
|
369
359
|
selector: 'ngtp-bloom',
|
|
@@ -388,15 +378,15 @@ class NgtpBrightnessContrast {
|
|
|
388
378
|
this.effect = inject(NgtpEffect, { host: true });
|
|
389
379
|
this.options = input({});
|
|
390
380
|
}
|
|
391
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
392
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
381
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
382
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
393
383
|
<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
|
|
394
384
|
<ngtp-effect-blend-mode />
|
|
395
385
|
<ng-content />
|
|
396
386
|
</ngt-brightness-contrast-effect>
|
|
397
387
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
398
388
|
}
|
|
399
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
|
|
400
390
|
type: Component,
|
|
401
391
|
args: [{
|
|
402
392
|
selector: 'ngtp-brightness-contrast',
|
|
@@ -420,15 +410,15 @@ class NgtpChromaticAberration {
|
|
|
420
410
|
this.effect = inject(NgtpEffect, { host: true });
|
|
421
411
|
this.options = input({});
|
|
422
412
|
}
|
|
423
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
413
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
425
415
|
<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
|
|
426
416
|
<ngtp-effect-blend-mode />
|
|
427
417
|
<ng-content />
|
|
428
418
|
</ngt-chromatic-aberration-effect>
|
|
429
419
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
430
420
|
}
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
|
|
432
422
|
type: Component,
|
|
433
423
|
args: [{
|
|
434
424
|
selector: 'ngtp-chromatic-aberration',
|
|
@@ -451,14 +441,14 @@ class NgtpColorAverage {
|
|
|
451
441
|
constructor() {
|
|
452
442
|
this.options = input({ blendFunction: BlendFunction.NORMAL }, { transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
|
|
453
443
|
}
|
|
454
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
455
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
444
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
445
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
456
446
|
<ngt-color-average-effect *args="[options().blendFunction]">
|
|
457
447
|
<ng-content />
|
|
458
448
|
</ngt-color-average-effect>
|
|
459
449
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
460
450
|
}
|
|
461
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorAverage, decorators: [{
|
|
462
452
|
type: Component,
|
|
463
453
|
args: [{
|
|
464
454
|
selector: 'ngtp-color-average',
|
|
@@ -480,15 +470,15 @@ class NgtpColorDepth {
|
|
|
480
470
|
this.effect = inject(NgtpEffect, { host: true });
|
|
481
471
|
this.options = input({});
|
|
482
472
|
}
|
|
483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
485
475
|
<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
|
|
486
476
|
<ngtp-effect-blend-mode />
|
|
487
477
|
<ng-content />
|
|
488
478
|
</ngt-color-depth-effect>
|
|
489
479
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
490
480
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpColorDepth, decorators: [{
|
|
492
482
|
type: Component,
|
|
493
483
|
args: [{
|
|
494
484
|
selector: 'ngtp-color-depth',
|
|
@@ -512,15 +502,15 @@ class NgtpDepth {
|
|
|
512
502
|
this.effect = inject(NgtpEffect, { host: true });
|
|
513
503
|
this.options = input({});
|
|
514
504
|
}
|
|
515
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
516
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
505
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
506
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
517
507
|
<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
|
|
518
508
|
<ngtp-effect-blend-mode />
|
|
519
509
|
<ng-content />
|
|
520
510
|
</ngt-depth-effect>
|
|
521
511
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
522
512
|
}
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepth, decorators: [{
|
|
524
514
|
type: Component,
|
|
525
515
|
args: [{
|
|
526
516
|
selector: 'ngtp-depth',
|
|
@@ -540,10 +530,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
540
530
|
|
|
541
531
|
class NgtpDepthOfField {
|
|
542
532
|
constructor() {
|
|
543
|
-
this.autoEffect = injectAutoEffect();
|
|
544
|
-
this.effectComposer = inject(NgtpEffectComposer);
|
|
545
533
|
this.options = input({});
|
|
546
534
|
this.autoFocus = computed(() => this.options().target != null);
|
|
535
|
+
this.effectComposer = inject(NgtpEffectComposer);
|
|
547
536
|
this.effect = computed(() => {
|
|
548
537
|
const [camera, options, autoFocus] = [this.effectComposer.camera(), this.options(), this.autoFocus()];
|
|
549
538
|
const effect = new DepthOfFieldEffect(camera, options);
|
|
@@ -559,21 +548,17 @@ class NgtpDepthOfField {
|
|
|
559
548
|
maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
|
|
560
549
|
return effect;
|
|
561
550
|
});
|
|
562
|
-
|
|
563
|
-
this.
|
|
564
|
-
|
|
565
|
-
return () => {
|
|
566
|
-
effect.dispose();
|
|
567
|
-
};
|
|
568
|
-
});
|
|
551
|
+
effect((onCleanup) => {
|
|
552
|
+
const depthOfFieldEffect = this.effect();
|
|
553
|
+
onCleanup(() => depthOfFieldEffect.dispose());
|
|
569
554
|
});
|
|
570
555
|
}
|
|
571
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
572
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
556
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
557
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
573
558
|
<ngt-primitive *args="[effect()]" />
|
|
574
559
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
575
560
|
}
|
|
576
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDepthOfField, decorators: [{
|
|
577
562
|
type: Component,
|
|
578
563
|
args: [{
|
|
579
564
|
selector: 'ngtp-depth-of-field',
|
|
@@ -593,15 +578,15 @@ class NgtpDotScreen {
|
|
|
593
578
|
this.effect = inject(NgtpEffect, { host: true });
|
|
594
579
|
this.options = input({});
|
|
595
580
|
}
|
|
596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
582
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
598
583
|
<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
|
|
599
584
|
<ngtp-effect-blend-mode />
|
|
600
585
|
<ng-content />
|
|
601
586
|
</ngt-dot-screen-effect>
|
|
602
587
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
603
588
|
}
|
|
604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
589
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpDotScreen, decorators: [{
|
|
605
590
|
type: Component,
|
|
606
591
|
args: [{
|
|
607
592
|
selector: 'ngtp-dot-screen',
|
|
@@ -625,15 +610,15 @@ class NgtpFXAA {
|
|
|
625
610
|
this.effect = inject(NgtpEffect, { host: true });
|
|
626
611
|
this.options = input({});
|
|
627
612
|
}
|
|
628
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
613
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
614
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
630
615
|
<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
|
|
631
616
|
<ngtp-effect-blend-mode />
|
|
632
617
|
<ng-content />
|
|
633
618
|
</ngt-fXAA-effect>
|
|
634
619
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
635
620
|
}
|
|
636
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpFXAA, decorators: [{
|
|
637
622
|
type: Component,
|
|
638
623
|
args: [{
|
|
639
624
|
selector: 'ngtp-fxaa',
|
|
@@ -653,9 +638,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
653
638
|
|
|
654
639
|
class NgtpGlitch {
|
|
655
640
|
constructor() {
|
|
656
|
-
this.autoEffect = injectAutoEffect();
|
|
657
|
-
this.store = injectStore();
|
|
658
|
-
this.invalidate = this.store.select('invalidate');
|
|
659
641
|
this.options = input({ active: true }, { transform: mergeInputs({ active: true }) });
|
|
660
642
|
this.active = pick(this.options, 'active');
|
|
661
643
|
this.mode = pick(this.options, 'mode');
|
|
@@ -663,6 +645,8 @@ class NgtpGlitch {
|
|
|
663
645
|
this.duration = vector2(this.options, 'duration');
|
|
664
646
|
this.chromaticAberrationOffset = vector2(this.options, 'chromaticAberrationOffset');
|
|
665
647
|
this.strength = vector2(this.options, 'strength');
|
|
648
|
+
this.store = injectStore();
|
|
649
|
+
this.invalidate = this.store.select('invalidate');
|
|
666
650
|
this.effect = computed(() => {
|
|
667
651
|
const [{ ratio, dtSize, columns, blendFunction, perturbationMap }, delay, duration, chromaticAberrationOffset, strength,] = [this.options(), this.delay(), this.duration(), this.chromaticAberrationOffset(), this.strength()];
|
|
668
652
|
return new GlitchEffect({
|
|
@@ -677,24 +661,22 @@ class NgtpGlitch {
|
|
|
677
661
|
strength,
|
|
678
662
|
});
|
|
679
663
|
});
|
|
680
|
-
|
|
681
|
-
this.
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
this.
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
invalidate();
|
|
689
|
-
});
|
|
664
|
+
effect((onCleanup) => {
|
|
665
|
+
const effect = this.effect();
|
|
666
|
+
onCleanup(() => effect.dispose());
|
|
667
|
+
});
|
|
668
|
+
effect(() => {
|
|
669
|
+
const [glitchEffect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
|
|
670
|
+
glitchEffect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
|
|
671
|
+
invalidate();
|
|
690
672
|
});
|
|
691
673
|
}
|
|
692
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
693
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
674
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
675
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
694
676
|
<ngt-primitive *args="[effect()]" />
|
|
695
677
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
696
678
|
}
|
|
697
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGlitch, decorators: [{
|
|
698
680
|
type: Component,
|
|
699
681
|
args: [{
|
|
700
682
|
selector: 'ngtp-glitch',
|
|
@@ -710,26 +692,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
710
692
|
|
|
711
693
|
class NgtpGodRays {
|
|
712
694
|
constructor() {
|
|
713
|
-
this.autoEffect = injectAutoEffect();
|
|
714
|
-
this.effectComposer = inject(NgtpEffectComposer);
|
|
715
695
|
this.options = input({});
|
|
696
|
+
this.effectComposer = inject(NgtpEffectComposer);
|
|
716
697
|
this.effect = computed(() => {
|
|
717
698
|
const [camera, { sun, ...options }] = [this.effectComposer.camera(), this.options()];
|
|
718
699
|
return new GodRaysEffect(camera, is.ref(sun) ? sun.nativeElement : sun, options);
|
|
719
700
|
});
|
|
720
|
-
|
|
721
|
-
this.
|
|
722
|
-
|
|
723
|
-
effect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
|
|
724
|
-
});
|
|
701
|
+
effect(() => {
|
|
702
|
+
const [sun, godRaysEffect] = [this.options().sun, this.effect()];
|
|
703
|
+
godRaysEffect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
|
|
725
704
|
});
|
|
726
705
|
}
|
|
727
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
728
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
706
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
707
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
729
708
|
<ngt-primitive *args="[effect()]" />
|
|
730
709
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
731
710
|
}
|
|
732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGodRays, decorators: [{
|
|
733
712
|
type: Component,
|
|
734
713
|
args: [{
|
|
735
714
|
selector: 'ngtp-god-rays',
|
|
@@ -745,28 +724,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
745
724
|
|
|
746
725
|
class NgtpGrid {
|
|
747
726
|
constructor() {
|
|
748
|
-
this.autoEffect = injectAutoEffect();
|
|
749
727
|
this.options = input({});
|
|
750
728
|
this.size = pick(this.options, 'size');
|
|
751
729
|
this.effect = computed(() => {
|
|
752
730
|
const { size: _, ...options } = this.options();
|
|
753
731
|
return new GridEffect(options);
|
|
754
732
|
});
|
|
755
|
-
|
|
756
|
-
this.
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
}
|
|
761
|
-
});
|
|
733
|
+
effect(() => {
|
|
734
|
+
const [size, effect] = [this.size(), this.effect()];
|
|
735
|
+
if (size) {
|
|
736
|
+
effect.setSize(size.width, size.height);
|
|
737
|
+
}
|
|
762
738
|
});
|
|
763
739
|
}
|
|
764
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
765
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
740
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
741
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
766
742
|
<ngt-primitive *args="[effect()]" />
|
|
767
743
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
768
744
|
}
|
|
769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpGrid, decorators: [{
|
|
770
746
|
type: Component,
|
|
771
747
|
args: [{
|
|
772
748
|
selector: 'ngtp-grid',
|
|
@@ -786,15 +762,15 @@ class NgtpHueSaturation {
|
|
|
786
762
|
this.effect = inject(NgtpEffect, { host: true });
|
|
787
763
|
this.options = input({});
|
|
788
764
|
}
|
|
789
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
790
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
765
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
766
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
791
767
|
<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
|
|
792
768
|
<ngtp-effect-blend-mode />
|
|
793
769
|
<ng-content />
|
|
794
770
|
</ngt-hue-saturation-effect>
|
|
795
771
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
796
772
|
}
|
|
797
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
773
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpHueSaturation, decorators: [{
|
|
798
774
|
type: Component,
|
|
799
775
|
args: [{
|
|
800
776
|
selector: 'ngtp-hue-saturation',
|
|
@@ -902,28 +878,25 @@ const defaultOptions$2 = {
|
|
|
902
878
|
};
|
|
903
879
|
class NgtpLensFlare {
|
|
904
880
|
constructor() {
|
|
905
|
-
this.
|
|
881
|
+
this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
|
|
906
882
|
this.store = injectStore();
|
|
907
883
|
this.viewport = this.store.select('viewport');
|
|
908
884
|
this.raycaster = this.store.select('raycaster');
|
|
909
885
|
this.pointer = this.store.select('pointer');
|
|
910
886
|
this.effectComposer = inject(NgtpEffectComposer);
|
|
911
|
-
this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
|
|
912
887
|
this.projectedPosition = new Vector3();
|
|
913
888
|
this.mouse2d = new Vector2();
|
|
914
889
|
this.effect = computed(() => {
|
|
915
890
|
const { position: _, followMouse: __, smoothTime: ___, ...options } = this.options();
|
|
916
891
|
return new LensFlareEffect(options);
|
|
917
892
|
});
|
|
918
|
-
|
|
919
|
-
this.
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
}
|
|
926
|
-
});
|
|
893
|
+
effect(() => {
|
|
894
|
+
const [lensFlareEffect, viewport] = [this.effect(), this.viewport()];
|
|
895
|
+
const iResolution = lensFlareEffect.uniforms.get('iResolution');
|
|
896
|
+
if (iResolution) {
|
|
897
|
+
iResolution.value.x = viewport.width;
|
|
898
|
+
iResolution.value.y = viewport.height;
|
|
899
|
+
}
|
|
927
900
|
});
|
|
928
901
|
injectBeforeRender(({ delta }) => {
|
|
929
902
|
const [effect] = [this.effect()];
|
|
@@ -979,12 +952,12 @@ class NgtpLensFlare {
|
|
|
979
952
|
easing.damp(uOpacity, 'value', target, smoothTime, delta);
|
|
980
953
|
});
|
|
981
954
|
}
|
|
982
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
983
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
955
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
984
957
|
<ngt-primitive *args="[effect()]" [parameters]="{ dispose: null }" />
|
|
985
958
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
986
959
|
}
|
|
987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLensFlare, decorators: [{
|
|
988
961
|
type: Component,
|
|
989
962
|
args: [{
|
|
990
963
|
selector: 'ngtp-lens-flare',
|
|
@@ -1000,36 +973,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1000
973
|
|
|
1001
974
|
class NgtpLUT {
|
|
1002
975
|
constructor() {
|
|
1003
|
-
this.autoEffect = injectAutoEffect();
|
|
1004
|
-
this.store = injectStore();
|
|
1005
|
-
this.invalidate = this.store.select('invalidate');
|
|
1006
976
|
this.options = input({});
|
|
1007
977
|
this.lut = pick(this.options, 'lut');
|
|
978
|
+
this.store = injectStore();
|
|
979
|
+
this.invalidate = this.store.select('invalidate');
|
|
1008
980
|
this.effect = computed(() => {
|
|
1009
981
|
const [lut, { lut: _, ...options }] = [this.lut(), this.options()];
|
|
1010
982
|
return new LUT3DEffect(lut, options);
|
|
1011
983
|
});
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
invalidate();
|
|
1024
|
-
});
|
|
984
|
+
effect(() => {
|
|
985
|
+
const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
|
|
986
|
+
this.effect(),
|
|
987
|
+
this.options(),
|
|
988
|
+
this.invalidate(),
|
|
989
|
+
];
|
|
990
|
+
if (tetrahedralInterpolation)
|
|
991
|
+
effect.tetrahedralInterpolation = tetrahedralInterpolation;
|
|
992
|
+
if (lut)
|
|
993
|
+
effect.lut = lut;
|
|
994
|
+
invalidate();
|
|
1025
995
|
});
|
|
1026
996
|
}
|
|
1027
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
997
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
998
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1029
999
|
<ngt-primitive *args="[effect()]" [dispose]="null" />
|
|
1030
1000
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1031
1001
|
}
|
|
1032
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpLUT, decorators: [{
|
|
1033
1003
|
type: Component,
|
|
1034
1004
|
args: [{
|
|
1035
1005
|
selector: 'ngtp-lut',
|
|
@@ -1049,15 +1019,15 @@ class NgtpNoise {
|
|
|
1049
1019
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1050
1020
|
this.options = input({});
|
|
1051
1021
|
}
|
|
1052
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1053
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1023
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1054
1024
|
<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
|
|
1055
1025
|
<ngtp-effect-blend-mode />
|
|
1056
1026
|
<ng-content />
|
|
1057
1027
|
</ngt-noise-effect>
|
|
1058
1028
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1059
1029
|
}
|
|
1060
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpNoise, decorators: [{
|
|
1061
1031
|
type: Component,
|
|
1062
1032
|
args: [{
|
|
1063
1033
|
selector: 'ngtp-noise',
|
|
@@ -1144,31 +1114,35 @@ class NgtpOutline {
|
|
|
1144
1114
|
...restOptions,
|
|
1145
1115
|
});
|
|
1146
1116
|
});
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
// NOTE:
|
|
1160
|
-
if (
|
|
1161
|
-
|
|
1162
|
-
if (this.selection() === undefined) {
|
|
1163
|
-
throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
|
|
1164
|
-
}
|
|
1165
|
-
return this.handleSelectionChangeEffect(this.selection, this.effect, this.invalidate);
|
|
1117
|
+
effect((onCleanup) => {
|
|
1118
|
+
const effect = this.effect();
|
|
1119
|
+
onCleanup(() => effect.dispose());
|
|
1120
|
+
});
|
|
1121
|
+
effect(() => {
|
|
1122
|
+
const [effect, invalidate, selectionLayer] = [this.effect(), this.invalidate(), this.selectionLayer()];
|
|
1123
|
+
effect.selectionLayer = selectionLayer;
|
|
1124
|
+
invalidate();
|
|
1125
|
+
});
|
|
1126
|
+
effect((onCleanup) => {
|
|
1127
|
+
// NOTE: we run this effect if declarative NgtSelection is not enabled
|
|
1128
|
+
if (!this.ngtSelection) {
|
|
1129
|
+
// NOTE: if NgtSelection is not used and selection is not provided, we throw
|
|
1130
|
+
if (this.selection() === undefined) {
|
|
1131
|
+
throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
|
|
1166
1132
|
}
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
return
|
|
1133
|
+
const cleanup = this.handleSelectionChangeEffect(this.selection, this.effect, this.invalidate);
|
|
1134
|
+
onCleanup(() => {
|
|
1135
|
+
cleanup?.();
|
|
1136
|
+
});
|
|
1137
|
+
return;
|
|
1138
|
+
}
|
|
1139
|
+
// NOTE: we run this effect if declarative NgtSelection is enabled
|
|
1140
|
+
const selectionEnabled = this.ngtSelection.enabled();
|
|
1141
|
+
if (!selectionEnabled)
|
|
1142
|
+
return;
|
|
1143
|
+
const cleanup = this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.invalidate);
|
|
1144
|
+
onCleanup(() => {
|
|
1145
|
+
cleanup?.();
|
|
1172
1146
|
});
|
|
1173
1147
|
});
|
|
1174
1148
|
}
|
|
@@ -1193,12 +1167,12 @@ class NgtpOutline {
|
|
|
1193
1167
|
invalidate();
|
|
1194
1168
|
};
|
|
1195
1169
|
}
|
|
1196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1170
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpOutline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1171
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpOutline, isStandalone: true, selector: "ngtp-outline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1198
1172
|
<ngt-primitive *args="[effect()]" />
|
|
1199
1173
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1200
1174
|
}
|
|
1201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpOutline, decorators: [{
|
|
1202
1176
|
type: Component,
|
|
1203
1177
|
args: [{
|
|
1204
1178
|
selector: 'ngtp-outline',
|
|
@@ -1218,12 +1192,12 @@ class NgtpPixelation {
|
|
|
1218
1192
|
this.granularity = pick(this.options, 'granularity');
|
|
1219
1193
|
this.effect = computed(() => new PixelationEffect(this.granularity()));
|
|
1220
1194
|
}
|
|
1221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1223
1197
|
<ngt-primitive *args="[effect()]" />
|
|
1224
1198
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1225
1199
|
}
|
|
1226
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpPixelation, decorators: [{
|
|
1227
1201
|
type: Component,
|
|
1228
1202
|
args: [{
|
|
1229
1203
|
selector: 'ngtp-pixelation',
|
|
@@ -1246,15 +1220,15 @@ class NgtpScanline {
|
|
|
1246
1220
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1247
1221
|
this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
|
|
1248
1222
|
}
|
|
1249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1250
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1223
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1224
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1251
1225
|
<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
|
|
1252
1226
|
<ngtp-effect-blend-mode />
|
|
1253
1227
|
<ng-content />
|
|
1254
1228
|
</ngt-scanline-effect>
|
|
1255
1229
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1256
1230
|
}
|
|
1257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpScanline, decorators: [{
|
|
1258
1232
|
type: Component,
|
|
1259
1233
|
args: [{
|
|
1260
1234
|
selector: 'ngtp-scanline',
|
|
@@ -1279,15 +1253,15 @@ class NgtpSepia {
|
|
|
1279
1253
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1280
1254
|
this.options = input({});
|
|
1281
1255
|
}
|
|
1282
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1283
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1256
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1284
1258
|
<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
|
|
1285
1259
|
<ngtp-effect-blend-mode />
|
|
1286
1260
|
<ng-content />
|
|
1287
1261
|
</ngt-sepia-effect>
|
|
1288
1262
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1289
1263
|
}
|
|
1290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSepia, decorators: [{
|
|
1291
1265
|
type: Component,
|
|
1292
1266
|
args: [{
|
|
1293
1267
|
selector: 'ngtp-sepia',
|
|
@@ -1311,15 +1285,15 @@ class NgtpShockWave {
|
|
|
1311
1285
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1312
1286
|
this.options = input({});
|
|
1313
1287
|
}
|
|
1314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1316
1290
|
<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
|
|
1317
1291
|
<ngtp-effect-blend-mode />
|
|
1318
1292
|
<ng-content />
|
|
1319
1293
|
</ngt-shock-wave-effect>
|
|
1320
1294
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1321
1295
|
}
|
|
1322
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1296
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpShockWave, decorators: [{
|
|
1323
1297
|
type: Component,
|
|
1324
1298
|
args: [{
|
|
1325
1299
|
selector: 'ngtp-shock-wave',
|
|
@@ -1343,15 +1317,15 @@ class NgtpSMAA {
|
|
|
1343
1317
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1344
1318
|
this.options = input({});
|
|
1345
1319
|
}
|
|
1346
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1320
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1321
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1348
1322
|
<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
|
|
1349
1323
|
<ngtp-effect-blend-mode />
|
|
1350
1324
|
<ng-content />
|
|
1351
1325
|
</ngt-sMAA-effect>
|
|
1352
1326
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1353
1327
|
}
|
|
1354
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1328
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpSMAA, decorators: [{
|
|
1355
1329
|
type: Component,
|
|
1356
1330
|
args: [{
|
|
1357
1331
|
selector: 'ngtp-smaa',
|
|
@@ -1375,15 +1349,15 @@ class NgtpTiltShift {
|
|
|
1375
1349
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1376
1350
|
this.options = input({});
|
|
1377
1351
|
}
|
|
1378
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1379
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1353
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1380
1354
|
<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
|
|
1381
1355
|
<ngtp-effect-blend-mode />
|
|
1382
1356
|
<ng-content />
|
|
1383
1357
|
</ngt-tilt-shift-effect>
|
|
1384
1358
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1385
1359
|
}
|
|
1386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift, decorators: [{
|
|
1387
1361
|
type: Component,
|
|
1388
1362
|
args: [{
|
|
1389
1363
|
selector: 'ngtp-tilt-shift',
|
|
@@ -1489,15 +1463,15 @@ class NgtpTiltShift2 {
|
|
|
1489
1463
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1490
1464
|
this.options = input({});
|
|
1491
1465
|
}
|
|
1492
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1466
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1494
1468
|
<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
|
|
1495
1469
|
<ngtp-effect-blend-mode />
|
|
1496
1470
|
<ng-content />
|
|
1497
1471
|
</ngt-tilt-shift2-effect>
|
|
1498
1472
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1499
1473
|
}
|
|
1500
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1474
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpTiltShift2, decorators: [{
|
|
1501
1475
|
type: Component,
|
|
1502
1476
|
args: [{
|
|
1503
1477
|
selector: 'ngtp-tilt-shift2',
|
|
@@ -1516,21 +1490,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1516
1490
|
}]
|
|
1517
1491
|
}] });
|
|
1518
1492
|
|
|
1493
|
+
class NgtpToneMapping {
|
|
1494
|
+
constructor() {
|
|
1495
|
+
this.options = input({});
|
|
1496
|
+
this.parameters = omit(this.options, [
|
|
1497
|
+
'blendFunction',
|
|
1498
|
+
'adaptive',
|
|
1499
|
+
'mode',
|
|
1500
|
+
'resolution',
|
|
1501
|
+
'maxLuminance',
|
|
1502
|
+
'whitePoint',
|
|
1503
|
+
'middleGrey',
|
|
1504
|
+
'minLuminance',
|
|
1505
|
+
'averageLuminance',
|
|
1506
|
+
'adaptationRate',
|
|
1507
|
+
]);
|
|
1508
|
+
this.blendFunction = pick(this.options, 'blendFunction');
|
|
1509
|
+
this.adaptive = pick(this.options, 'adaptive');
|
|
1510
|
+
this.mode = pick(this.options, 'mode');
|
|
1511
|
+
this.resolution = pick(this.options, 'resolution');
|
|
1512
|
+
this.maxLuminance = pick(this.options, 'maxLuminance');
|
|
1513
|
+
this.whitePoint = pick(this.options, 'whitePoint');
|
|
1514
|
+
this.middleGrey = pick(this.options, 'middleGrey');
|
|
1515
|
+
this.minLuminance = pick(this.options, 'minLuminance');
|
|
1516
|
+
this.averageLuminance = pick(this.options, 'averageLuminance');
|
|
1517
|
+
this.adaptationRate = pick(this.options, 'adaptationRate');
|
|
1518
|
+
this.effect = computed(() => {
|
|
1519
|
+
const [blendFunction, adaptive, mode, resolution, maxLuminance, whitePoint, middleGrey, minLuminance, averageLuminance, adaptationRate,] = [
|
|
1520
|
+
this.blendFunction(),
|
|
1521
|
+
this.adaptive(),
|
|
1522
|
+
this.mode(),
|
|
1523
|
+
this.resolution(),
|
|
1524
|
+
this.maxLuminance(),
|
|
1525
|
+
this.whitePoint(),
|
|
1526
|
+
this.middleGrey(),
|
|
1527
|
+
this.minLuminance(),
|
|
1528
|
+
this.averageLuminance(),
|
|
1529
|
+
this.adaptationRate(),
|
|
1530
|
+
];
|
|
1531
|
+
const effect = new ToneMappingEffect({
|
|
1532
|
+
blendFunction,
|
|
1533
|
+
adaptive,
|
|
1534
|
+
mode,
|
|
1535
|
+
resolution,
|
|
1536
|
+
maxLuminance,
|
|
1537
|
+
whitePoint,
|
|
1538
|
+
middleGrey,
|
|
1539
|
+
minLuminance,
|
|
1540
|
+
averageLuminance,
|
|
1541
|
+
adaptationRate,
|
|
1542
|
+
});
|
|
1543
|
+
effect['setAttributes'](EffectAttribute.CONVOLUTION);
|
|
1544
|
+
return effect;
|
|
1545
|
+
});
|
|
1546
|
+
effect((onCleanup) => {
|
|
1547
|
+
const toneMappingEffect = this.effect();
|
|
1548
|
+
onCleanup(() => toneMappingEffect.dispose());
|
|
1549
|
+
});
|
|
1550
|
+
}
|
|
1551
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1552
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1553
|
+
<ngt-primitive *args="[effect()]" [parameters]="parameters()" />
|
|
1554
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1555
|
+
}
|
|
1556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpToneMapping, decorators: [{
|
|
1557
|
+
type: Component,
|
|
1558
|
+
args: [{
|
|
1559
|
+
selector: 'ngtp-tone-mapping',
|
|
1560
|
+
standalone: true,
|
|
1561
|
+
template: `
|
|
1562
|
+
<ngt-primitive *args="[effect()]" [parameters]="parameters()" />
|
|
1563
|
+
`,
|
|
1564
|
+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
1565
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1566
|
+
imports: [NgtArgs],
|
|
1567
|
+
}]
|
|
1568
|
+
}], ctorParameters: () => [] });
|
|
1569
|
+
|
|
1519
1570
|
extend({ VignetteEffect });
|
|
1520
1571
|
class NgtpVignette {
|
|
1521
1572
|
constructor() {
|
|
1522
1573
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1523
1574
|
this.options = input({});
|
|
1524
1575
|
}
|
|
1525
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1526
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1576
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1577
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1527
1578
|
<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
|
|
1528
1579
|
<ngtp-effect-blend-mode />
|
|
1529
1580
|
<ng-content />
|
|
1530
1581
|
</ngt-vignette-effect>
|
|
1531
1582
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1532
1583
|
}
|
|
1533
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpVignette, decorators: [{
|
|
1534
1585
|
type: Component,
|
|
1535
1586
|
args: [{
|
|
1536
1587
|
selector: 'ngtp-vignette',
|
|
@@ -1578,15 +1629,15 @@ class NgtpWater {
|
|
|
1578
1629
|
this.effect = inject(NgtpEffect, { host: true });
|
|
1579
1630
|
this.options = input({});
|
|
1580
1631
|
}
|
|
1581
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1582
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.
|
|
1632
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.4", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
|
|
1583
1634
|
<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
|
|
1584
1635
|
<ngtp-effect-blend-mode />
|
|
1585
1636
|
<ng-content />
|
|
1586
1637
|
</ngt-water-effect>
|
|
1587
1638
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1588
1639
|
}
|
|
1589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtpWater, decorators: [{
|
|
1590
1641
|
type: Component,
|
|
1591
1642
|
args: [{
|
|
1592
1643
|
selector: 'ngtp-water',
|
|
@@ -1609,5 +1660,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1609
1660
|
* Generated bundle index. Do not edit.
|
|
1610
1661
|
*/
|
|
1611
1662
|
|
|
1612
|
-
export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpEffectHostDirective, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpOutline, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, provideDefaultEffectOptions };
|
|
1663
|
+
export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpEffectHostDirective, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpOutline, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpToneMapping, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, provideDefaultEffectOptions };
|
|
1613
1664
|
//# sourceMappingURL=angular-three-postprocessing.mjs.map
|