fix(soba): unwrap afterNextRender in injectEnvironment and

nartc · nartc · commit 47dba5712f8f · 2024-08-18T23:44:02.000-05:00
`injectNormalTexture`

BREAKING CHANGE: this is considered a breaking change because of timing
for unwrapping `afterNextRender`

The consumers can migrate these CIFs with the following decision making
guidances:

- If the result of the **CIFs** are used as bindings on the template,
   there's no need to change anything. This also applies to `computed`
  using these result and the computed(s) are used as bindings on the
  template.

- If the result of the **CIFs** are used in a side-effects, then the
  consumers need to make sure the parameters to these **CIFs** have
  a chance to resolve (i.e: `input` and `afterNextRender`; this was the
  reason `afterNextRender` was used internally). In addition, the
  consumers also need to make sure the **CIFs** are invoked in an
  Injection Context.
diff --git a/libs/soba/staging/src/lib/environment.ts b/libs/soba/staging/src/lib/environment.ts
@@ -11,6 +11,7 @@ import {
 	afterNextRender,
 	computed,
 	contentChild,
+	effect,
 	inject,
 	input,
 	output,
@@ -165,6 +166,7 @@ export function injectEnvironment(
 							: firstEntry.startsWith('data:image/jpeg')
 								? 'jpg'
 								: firstEntry.split('.').pop()?.split('?')?.shift()?.toLowerCase();
+
 			return { multiFile, extension, isCubeMap };
 		});
 
@@ -190,74 +192,79 @@ export function injectEnvironment(
 			return loader as typeof Loader;
 		});
 
-		const assertedInjector = inject(Injector);
-		const autoEffect = injectAutoEffect();
 		const store = injectStore();
 		const gl = store.select('gl');
 
 		const texture = signal<Texture | CubeTexture | null>(null);
