Skip to content

Commit da5de36

Browse files
nartcnartc
committed
feat(postprocessing): adjust postprocessing usages
1 parent 23f00ca commit da5de36

26 files changed

+102
-59
lines changed

‎libs/postprocessing/src/lib/effect-composer.ts

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
Component,
55
ElementRef,
66
Injector,
7-
afterNextRender,
87
computed,
98
effect,
109
inject,
@@ -74,18 +73,27 @@ export class NgtpEffectComposer {
7473
private defaultScene = this.store.select('scene');
7574
private defaultCamera = this.store.select('camera');
7675

77-
depthBuffer = pick(this.options, 'depthBuffer');
78-
stencilBuffer = pick(this.options, 'stencilBuffer');
79-
multisampling = pick(this.options, 'multisampling');
80-
frameBufferType = pick(this.options, 'frameBufferType');
76+
private depthBuffer = pick(this.options, 'depthBuffer');
77+
private stencilBuffer = pick(this.options, 'stencilBuffer');
78+
private multisampling = pick(this.options, 'multisampling');
79+
private frameBufferType = pick(this.options, 'frameBufferType');
80+
private enableNormalPass = pick(this.options, 'enableNormalPass');
81+
private resolutionScale = pick(this.options, 'resolutionScale');
82+
private enabled = pick(this.options, 'enabled');
83+
private renderPriority = pick(this.options, 'renderPriority');
84+
8185
scene = computed(() => this.options().scene ?? this.defaultScene());
8286
camera = computed(() => this.options().camera ?? this.defaultCamera());
83-
enableNormalPass = pick(this.options, 'enableNormalPass');
84-
resolutionScale = pick(this.options, 'resolutionScale');
8587

86-
groupRef = viewChild.required<ElementRef<Group>>('group');
88+
private groupRef = viewChild.required<ElementRef<Group>>('group');
89+
90+
private priority = computed(() => {
91+
const enabled = this.enabled();
92+
if (!enabled) return 0;
93+
return this.renderPriority();
94+
});
8795

88-
composerData = computed(() => {
96+
private composerData = computed(() => {
8997
const webGL2Available = isWebGL2Available();
9098
const [
9199
gl,
@@ -159,15 +167,15 @@ export class NgtpEffectComposer {
159167

160168
effect((onCleanup) => {
161169
const [group, { composer, normalPass, downSamplingPass }, camera] = [
162-
this.groupRef(),
170+
this.groupRef().nativeElement,
163171
this.composerData(),
164172
this.camera(),
165173
];
166174

167175
const passes: Pass[] = [];
168176

169-
if (group.nativeElement && composer) {
170-
const localState = getLocalState(group.nativeElement);
177+
if (composer) {
178+
const localState = getLocalState(group);
171179
if (!localState) return;
172180

173181
const children = localState.nonObjects();
@@ -207,9 +215,10 @@ export class NgtpEffectComposer {
207215
});
208216
});
209217

210-
// NOTE: register beforeRender afterNextRender to ensure input is ready
211-
afterNextRender(() => {
212-
injectBeforeRender(
218+
effect((onCleanup) => {
219+
const priority = this.priority();
220+
221+
const sub = injectBeforeRender(
213222
({ delta }) => {
214223
const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
215224
this.composerData(),
@@ -225,8 +234,10 @@ export class NgtpEffectComposer {
225234
gl.autoClear = currentAutoClear;
226235
}
227236
},
228-
{ injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 },
237+
{ injector: this.injector, priority },
229238
);
239+
240+
onCleanup(() => sub());
230241
});
231242
}
232243
}

‎libs/postprocessing/src/lib/effect.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,3 @@ export class NgtpEffect {
3535
camera = this.store.select('camera');
3636
invalidate = this.store.select('invalidate');
3737
}
38-
39-
export const NgtpEffectHostDirective = { directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] };

‎libs/postprocessing/src/lib/effects/ascii.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
1+
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';
22
import { NgtArgs } from 'angular-three';
33
import { mergeInputs } from 'ngxtension/inject-inputs';
44
import { Effect } from 'postprocessing';
@@ -135,4 +135,11 @@ const defaultOptions: ASCIIEffectOptions = {
135135
export class NgtpASCII {
136136
options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
137137
effect = computed(() => new ASCIIEffect(this.options()));
138+
139+
constructor() {
140+
effect((onCleanup) => {
141+
const effect = this.effect();
142+
onCleanup(() => effect.dispose());
143+
});
144+
}
138145
}

‎libs/postprocessing/src/lib/effects/bloom.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { BlendFunction, BloomEffect, BloomEffectOptions } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective, provideDefaultEffectOptions } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode, provideDefaultEffectOptions } from '../effect';
55

66
extend({ BloomEffect });
77

@@ -17,7 +17,7 @@ extend({ BloomEffect });
1717
imports: [NgtArgs, NgtpEffectBlendMode],
1818
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1919
changeDetection: ChangeDetectionStrategy.OnPush,
20-
hostDirectives: [NgtpEffectHostDirective],
20+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2121
providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
2222
})
2323
export class NgtpBloom {

‎libs/postprocessing/src/lib/effects/brightness-contrast.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { BrightnessContrastEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ BrightnessContrastEffect });
77

@@ -19,7 +19,7 @@ export type BrightnessEffectOptions = NonNullable<ConstructorParameters<typeof B
1919
imports: [NgtArgs, NgtpEffectBlendMode],
2020
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2121
changeDetection: ChangeDetectionStrategy.OnPush,
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpBrightnessContrast {
2525
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/chromatic-abberation.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { ChromaticAberrationEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ ChromaticAberrationEffect });
77

@@ -21,7 +21,7 @@ export type ChromaticAberrationEffectOptions = Partial<
2121
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2222
changeDetection: ChangeDetectionStrategy.OnPush,
2323
imports: [NgtArgs, NgtpEffectBlendMode],
24-
hostDirectives: [NgtpEffectHostDirective],
24+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2525
})
2626
export class NgtpChromaticAberration {
2727
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/color-depth.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { ColorDepthEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ ColorDepthEffect });
77

@@ -19,7 +19,7 @@ export type ColorDepthEffectOptions = Partial<NonNullable<ConstructorParameters<
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpColorDepth {
2525
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/depth.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { DepthEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ DepthEffect });
77

@@ -19,7 +19,7 @@ export type DepthEffectOptions = Partial<NonNullable<ConstructorParameters<typeo
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpDepth {
2525
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/dot-screen.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { DotScreenEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ DotScreenEffect });
77

@@ -19,7 +19,7 @@ export type DotScreenEffectOptions = Partial<NonNullable<ConstructorParameters<t
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpDotScreen {
2525
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/fxaa.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { FXAAEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ FXAAEffect });
77

@@ -19,7 +19,7 @@ export type FXAAEffectOptions = Partial<NonNullable<ConstructorParameters<typeof
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpFXAA {
2525
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/glitch.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,15 +59,15 @@ export class NgtpGlitch {
5959
});
6060

6161
constructor() {
62-
effect((onCleanup) => {
63-
const effect = this.effect();
64-
onCleanup(() => effect.dispose());
65-
});
66-
6762
effect(() => {
6863
const [glitchEffect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
6964
glitchEffect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
7065
invalidate();
7166
});
67+
68+
effect((onCleanup) => {
69+
const effect = this.effect();
70+
onCleanup(() => effect.dispose());
71+
});
7272
}
7373
}

‎libs/postprocessing/src/lib/effects/god-rays.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,5 +42,10 @@ export class NgtpGodRays {
4242
const [sun, godRaysEffect] = [this.options().sun, this.effect()];
4343
godRaysEffect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
4444
});
45+
46+
effect((onCleanup) => {
47+
const effect = this.effect();
48+
onCleanup(() => effect.dispose());
49+
});
4550
}
4651
}

