clear cached for gainmap env

Author: nartc

libs/core/src/lib/loader.ts

@@ -166,5 +166,12 @@ _injectLoader.destroy = () => {
 	cached.clear();
 };
 
+_injectLoader.clear = (urls: string | string[]) => {
+	const urlToClear = Array.isArray(urls) ? urls : [urls];
+	urlToClear.forEach((url) => {
+		cached.delete(url);
+	});
+};
+
 export type NgtInjectedLoader = typeof _injectLoader;
 export const injectLoader: NgtInjectedLoader = _injectLoader;

libs/soba/.storybook/public/cube/nx.png

@@ -26,21 +26,6 @@ import { makeDecorators, makeStoryObject, number, select } from '../setup-canvas
 })
 class Torus {}
 
-@Component({
-	standalone: true,
-	template: `
-		<ngts-environment [options]="options()" />
-		<environment-torus />
-		<ngts-orbit-controls [options]="{ autoRotate: true }" />
-	`,
-	imports: [Torus, NgtsEnvironment, NgtsOrbitControls],
-	schemas: [CUSTOM_ELEMENTS_SCHEMA],
-	changeDetection: ChangeDetectionStrategy.OnPush,
-})
-class FilesEnvironmentStory {
-	options = input({} as NgtsEnvironmentOptions);
-}
-
 @Component({
 	standalone: true,
 	template: `
@@ -72,13 +57,23 @@ export const Default = makeStoryObject(DefaultEnvironmentStory, {
 	},
 });
 
-export const Files = makeStoryObject(FilesEnvironmentStory, {
+export const Files = makeStoryObject(DefaultEnvironmentStory, {
 	canvasOptions: { controls: false, camera: { position: [0, 0, 10] } },
 	argsOptions: {
 		options: {
 			background: true,
 			files: ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'],
-			path: 'https://drei.pmnd.rs/cube/',
+			path: './cube/',
+		},
+	},
+});
+
+export const GainMap = makeStoryObject(DefaultEnvironmentStory, {
+	canvasOptions: { controls: false, camera: { position: [0, 0, 10] } },
+	argsOptions: {
+		options: {
+			files: ['./gainmap/potsdamer_platz_1k.jpg'],
+			background: true,
 		},
 	},
 });

libs/soba/.storybook/public/cube/ny.png

@@ -143,6 +143,8 @@ export function injectEnvironment(
 			return { files, preset, encoding, path, extensions };
 		});
 
+		const files = pick(adjustedOptions, 'files');
+
 		const resultOptions = computed(() => {
 			const { files } = adjustedOptions();
 			const multiFile = Array.isArray(files);
@@ -194,6 +196,21 @@ export function injectEnvironment(
 
 		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
@@ -216,7 +233,7 @@ export function injectEnvironment(
 					},
 				},
 			);
-			//
+
 			autoEffect(() => {
 				const loaderResult = result();
 				if (!loaderResult) return;
@@ -235,8 +252,8 @@ export function injectEnvironment(
 					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;
+						(textureResult as any).colorSpace = encoding ?? (isCubeMap ? 'srgb' : 'srgb-linear');
+					else (textureResult as any).encoding = encoding ?? (isCubeMap ? sRGBEncoding : LinearEncoding);
 
 					texture.set(textureResult);
 				});