-		afterNextRender(() => {
-			autoEffect(() => {
-				const [{ extension, multiFile }, _files] = [untracked(resultOptions), files()];
-
-				if (extension !== 'webp' && extension !== 'jpg' && extension !== 'jpeg') return;
-
-				gl().domElement.addEventListener(
-					'webglcontextlost',
-					() => {
-						// @ts-expect-error - files is correctly passed
-						injectLoader.clear(multiFile ? [_files] : _files);
-					},
-					{ once: true },
-				);
-			});
 
-			const result = injectLoader(
-				loader,
-				// @ts-expect-error - ensure the files is an array
+		effect(() => {
+			const [{ extension, multiFile }, _files] = [untracked(resultOptions), files()];
+
+			if (extension !== 'webp' && extension !== 'jpg' && extension !== 'jpeg') return;
+
+			gl().domElement.addEventListener(
+				'webglcontextlost',
 				() => {
-					const { files } = adjustedOptions();
-					return Array.isArray(files) ? [files] : files;
-				},
-				{
-					injector: assertedInjector,
-					extensions: (loader) => {
-						const { extensions, path } = adjustedOptions();
-						const { extension } = resultOptions();
-						if (extension === 'webp' || extension === 'jpg' || extension === 'jpeg') {
-							// @ts-expect-error - Gainmap requires a renderer
-							loader.setRenderer(gl());
-						}
-
-						loader.setPath?.(path);
-						if (extensions) extensions(loader);
-					},
+					// @ts-expect-error - files is correctly passed
+					injectLoader.clear(multiFile ? [_files] : _files);
 				},
+				{ once: true },
 			);
+		});
+
+		const result = injectLoader(
+			loader,
+			// @ts-expect-error - ensure the files is an array
+			() => {
+				const { files } = adjustedOptions();
+				return Array.isArray(files) ? [files] : files;
+			},
+			{
+				extensions: (loader) => {
+					const { extensions, path } = adjustedOptions();
+					const { extension } = resultOptions();
+					if (extension === 'webp' || extension === 'jpg' || extension === 'jpeg') {
+						// @ts-expect-error - Gainmap requires a renderer
+						loader.setRenderer(gl());
+					}
+
+					loader.setPath?.(path);
+					if (extensions) extensions(loader);
+				},
+			},
+		);
 
-			autoEffect(() => {
-				const loaderResult = result();
-				if (!loaderResult) return;
+		effect(() => {
+			const loaderResult = result();
+			if (!loaderResult) return;
 
-				untracked(() => {
-					const { multiFile, extension, isCubeMap } = resultOptions();
-					const { encoding } = adjustedOptions();
+			untracked(() => {
+				const { multiFile, extension, isCubeMap } = resultOptions();
+				const { encoding } = adjustedOptions();
 
-					// @ts-expect-error - ensure textureResult is a Texture or CubeTexture
-					let textureResult = (multiFile ? loaderResult[0] : loaderResult) as Texture | CubeTexture;
+				// @ts-expect-error - ensure textureResult is a Texture or CubeTexture
+				let textureResult = (multiFile ? loaderResult[0] : loaderResult) as Texture | CubeTexture;
 
-					if (extension === 'jpg' || extension === 'jpeg' || extension === 'webp') {
-						textureResult = (textureResult as any).renderTarget?.texture;
-					}
+				// NOTE: racing condition, we can skip this
+				//  we just said above that if multiFile is false, it is a single Texture
+				if (!multiFile && Array.isArray(textureResult) && textureResult[0] instanceof CubeTexture) {
+					return;
+				}
+
+				if (
+					!(textureResult instanceof CubeTexture) &&
+					(extension === 'jpg' || extension === 'jpeg' || extension === 'webp')
+				) {
+					textureResult = (textureResult as any).renderTarget?.texture;
+				}
 
-					textureResult.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
+				textureResult.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
 
-					if ('colorSpace' in textureResult)
-						(textureResult as any).colorSpace = encoding ?? (isCubeMap ? 'srgb' : 'srgb-linear');
-					else (textureResult as any).encoding = encoding ?? (isCubeMap ? sRGBEncoding : LinearEncoding);
+				if ('colorSpace' in textureResult)
+					(textureResult as any).colorSpace = encoding ?? (isCubeMap ? 'srgb' : 'srgb-linear');
+				else (textureResult as any).encoding = encoding ?? (isCubeMap ? sRGBEncoding : LinearEncoding);
 
-					texture.set(textureResult);
-				});
+				texture.set(textureResult);
 			});
 		});
 
@@ -295,11 +302,11 @@ export class NgtsEnvironmentMap {
 	options = input(defaultBackground, { transform: mergeInputs(defaultBackground) });
 	envSet = output<void>();
 
-	autoEffect = injectAutoEffect();
-	store = injectStore();
-	defaultScene = this.store.select('scene');
+	private autoEffect = injectAutoEffect();
+	private store = injectStore();
+	private defaultScene = this.store.select('scene');
 
-	envConfig = computed(() => {
+	private envConfig = computed(() => {
 		const {
 			background = false,
 			scene,
@@ -323,7 +330,7 @@ export class NgtsEnvironmentMap {
 		};
 	});
 
-	map = pick(this.options, 'map');
+	private map = pick(this.options, 'map');
 
 	constructor() {
 		afterNextRender(() => {
@@ -344,11 +351,12 @@ export class NgtsEnvironmentCube {
 	options = input(defaultBackground, { transform: mergeInputs(defaultBackground) });
 	envSet = output<void>();
 
-	autoEffect = injectAutoEffect();
-	store = injectStore();
-	defaultScene = this.store.select('scene');
+	private autoEffect = injectAutoEffect();
+	private store = injectStore();
+	private defaultScene = this.store.select('scene');
+	private injector = inject(Injector);
 
-	envConfig = computed(() => {
+	private envConfig = computed(() => {
 		const {
 			background = false,
 			scene,
@@ -372,16 +380,12 @@ export class NgtsEnvironmentCube {
 		};
 	});
 
-	environmentOptions = computed(() => {
-		const { encoding, preset, files, path, extensions } = this.options();
-		return { encoding, preset, files, path, extensions };
-	});
-	texture = injectEnvironment(this.environmentOptions);
-
 	constructor() {
 		afterNextRender(() => {
+			const _texture = injectEnvironment(this.options, { injector: this.injector });
+
 			this.autoEffect(() => {
-				const texture = this.texture();
+				const texture = _texture();
 				if (!texture) return;
 				const { background = false, scene, ...config } = this.envConfig();
 				const cleanup = setEnvProps(background, scene, this.defaultScene(), texture, config);
@@ -553,21 +557,35 @@ export class NgtsEnvironmentGround {
 	options = input({} as NgtsEnvironmentOptions);
 	envSet = output<void>();
 
-	private defaultTexture = injectEnvironment(this.options);
-	private texture = computed(() => this.options().map || this.defaultTexture());
+	args = signal<[Texture | null]>([null]);
 
-	args = computed(() => [this.texture()]);
 	height = computed(() => (this.options().ground as any)?.height);
 	radius = computed(() => (this.options().ground as any)?.radius);
 	scale = computed(() => (this.options().ground as any)?.scale ?? 1000);
 
 	envMapOptions = computed(() => {
 		const { map: _, ...options } = this.options();
-		return Object.assign(options, { map: this.texture() }) as NgtsEnvironmentOptions;
+		const [map] = this.args();
+		return Object.assign(options, { map }) as NgtsEnvironmentOptions;
 	});
 
 	constructor() {
 		extend({ GroundProjectedEnv });
+
+		const injector = inject(Injector);
+		const autoEffect = injectAutoEffect();
+
+		afterNextRender(() => {
+			const defaultTexture = injectEnvironment(this.options, { injector });
+			const texture = computed(() => this.options().map || defaultTexture());
+
+			autoEffect(
+				() => {
+					this.args.set([texture()]);
+				},
+				{ allowSignalWrites: true },
+			);
+		});
 	}
 }
 
diff --git a/libs/soba/staging/src/lib/normal-texture.ts b/libs/soba/staging/src/lib/normal-texture.ts
@@ -8,6 +8,7 @@ import {
 	ViewContainerRef,
 	afterNextRender,
 	computed,
+	effect,
 	inject,
 	input,
 	output,
@@ -16,7 +17,6 @@ import {
 } from '@angular/core';
 import { injectTexture } from 'angular-three-soba/loaders';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { injectAutoEffect } from 'ngxtension/auto-effect';
 import { RepeatWrapping, Texture, Vector2 } from 'three';
 
 const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
@@ -37,8 +37,6 @@ export function injectNormalTexture(
 	}: { settings?: () => NgtsNormalTextureSettings; onLoad?: (texture: Texture[]) => void; injector?: Injector },
 ) {
 	return assertInjector(injectNormalTexture, injector, () => {
-		const autoEffect = injectAutoEffect();
-
 		const normalList = signal<Record<string, string>>({});
 
 		fetch(LIST_URL)
@@ -68,17 +66,15 @@ export function injectNormalTexture(
 
 		const normalTexture = injectTexture(url, { onLoad });
 
-		afterNextRender(() => {
-			autoEffect(() => {
-				const texture = normalTexture();
-				if (!texture) return;
-
-				const { anisotropy = 1, repeat = [1, 1], offset = [0, 0] } = settings();
-				texture.wrapS = texture.wrapT = RepeatWrapping;
-				texture.repeat = new Vector2(repeat[0], repeat[1]);
-				texture.offset = new Vector2(offset[0], offset[1]);
-				texture.anisotropy = anisotropy;
-			});
+		effect(() => {
+			const texture = normalTexture();
+			if (!texture) return;
+
+			const { anisotropy = 1, repeat = [1, 1], offset = [0, 0] } = settings();
+			texture.wrapS = texture.wrapT = RepeatWrapping;
+			texture.repeat = new Vector2(repeat[0], repeat[1]);
+			texture.offset = new Vector2(offset[0], offset[1]);
+			texture.anisotropy = anisotropy;
 		});
 
 		return { url, texture: normalTexture, numTot };
diff --git a/libs/soba/staging/src/lib/render-texture.ts b/libs/soba/staging/src/lib/render-texture.ts
@@ -198,7 +198,7 @@ export class NgtsRenderTexture {
 	eventPriority = pick(this.options, 'eventPriority');
 	compute = computed(() => this.options().compute || this.uvCompute);
 
-	uvCompute: NgtComputeFunction = (event, root, previous) => {
+	private uvCompute: NgtComputeFunction = (event, root, previous) => {
 		const fbo = this.fbo();
 		if (!fbo) return;
 		const state = root.snapshot;
diff --git a/libs/soba/staging/src/lib/spot-light.ts b/libs/soba/staging/src/lib/spot-light.ts
