fix(postprocessing): remove afterNextRender and autoEffect

nartc · nartc · commit 4d0918d6cfa1 · 2024-09-15T00:40:39.000-05:00
diff --git a/libs/postprocessing/src/lib/effect-composer.ts b/libs/postprocessing/src/lib/effect-composer.ts
@@ -6,12 +6,12 @@ import {
 	Injector,
 	afterNextRender,
 	computed,
+	effect,
 	inject,
 	input,
 	viewChild,
 } from '@angular/core';
 import { extend, getLocalState, injectBeforeRender, injectStore, pick } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import {
 	DepthDownsamplingPass,
@@ -68,7 +68,6 @@ export class NgtpEffectComposer {
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 
 	private injector = inject(Injector);
-	private autoEffect = injectAutoEffect();
 	private store = injectStore();
 	private size = this.store.select('size');
 	private gl = this.store.select('gl');
@@ -141,55 +140,24 @@ export class NgtpEffectComposer {
 	constructor() {
 		extend({ Group });
 
-		afterNextRender(() => {
-			this.disableToneMapping();
-			this.setComposerSize();
-			this.updatePasses();
-
-			injectBeforeRender(
-				({ delta }) => {
-					const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
-						this.composerData(),
-						this.options(),
-						this.gl(),
-					];
-
-					if (enabled) {
-						const currentAutoClear = gl.autoClear;
-						gl.autoClear = autoClear;
-						if (stencilBuffer && !autoClear) gl.clearStencil();
-						composer.render(delta);
-						gl.autoClear = currentAutoClear;
-					}
-				},
-				{ injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 },
-			);
-		});
-	}
-
-	// NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
-	private disableToneMapping() {
-		this.autoEffect(() => {
+		// NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
+		effect((onCleanup) => {
 			const gl = this.gl();
 			const currentTonemapping = gl.toneMapping;
 			gl.toneMapping = NoToneMapping;
-			return () => {
+			onCleanup(() => {
 				gl.toneMapping = currentTonemapping;
-			};
+			});
 		});
-	}
 
-	private setComposerSize() {
-		this.autoEffect(() => {
+		effect(() => {
 			const [{ composer }, { width, height }] = [this.composerData(), this.size()];
 			if (composer) {
 				composer.setSize(width, height);
 			}
 		});
-	}
 
-	private updatePasses() {
-		this.autoEffect(() => {
+		effect((onCleanup) => {
 			const [group, { composer, normalPass, downSamplingPass }, camera] = [
 				this.groupRef(),
 				this.composerData(),
@@ -232,11 +200,33 @@ export class NgtpEffectComposer {
 				if (downSamplingPass) downSamplingPass.enabled = true;
 			}
 
-			return () => {
+			onCleanup(() => {
 				for (const pass of passes) composer?.removePass(pass);
 				if (normalPass) normalPass.enabled = false;
 				if (downSamplingPass) downSamplingPass.enabled = false;
-			};
+			});
+		});
+
+		// NOTE: register beforeRender afterNextRender to ensure input is ready
+		afterNextRender(() => {
+			injectBeforeRender(
+				({ delta }) => {
+					const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
+						this.composerData(),
+						this.options(),
+						this.gl(),
+					];
+
+					if (enabled) {
+						const currentAutoClear = gl.autoClear;
+						gl.autoClear = autoClear;
+						if (stencilBuffer && !autoClear) gl.clearStencil();
+						composer.render(delta);
+						gl.autoClear = currentAutoClear;
+					}
+				},
+				{ injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 },
+			);
 		});
 	}
 }
diff --git a/libs/postprocessing/src/lib/effects/depth-of-field.ts b/libs/postprocessing/src/lib/effects/depth-of-field.ts
@@ -2,13 +2,12 @@ import {
 	CUSTOM_ELEMENTS_SCHEMA,
 	ChangeDetectionStrategy,
 	Component,
-	afterNextRender,
 	computed,
+	effect,
 	inject,
 	input,
 } from '@angular/core';
 import { NgtAnyRecord, NgtArgs, NgtVector3 } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { DepthOfFieldEffect, MaskFunction } from 'postprocessing';
 import { DepthPackingStrategies, Texture, Vector3 } from 'three';
 import { NgtpEffectComposer } from '../effect-composer';
@@ -27,7 +26,6 @@ type DOFOptions = NonNullable<ConstructorParameters<typeof DepthOfFieldEffect>[1
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtpDepthOfField {
-	private autoEffect = injectAutoEffect();
 	private effectComposer = inject(NgtpEffectComposer);
 
 	options = input({} as DOFOptions);
@@ -53,13 +51,9 @@ export class NgtpDepthOfField {
 	});
 
 	constructor() {
-		afterNextRender(() => {
-			this.autoEffect(() => {
-				const effect = this.effect();
-				return () => {
-					effect.dispose();
-				};
-			});
+		effect((onCleanup) => {
+			const depthOfFieldEffect = this.effect();
+			onCleanup(() => depthOfFieldEffect.dispose());
 		});
 	}
 }
diff --git a/libs/postprocessing/src/lib/effects/glitch.ts b/libs/postprocessing/src/lib/effects/glitch.ts
@@ -1,13 +1,5 @@
-import {
-	CUSTOM_ELEMENTS_SCHEMA,
-	ChangeDetectionStrategy,
-	Component,
-	afterNextRender,
-	computed,
-	input,
-} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';
 import { NgtArgs, NgtVector2, injectStore, pick, vector2 } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { GlitchEffect, GlitchMode } from 'postprocessing';
 
@@ -32,7 +24,6 @@ export type GlitchOptions = NonNullable<ConstructorParameters<typeof GlitchEffec
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtpGlitch {
-	private autoEffect = injectAutoEffect();
 	private store = injectStore();
 	private invalidate = this.store.select('invalidate');
 
@@ -68,17 +59,15 @@ export class NgtpGlitch {
 	});
 
 	constructor() {
-		afterNextRender(() => {
-			this.autoEffect(() => {
-				const effect = this.effect();
-				return () => effect.dispose();
-			});
+		effect((onCleanup) => {
+			const effect = this.effect();
+			onCleanup(() => effect.dispose());
+		});
 
-			this.autoEffect(() => {
-				const [effect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
-				effect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
-				invalidate();
-			});
+		effect(() => {
+			const [glitchEffect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
+			glitchEffect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
+			invalidate();
 		});
 	}
 }
diff --git a/libs/postprocessing/src/lib/effects/god-rays.ts b/libs/postprocessing/src/lib/effects/god-rays.ts
@@ -3,13 +3,12 @@ import {
 	ChangeDetectionStrategy,
 	Component,
 	ElementRef,
-	afterNextRender,
 	computed,
+	effect,
 	inject,
 	input,
 } from '@angular/core';
 import { NgtArgs, is } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { GodRaysEffect } from 'postprocessing';
 import { Mesh, Points } from 'three';
 import { NgtpEffectComposer } from '../effect-composer';
@@ -29,7 +28,6 @@ type GodRaysOptions = ConstructorParameters<typeof GodRaysEffect>[2] & {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtpGodRays {
-	private autoEffect = injectAutoEffect();
 	private effectComposer = inject(NgtpEffectComposer);
 
 	options = input({} as GodRaysOptions);
@@ -40,11 +38,9 @@ export class NgtpGodRays {
 	});
 
 	constructor() {
-		afterNextRender(() => {
-			this.autoEffect(() => {
-				const [sun, effect] = [this.options().sun, this.effect()];
-				effect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
-			});
+		effect(() => {
+			const [sun, godRaysEffect] = [this.options().sun, this.effect()];
+			godRaysEffect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
 		});
 	}
 }
diff --git a/libs/postprocessing/src/lib/effects/grid.ts b/libs/postprocessing/src/lib/effects/grid.ts
@@ -1,13 +1,5 @@
-import {
-	CUSTOM_ELEMENTS_SCHEMA,
-	ChangeDetectionStrategy,
-	Component,
-	afterNextRender,
-	computed,
-	input,
-} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';
 import { NgtArgs, pick } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { GridEffect } from 'postprocessing';
 
 type GridOptions = NonNullable<ConstructorParameters<typeof GridEffect>[0]> &
@@ -24,8 +16,6 @@ type GridOptions = NonNullable<ConstructorParameters<typeof GridEffect>[0]> &
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class NgtpGrid {
-	private autoEffect = injectAutoEffect();
-
 	options = input({} as GridOptions);
 	private size = pick(this.options, 'size');
 
@@ -35,13 +25,11 @@ export class NgtpGrid {
 	});
 
 	constructor() {
-		afterNextRender(() => {
-			this.autoEffect(() => {
-				const [size, effect] = [this.size(), this.effect()];
-				if (size) {
-					effect.setSize(size.width, size.height);
-				}
-			});
+		effect(() => {
+			const [size, effect] = [this.size(), this.effect()];
+			if (size) {
+				effect.setSize(size.width, size.height);
+			}
 		});
 	}
 }
diff --git a/libs/postprocessing/src/lib/effects/lens-flare.ts b/libs/postprocessing/src/lib/effects/lens-flare.ts
@@ -5,14 +5,13 @@ import {
 	CUSTOM_ELEMENTS_SCHEMA,
 	ChangeDetectionStrategy,
 	Component,
-	afterNextRender,
 	computed,
+	effect,
 	inject,
 	input,
 } from '@angular/core';
 import { NgtArgs, injectBeforeRender, injectStore } from 'angular-three';
 import { easing } from 'maath';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { BlendFunction, Effect } from 'postprocessing';
 import { Color, Mesh, Texture, Uniform, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer } from 'three';
@@ -145,7 +144,6 @@ const defaultOptions: LensFlareOptions = {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtpLensFlare {
-	private autoEffect = injectAutoEffect();
 	private store = injectStore();
 	private viewport = this.store.select('viewport');
 	private raycaster = this.store.select('raycaster');
@@ -164,15 +162,13 @@ export class NgtpLensFlare {
 	});
 
 	constructor() {
-		afterNextRender(() => {
-			this.autoEffect(() => {
-				const [effect, viewport] = [this.effect(), this.viewport()];
-				const iResolution = effect.uniforms.get('iResolution');
-				if (iResolution) {
-					iResolution.value.x = viewport.width;
-					iResolution.value.y = viewport.height;
-				}
-			});
+		effect(() => {
+			const [lensFlareEffect, viewport] = [this.effect(), this.viewport()];
+			const iResolution = lensFlareEffect.uniforms.get('iResolution');
+			if (iResolution) {
+				iResolution.value.x = viewport.width;
+				iResolution.value.y = viewport.height;
+			}
 		});
 
 		injectBeforeRender(({ delta }) => {
diff --git a/libs/postprocessing/src/lib/effects/lut.ts b/libs/postprocessing/src/lib/effects/lut.ts
@@ -1,13 +1,5 @@
-import {
-	CUSTOM_ELEMENTS_SCHEMA,
-	ChangeDetectionStrategy,
-	Component,
-	afterNextRender,
-	computed,
-	input,
-} from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, computed, effect, input } from '@angular/core';
 import { NgtArgs, injectStore, pick } from 'angular-three';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { BlendFunction, LUT3DEffect } from 'postprocessing';
 import { Texture } from 'three';
 
@@ -28,7 +20,6 @@ export interface LUTOptions {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtpLUT {
-	private autoEffect = injectAutoEffect();
 	private store = injectStore();
 	private invalidate = this.store.select('invalidate');
 
@@ -41,18 +32,16 @@ export class NgtpLUT {
 	});
 
 	constructor() {
-		afterNextRender(() => {
-			this.autoEffect(() => {
-				const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
-					this.effect(),
-					this.options(),
-					this.invalidate(),
-				];
+		effect(() => {
+			const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
+				this.effect(),
+				this.options(),
+				this.invalidate(),
+			];
 
-				if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation;
-				if (lut) effect.lut = lut;
-				invalidate();
-			});
+			if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation;
+			if (lut) effect.lut = lut;
+			invalidate();
 		});
 	}
 }
diff --git a/libs/postprocessing/src/lib/effects/outline.ts b/libs/postprocessing/src/lib/effects/outline.ts
