@takram/three-clouds 0.2.2 → 0.4.0

package/src/r3f/CloudLayer.tsx

@@ -1,12 +1,13 @@
 import {
-  forwardRef,
   useContext,
   useEffect,
   useLayoutEffect,
-  useState
+  useState,
+  type FC,
+  type Ref
 } from 'react'
 
-import { type ExpandNestedProps } from '@takram/three-geospatial/r3f'
+import type { ExpandNestedProps } from '@takram/three-geospatial/r3f'
 
 import {
   CloudLayer as CloudLayerImpl,
@@ -18,78 +19,79 @@ import { CloudLayersContext } from './CloudLayers'
 export interface CloudLayerProps
   extends CloudLayerLike,
     ExpandNestedProps<CloudLayerLike, 'densityProfile'> {
+  ref?: Ref<CloudLayerImpl>
   index?: number
 }
 
-export const CloudLayer = forwardRef<CloudLayerImpl, CloudLayerProps>(
-  function CloudLayer({ index: indexProp, ...props }, forwardedRef) {
-    const context = useContext(CloudLayersContext)
-    if (context == null) {
-      throw new Error(
-        'CloudLayer can only be used within the Clouds component!'
-      )
-    }
+export const CloudLayer: FC<CloudLayerProps> = ({
+  ref: forwardedRef,
+  index: indexProp,
+  ...props
+}) => {
+  const context = useContext(CloudLayersContext)
+  if (context == null) {
+    throw new Error('CloudLayer can only be used within the Clouds component!')
+  }
 
-    const { layers, indexPool, disableDefault } = context
-    const [index, setIndex] = useState<number>()
+  const { layers, indexPool, disableDefault } = context
+  const [index, setIndex] = useState<number>()
 
-    useLayoutEffect(() => {
-      if (indexProp != null) {
-        const poolIndex = indexPool.indexOf(indexProp)
-        if (poolIndex !== -1) {
-          indexPool.splice(poolIndex, 1)
-          setIndex(indexProp)
-          return () => {
-            indexPool.push(indexProp)
-            setIndex(undefined)
-          }
+  useLayoutEffect(() => {
+    if (indexProp != null) {
+      const poolIndex = indexPool.indexOf(indexProp)
+      if (poolIndex !== -1) {
+        indexPool.splice(poolIndex, 1)
+        setIndex(indexProp)
+        return () => {
+          indexPool.push(indexProp)
+          setIndex(undefined)
         }
-      } else {
-        // Sorting is just for predictability. Layer order is still not defined,
-        // but it doesn't matter.
-        const index = indexPool.sort((a, b) => a - b).shift()
-        if (index != null) {
-          setIndex(index)
-          return () => {
-            indexPool.push(index)
-            setIndex(undefined)
-          }
-        }
-      }
-    }, [indexProp, layers, indexPool])
-
-    useLayoutEffect(() => {
-      if (index == null) {
-        return
-      }
-      const layer = layers[index]
-      return () => {
-        layer.copy(
-          disableDefault ? CloudLayerImpl.DEFAULT : CloudLayers.DEFAULT[index]
-        )
-      }
-    }, [layers, index, disableDefault])
-
-    useEffect(() => {
-      if (index == null) {
-        return
       }
-      if (typeof forwardedRef === 'function') {
-        forwardedRef(layers[index])
-      } else if (forwardedRef != null) {
-        forwardedRef.current = layers[index]
+    } else {
+      // Sorting is just for predictability. Layer order is still not defined,
+      // but it doesn't matter.
+      const index = indexPool.sort((a, b) => a - b).shift()
+      if (index != null) {
+        setIndex(index)
+        return () => {
+          indexPool.push(index)
+          setIndex(undefined)
+        }
       }
-    }, [forwardedRef, layers, index])
+    }
+  }, [indexProp, layers, indexPool])
 
-    // Surely this resets any modifications made via forwarded ref.
-    if (index != null) {
-      const layer = layers[index]
+  useLayoutEffect(() => {
+    if (index == null) {
+      return
+    }
+    const layer = layers[index]
+    return () => {
       layer.copy(
         disableDefault ? CloudLayerImpl.DEFAULT : CloudLayers.DEFAULT[index]
       )
-      layer.set(props)
     }
+  }, [layers, index, disableDefault])
+
+  useEffect(() => {
+    if (index == null) {
+      return
+    }
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(layers[index])
+    } else if (forwardedRef != null) {
+      forwardedRef.current = layers[index]
+    }
+  }, [forwardedRef, layers, index])
 
-    return null
+  // Surely this resets any modifications made via forwarded ref.
+  if (index != null) {
+    const layer = layers[index]
+    layer.copy(
+      disableDefault ? CloudLayerImpl.DEFAULT : CloudLayers.DEFAULT[index]
+    )
+    layer.set(props)
   }
-)
+
+  return null
+}

package/src/r3f/Clouds.tsx

@@ -1,33 +1,26 @@
 import { useFrame, useThree, type ElementProps } from '@react-three/fiber'
 import { EffectComposerContext } from '@react-three/postprocessing'
+import { useCallback, useContext, useEffect, useMemo, type FC } from 'react'
 import {
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState
-} from 'react'
-import {
+  Data3DTexture,
   LinearFilter,
   LinearMipMapLinearFilter,
   NoColorSpace,
   RedFormat,
   RepeatWrapping,
   TextureLoader,
-  type Data3DTexture,
   type Texture,
   type WebGLRenderer
 } from 'three'
 
 import { AtmosphereContext, separateProps } from '@takram/three-atmosphere/r3f'
 import {
-  createData3DTextureLoaderClass,
+  DataTextureLoader,
   DEFAULT_STBN_URL,
   parseUint8Array,
   STBNLoader
 } from '@takram/three-geospatial'
-import { type ExpandNestedProps } from '@takram/three-geospatial/r3f'
+import type { ExpandNestedProps } from '@takram/three-geospatial/r3f'
 
 import {
   CloudsEffect,
@@ -42,94 +35,86 @@ import {
   DEFAULT_SHAPE_URL,
   DEFAULT_TURBULENCE_URL
 } from '../constants'
-import { type Procedural3DTexture } from '../Procedural3DTexture'
-import { type ProceduralTexture } from '../ProceduralTexture'
+import type { Procedural3DTexture } from '../Procedural3DTexture'
+import type { ProceduralTexture } from '../ProceduralTexture'
 import { CloudLayers } from './CloudLayers'
 
-function useTextureState(
+function useLoadTexture(
   input: string | Texture | ProceduralTexture,
   gl: WebGLRenderer
 ): Texture | ProceduralTexture | null {
-  const [data, setData] = useState(typeof input !== 'string' ? input : null)
+  const loadedTexture = useMemo(
+    () =>
+      typeof input === 'string'
+        ? new TextureLoader().load(input, texture => {
+            texture.minFilter = LinearMipMapLinearFilter
+            texture.magFilter = LinearFilter
+            texture.wrapS = RepeatWrapping
+            texture.wrapT = RepeatWrapping
+            texture.colorSpace = NoColorSpace
+            texture.needsUpdate = true
+          })
+        : undefined,
+    [input]
+  )
   useEffect(() => {
-    if (typeof input === 'string') {
-      const loader = new TextureLoader()
-      ;(async () => {
-        const texture = await loader.loadAsync(input)
-        texture.minFilter = LinearMipMapLinearFilter
-        texture.magFilter = LinearFilter
-        texture.wrapS = RepeatWrapping
-        texture.wrapT = RepeatWrapping
-        texture.colorSpace = NoColorSpace
-        texture.needsUpdate = true
-
-        // WORKAROUND: The color space resets to sRGB for unknown reason, unless
-        // the texture is initialized here.
-        gl.initTexture(texture)
-
-        setData(texture)
-      })().catch(error => {
-        console.error(error)
-      })
-    } else {
-      setData(input)
+    if (loadedTexture != null) {
+      return () => {
+        loadedTexture.dispose()
+      }
     }
-  }, [input, gl])
-
-  return data
+  }, [loadedTexture])
+  return (typeof input === 'string' ? loadedTexture : input) ?? null
 }
 
-function use3DTextureState(
+function useLoad3DTexture(
   input: string | Data3DTexture | Procedural3DTexture,
   size: number
 ): Data3DTexture | Procedural3DTexture | null {
-  const [data, setData] = useState(typeof input !== 'string' ? input : null)
+  const loadedTexture = useMemo(
+    () =>
+      typeof input === 'string'
+        ? new DataTextureLoader(Data3DTexture, parseUint8Array, {
+            width: size,
+            height: size,
+            depth: size,
+            format: RedFormat,
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            wrapS: RepeatWrapping,
+            wrapT: RepeatWrapping,
+            wrapR: RepeatWrapping,
+            colorSpace: NoColorSpace
+          }).load(input)
+        : undefined,
+    [input, size]
+  )
   useEffect(() => {
-    if (typeof input === 'string') {
-      const Loader = createData3DTextureLoaderClass(parseUint8Array, {
-        width: size,
-        height: size,
-        depth: size,
-        format: RedFormat,
-        minFilter: LinearFilter,
-        magFilter: LinearFilter,
-        wrapS: RepeatWrapping,
-        wrapT: RepeatWrapping,
-        wrapR: RepeatWrapping,
-        colorSpace: NoColorSpace
-      })
-      const loader = new Loader()
-      ;(async () => {
-        setData(await loader.loadAsync(input))
-      })().catch(error => {
-        console.error(error)
-      })
-    } else {
-      setData(input)
+    if (loadedTexture != null) {
+      return () => {
+        loadedTexture.dispose()
+      }
     }
-  }, [input, size])
-
-  return data
+  }, [loadedTexture])
+  return (typeof input === 'string' ? loadedTexture : input) ?? null
 }
 
-function useSTBNTextureState(
+function useLoadSTBNTexture(
   input: string | Data3DTexture
 ): Data3DTexture | null {
-  const [data, setData] = useState(typeof input !== 'string' ? input : null)
+  const loadedTexture = useMemo(
+    () =>
+      typeof input === 'string' ? new STBNLoader().load(input) : undefined,
+    [input]
+  )
   useEffect(() => {
-    if (typeof input === 'string') {
-      const loader = new STBNLoader()
-      ;(async () => {
-        setData(await loader.loadAsync(input))
-      })().catch(error => {
-        console.error(error)
-      })
-    } else {
-      setData(input)
+    if (loadedTexture != null) {
+      return () => {
+        loadedTexture.dispose()
+      }
     }
-  }, [input])
-
-  return data
+  }, [loadedTexture])
+  return (typeof input === 'string' ? loadedTexture : input) ?? null
 }
 
 export interface CloudsProps
@@ -154,119 +139,116 @@ export interface CloudsProps
   stbnTexture?: Data3DTexture | string
 }
 
-export const Clouds = /*#__PURE__*/ forwardRef<CloudsEffect, CloudsProps>(
-  function Clouds(
-    {
-      disableDefaultLayers = false,
-      localWeatherTexture: localWeatherTextureProp = DEFAULT_LOCAL_WEATHER_URL,
-      shapeTexture: shapeTextureProp = DEFAULT_SHAPE_URL,
-      shapeDetailTexture: shapeDetailTextureProp = DEFAULT_SHAPE_DETAIL_URL,
-      turbulenceTexture: turbulenceTextureProp = DEFAULT_TURBULENCE_URL,
-      stbnTexture: stbnTextureProp = DEFAULT_STBN_URL,
-      children,
-      ...props
-    },
-    forwardedRef
-  ) {
-    const { textures, transientStates, ...contextProps } =
-      useContext(AtmosphereContext)
+export const Clouds: FC<CloudsProps> = ({
+  ref: forwardedRef,
+  disableDefaultLayers = false,
+  localWeatherTexture: localWeatherTextureProp = DEFAULT_LOCAL_WEATHER_URL,
+  shapeTexture: shapeTextureProp = DEFAULT_SHAPE_URL,
+  shapeDetailTexture: shapeDetailTextureProp = DEFAULT_SHAPE_DETAIL_URL,
+  turbulenceTexture: turbulenceTextureProp = DEFAULT_TURBULENCE_URL,
+  stbnTexture: stbnTextureProp = DEFAULT_STBN_URL,
+  children,
+  ...props
+}) => {
+  const { textures, transientStates, ...contextProps } =
+    useContext(AtmosphereContext)
+
+  const [atmosphereParameters, others] = separateProps({
+    ...cloudsPassOptionsDefaults,
+    ...contextProps,
+    ...textures,
+    ...props
+  })
+
+  const effect = useMemo(() => new CloudsEffect(), [])
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
 
-    const [atmosphereParameters, others] = separateProps({
-      ...cloudsPassOptionsDefaults,
-      ...contextProps,
-      ...textures,
-      ...props
-    })
+  useFrame(() => {
+    if (transientStates != null) {
+      effect.sunDirection.copy(transientStates.sunDirection)
+      effect.ellipsoidCenter.copy(transientStates.ellipsoidCenter)
+      effect.ellipsoidMatrix.copy(transientStates.ellipsoidMatrix)
+    }
+  })
 
-    const effect = useMemo(() => new CloudsEffect(), [])
-    useEffect(() => {
+  useEffect(() => {
+    if (transientStates != null) {
+      transientStates.overlay = effect.atmosphereOverlay
+      transientStates.shadow = effect.atmosphereShadow
+      transientStates.shadowLength = effect.atmosphereShadowLength
       return () => {
-        effect.dispose()
+        transientStates.overlay = null
+        transientStates.shadow = null
+        transientStates.shadowLength = null
       }
-    }, [effect])
-
-    useFrame(() => {
-      if (transientStates != null) {
-        effect.sunDirection.copy(transientStates.sunDirection)
-        effect.ellipsoidCenter.copy(transientStates.ellipsoidCenter)
-        effect.ellipsoidMatrix.copy(transientStates.ellipsoidMatrix)
-      }
-    })
+    }
+  }, [effect, transientStates])
 
-    useEffect(() => {
-      if (transientStates != null) {
-        transientStates.overlay = effect.atmosphereOverlay
-        transientStates.shadow = effect.atmosphereShadow
-        transientStates.shadowLength = effect.atmosphereShadowLength
-        return () => {
-          transientStates.overlay = null
-          transientStates.shadow = null
-          transientStates.shadowLength = null
-        }
+  const handleChange = useCallback(
+    (event: CloudsEffectChangeEvent) => {
+      if (transientStates == null) {
+        return
       }
-    }, [effect, transientStates])
-
-    const handleChange = useCallback(
-      (event: CloudsEffectChangeEvent) => {
-        if (transientStates == null) {
-          return
-        }
-        switch (event.property) {
-          case 'atmosphereOverlay':
-            transientStates.overlay = effect.atmosphereOverlay
-            break
-          case 'atmosphereShadow':
-            transientStates.shadow = effect.atmosphereShadow
-            break
-          case 'atmosphereShadowLength':
-            transientStates.shadowLength = effect.atmosphereShadowLength
-            break
-        }
-      },
-      [effect, transientStates]
-    )
-    useEffect(() => {
-      effect.events.addEventListener('change', handleChange)
-      return () => {
-        effect.events.removeEventListener('change', handleChange)
+      switch (event.property) {
+        case 'atmosphereOverlay':
+          transientStates.overlay = effect.atmosphereOverlay
+          break
+        case 'atmosphereShadow':
+          transientStates.shadow = effect.atmosphereShadow
+          break
+        case 'atmosphereShadowLength':
+          transientStates.shadowLength = effect.atmosphereShadowLength
+          break
+        default:
       }
-    }, [effect, handleChange])
-
-    const gl = useThree(({ gl }) => gl)
-    const localWeatherTexture = useTextureState(localWeatherTextureProp, gl)
-    const shapeTexture = use3DTextureState(
-      shapeTextureProp,
-      CLOUD_SHAPE_TEXTURE_SIZE
-    )
-    const shapeDetailTexture = use3DTextureState(
-      shapeDetailTextureProp,
-      CLOUD_SHAPE_DETAIL_TEXTURE_SIZE
-    )
-    const turbulenceTexture = useTextureState(turbulenceTextureProp, gl)
-    const stbnTexture = useSTBNTextureState(stbnTextureProp)
-
-    const { camera } = useContext(EffectComposerContext)
-    return (
-      <>
-        <primitive
-          ref={forwardedRef}
-          object={effect}
-          mainCamera={camera}
-          {...atmosphereParameters}
-          localWeatherTexture={localWeatherTexture}
-          shapeTexture={shapeTexture}
-          shapeDetailTexture={shapeDetailTexture}
-          turbulenceTexture={turbulenceTexture}
-          stbnTexture={stbnTexture}
-          {...others}
-        />
-        <CloudLayers
-          layers={effect.cloudLayers}
-          disableDefault={disableDefaultLayers}
-        >
-          {children}
-        </CloudLayers>
-      </>
-    )
-  }
-)
+    },
+    [effect, transientStates]
+  )
+  useEffect(() => {
+    effect.events.addEventListener('change', handleChange)
+    return () => {
+      effect.events.removeEventListener('change', handleChange)
+    }
+  }, [effect, handleChange])
+
+  const renderer = useThree(({ gl }) => gl)
+  const localWeatherTexture = useLoadTexture(localWeatherTextureProp, renderer)
+  const shapeTexture = useLoad3DTexture(
+    shapeTextureProp,
+    CLOUD_SHAPE_TEXTURE_SIZE
+  )
+  const shapeDetailTexture = useLoad3DTexture(
+    shapeDetailTextureProp,
+    CLOUD_SHAPE_DETAIL_TEXTURE_SIZE
+  )
+  const turbulenceTexture = useLoadTexture(turbulenceTextureProp, renderer)
+  const stbnTexture = useLoadSTBNTexture(stbnTextureProp)
+
+  const { camera } = useContext(EffectComposerContext)
+  return (
+    <>
+      <primitive
+        ref={forwardedRef}
+        object={effect}
+        mainCamera={camera}
+        {...atmosphereParameters}
+        localWeatherTexture={localWeatherTexture}
+        shapeTexture={shapeTexture}
+        shapeDetailTexture={shapeDetailTexture}
+        turbulenceTexture={turbulenceTexture}
+        stbnTexture={stbnTexture}
+        {...others}
+      />
+      <CloudLayers
+        layers={effect.cloudLayers}
+        disableDefault={disableDefaultLayers}
+      >
+        {children}
+      </CloudLayers>
+    </>
+  )
+}