fix(useEnvironment): remove gainmap from cache after webgl context lost

.storybook/stories/Environment.stories.tsx

@@ -116,3 +116,33 @@ export const EnvironmentSt3 = {
  },
  name: 'Ground',
 } satisfies Story
+
+function EnvironmentScene4(props: ComponentProps<typeof Environment>) {
+ return (
+ <>
+ <Environment {...props} />
+ <mesh>
+ <torusKnotGeometry args={[1, 0.5, 128, 32]} />
+ <meshStandardMaterial metalness={1} roughness={0} />
+ </mesh>
+ <OrbitControls autoRotate />
+ </>
+ )
+}
+
+export const EnvironmentSt4 = {
+ render: (args) => <EnvironmentScene4 {...args} />,
+ args: {
+ files: ['/gainmap/potsdamer_platz_1k.jpg'],
+ background: true,
+ },
+ argTypes: {
+ preset: {
+ options: presets,
+ control: {
+ type: 'select',
+ },
+ },
+ },
+ name: 'Gainmap',
+} satisfies Story

src/core/useEnvironment.tsx

@@ -11,6 +11,7 @@ import { RGBELoader, EXRLoader } from 'three-stdlib'
 import { GainMapLoader, HDRJPGLoader } from '@monogrid/gainmap-js'
 import { presetsObj, PresetsType } from '../helpers/environment-assets'
 import { LinearEncoding, sRGBEncoding, TextureEncoding } from '../helpers/deprecated'
+import { useLayoutEffect } from 'react'
 
 const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/'
 const isArray = (arr: any): arr is string[] => Array.isArray(arr)
@@ -32,7 +33,6 @@ export function useEnvironment({
 }: Partial<EnvironmentLoaderProps> = {}) {
  let loader: typeof Loader | null = null
  let multiFile: boolean = false
- let extension: string | false | undefined
 
  if (preset) {
  if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '))
@@ -46,7 +46,7 @@ export function useEnvironment({
 
  // Everything else
  multiFile = isArray(files)
- extension = isCubemap
+ const extension: string | false | undefined = isCubemap
  ? 'cube'
  : isGainmap
  ? 'webp'
@@ -73,6 +73,19 @@ export function useEnvironment({
  if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files)
 
  const gl = useThree((state) => state.gl)
+
+ useLayoutEffect(() => {
+ // Only required for gainmap
+ if (extension !== 'webp' && extension !== 'jpg' && extension !== 'jpeg') return
+
+ function clearGainmapTexture() {
+ // @ts-expect-error
+ useLoader.clear(loader, multiFile ? [files] : files)
+ }
+
+ gl.domElement.addEventListener('webglcontextlost', clearGainmapTexture, { once: true })
+ }, [files, gl.domElement])
+
  const loaderResult: Texture | Texture[] = useLoader(
  // @ts-expect-error
  loader,