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 });

0 commit comments

Comments
 (0)