‎libs/postprocessing/src/lib/effects/grid.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,10 @@ export class NgtpGrid {
3131
effect.setSize(size.width, size.height);
3232
}
3333
});
34+
35+
effect((onCleanup) => {
36+
const effect = this.effect();
37+
onCleanup(() => effect.dispose());
38+
});
3439
}
3540
}

‎libs/postprocessing/src/lib/effects/hue-saturation.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { HueSaturationEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ HueSaturationEffect });
77

@@ -19,7 +19,7 @@ export type HueSaturationEffectOptions = Partial<NonNullable<ConstructorParamete
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpHueSaturation {
2525
effect = inject(NgtpEffect, { host: true });

‎libs/postprocessing/src/lib/effects/lens-flare.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,11 @@ export class NgtpLensFlare {
171171
}
172172
});
173173

174+
effect((onCleanup) => {
175+
const effect = this.effect();
176+
onCleanup(() => effect.dispose());
177+
});
178+
174179
injectBeforeRender(({ delta }) => {
175180
const [effect] = [this.effect()];
176181
if (!effect) return;

‎libs/postprocessing/src/lib/effects/lut.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,10 @@ export class NgtpLUT {
4343
if (lut) effect.lut = lut;
4444
invalidate();
4545
});
46+
47+
effect((onCleanup) => {
48+
const effect = this.effect();
49+
onCleanup(() => effect.dispose());
50+
});
4651
}
4752
}

‎libs/postprocessing/src/lib/effects/noise.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { BlendFunction, NoiseEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective, provideDefaultEffectOptions } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode, provideDefaultEffectOptions } from '../effect';
55

66
extend({ NoiseEffect });
77

@@ -19,7 +19,7 @@ export type NoiseEffectOptions = Partial<NonNullable<ConstructorParameters<typeo
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })],
2424
})
2525
export class NgtpNoise {

‎libs/postprocessing/src/lib/effects/pixelation.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
1+
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';
22
import { NgtArgs, pick } from 'angular-three';
33
import { mergeInputs } from 'ngxtension/inject-inputs';
44
import { PixelationEffect } from 'postprocessing';
@@ -21,4 +21,11 @@ export class NgtpPixelation {
2121
private granularity = pick(this.options, 'granularity');
2222

2323
effect = computed(() => new PixelationEffect(this.granularity()));
24+
25+
constructor() {
26+
effect((onCleanup) => {
27+
const effect = this.effect();
28+
onCleanup(() => effect.dispose());
29+
});
30+
}
2431
}

‎libs/postprocessing/src/lib/effects/scanline.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, inp
22
import { NgtArgs, extend } from 'angular-three';
33
import { mergeInputs } from 'ngxtension/inject-inputs';
44
import { BlendFunction, ScanlineEffect } from 'postprocessing';
5-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective, provideDefaultEffectOptions } from '../effect';
5+
import { NgtpEffect, NgtpEffectBlendMode, provideDefaultEffectOptions } from '../effect';
66

77
extend({ ScanlineEffect });
88

@@ -24,7 +24,7 @@ const defaultOptions: Omit<ScanlineEffectOptions, 'blendFunction'> = {
2424
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2525
changeDetection: ChangeDetectionStrategy.OnPush,
2626
imports: [NgtArgs, NgtpEffectBlendMode],
27-
hostDirectives: [NgtpEffectHostDirective],
27+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2828
providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })],
2929
})
3030
export class NgtpScanline {

‎libs/postprocessing/src/lib/effects/sepia.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
22
import { NgtArgs, extend } from 'angular-three';
33
import { SepiaEffect } from 'postprocessing';
4-
import { NgtpEffect, NgtpEffectBlendMode, NgtpEffectHostDirective } from '../effect';
4+
import { NgtpEffect, NgtpEffectBlendMode } from '../effect';
55

66
extend({ SepiaEffect });
77

@@ -19,7 +19,7 @@ export type SepiaEffectOptions = Partial<NonNullable<ConstructorParameters<typeo
1919
schemas: [CUSTOM_ELEMENTS_SCHEMA],
2020
changeDetection: ChangeDetectionStrategy.OnPush,
2121
imports: [NgtArgs, NgtpEffectBlendMode],
22-
hostDirectives: [NgtpEffectHostDirective],
22+
hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
2323
})
2424
export class NgtpSepia {
2525
effect = inject(NgtpEffect, { host: true });

0 commit comments

Comments
 (0)