@takram/three-clouds 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takram/three-clouds",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A Three.js and R3F implementation of geospatial volumetric clouds",
   "keywords": [
     "three",
@@ -45,8 +45,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@takram/three-atmosphere": "0.11.1",
-    "@takram/three-geospatial": "0.2.0",
+    "@takram/three-atmosphere": "0.12.0",
+    "@takram/three-geospatial": "0.2.2",
     "tiny-invariant": "^1.3.3",
     "type-fest": "^4.34.1"
   },

package/src/CloudsEffect.ts

@@ -82,7 +82,9 @@ const cloudsUniformKeys = [
   'minShadowLengthStepSize',
   'maxShadowLengthRayDistance',
   'hazeDensityScale',
-  'hazeExponent'
+  'hazeExponent',
+  'hazeScatteringCoefficient',
+  'hazeAbsorptionCoefficient'
 ] as const satisfies Array<keyof CloudsMaterialUniforms>
 
 // prettier-ignore

package/src/CloudsMaterial.ts

@@ -97,7 +97,6 @@ export interface CloudsMaterialUniforms
   stbnTexture: Uniform<Data3DTexture | null>
 
   // Scattering
-  albedo: Uniform<Vector3>
   skyIrradianceScale: Uniform<number>
   groundIrradianceScale: Uniform<number>
   powderScale: Uniform<number>
@@ -135,6 +134,8 @@ export interface CloudsMaterialUniforms
   // Haze
   hazeDensityScale: Uniform<number>
   hazeExponent: Uniform<number>
+  hazeScatteringCoefficient: Uniform<number>
+  hazeAbsorptionCoefficient: Uniform<number>
 }
 
 export class CloudsMaterial extends AtmosphereMaterialBase {
@@ -207,9 +208,8 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
           stbnTexture: new Uniform(null),
 
           // Scattering
-          albedo: new Uniform(new Vector3()),
-          skyIrradianceScale: new Uniform(2.5),
-          groundIrradianceScale: new Uniform(3),
+          skyIrradianceScale: new Uniform(1),
+          groundIrradianceScale: new Uniform(1),
           powderScale: new Uniform(0.8),
           powderExponent: new Uniform(150),
 
@@ -249,7 +249,9 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
 
           // Haze
           hazeDensityScale: new Uniform(3e-5),
-          hazeExponent: new Uniform(1e-3)
+          hazeExponent: new Uniform(1e-3),
+          hazeScatteringCoefficient: new Uniform(0.9),
+          hazeAbsorptionCoefficient: new Uniform(0.5),
         } satisfies Partial<AtmosphereMaterialBaseUniforms> &
           CloudsMaterialUniforms
       },
@@ -268,12 +270,16 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
     // Disable onBeforeRender in AtmosphereMaterialBase because we're rendering
     // into fullscreen quad with another camera for the scene projection.
 
-    const uniforms = this.uniforms
-    uniforms.albedo.value.setScalar(
-      uniforms.scatteringCoefficient.value /
-        (uniforms.absorptionCoefficient.value +
-          uniforms.scatteringCoefficient.value)
-    )
+    const prevLogarithmicDepthBuffer = this.defines.USE_LOGDEPTHBUF != null
+    const nextLogarithmicDepthBuffer =
+      renderer.capabilities.logarithmicDepthBuffer
+    if (nextLogarithmicDepthBuffer !== prevLogarithmicDepthBuffer) {
+      if (nextLogarithmicDepthBuffer) {
+        this.defines.USE_LOGDEPTHBUF = '1'
+      } else {
+        delete this.defines.USE_LOGDEPTHBUF
+      }
+    }
 
     const prevPowder = this.defines.POWDER != null
     const nextPowder = this.uniforms.powderScale.value > 0

package/src/r3f/CloudLayer.tsx

@@ -1,9 +1,10 @@
 import {
-  forwardRef,
   useContext,
   useEffect,
   useLayoutEffect,
-  useState
+  useState,
+  type FC,
+  type Ref
 } from 'react'
 
 import { type ExpandNestedProps } from '@takram/three-geospatial/r3f'
@@ -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,12 +1,12 @@
 import { useFrame, useThree, type ElementProps } from '@react-three/fiber'
 import { EffectComposerContext } from '@react-three/postprocessing'
 import {
-  forwardRef,
   useCallback,
   useContext,
   useEffect,
   useMemo,
-  useState
+  useState,
+  type FC
 } from 'react'
 import {
   LinearFilter,
@@ -154,119 +154,115 @@ 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 [atmosphereParameters, others] = separateProps({
+    ...cloudsPassOptionsDefaults,
+    ...contextProps,
+    ...textures,
+    ...props
+  })
 
-    const effect = useMemo(() => new CloudsEffect(), [])
-    useEffect(() => {
-      return () => {
-        effect.dispose()
-      }
-    }, [effect])
+  const effect = useMemo(() => new CloudsEffect(), [])
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
 
-    useFrame(() => {
-      if (transientStates != null) {
-        effect.sunDirection.copy(transientStates.sunDirection)
-        effect.ellipsoidCenter.copy(transientStates.ellipsoidCenter)
-        effect.ellipsoidMatrix.copy(transientStates.ellipsoidMatrix)
-      }
-    })
+  useFrame(() => {
+    if (transientStates != null) {
+      effect.sunDirection.copy(transientStates.sunDirection)
+      effect.ellipsoidCenter.copy(transientStates.ellipsoidCenter)
+      effect.ellipsoidMatrix.copy(transientStates.ellipsoidMatrix)
+    }
+  })
 
-    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
-        }
+  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
       }
-    }, [effect, transientStates])
+    }
+  }, [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)
+  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, handleChange])
+    },
+    [effect, transientStates]
+  )
+  useEffect(() => {
+    effect.events.addEventListener('change', handleChange)
+    return () => {
+      effect.events.removeEventListener('change', handleChange)
+    }
+  }, [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 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>
-      </>
-    )
-  }
-)
+  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>
+    </>
+  )
+}

package/src/shaders/clouds.frag

@@ -418,6 +418,7 @@ vec3 getGroundSunSkyIrradiance(
   #ifdef ACCURATE_SUN_SKY_IRRADIANCE
   return GetSunAndSkyIrradiance(
     (position - surfaceNormal * height) * METER_TO_LENGTH_UNIT,
+    surfaceNormal,
     sunDirection,
     skyIrradiance
   );
@@ -429,7 +430,11 @@ vec3 getGroundSunSkyIrradiance(
 
 vec3 getCloudsSunSkyIrradiance(const vec3 position, const float height, out vec3 skyIrradiance) {
   #ifdef ACCURATE_SUN_SKY_IRRADIANCE
-  return GetSunAndSkyIrradiance(position * METER_TO_LENGTH_UNIT, sunDirection, skyIrradiance);
+  return GetSunAndSkyIrradianceForParticle(
+    position * METER_TO_LENGTH_UNIT,
+    sunDirection,
+    skyIrradiance
+  );
   #else // ACCURATE_SUN_SKY_IRRADIANCE
   float alpha = remapClamped(height, minHeight, maxHeight);
   skyIrradiance = mix(vCloudsIrradiance.minSky, vCloudsIrradiance.maxSky, alpha);
@@ -455,10 +460,9 @@ vec3 approximateIrradianceFromGround(
   vec3 skyIrradiance;
   vec3 sunIrradiance = getGroundSunSkyIrradiance(position, surfaceNormal, height, skyIrradiance);
   const float groundAlbedo = 0.3;
-  vec3 groundIrradiance = skyIrradiance + (1.0 - coverage) * sunIrradiance * RECIPROCAL_PI2;
-  vec3 bouncedLight = groundAlbedo * RECIPROCAL_PI * groundIrradiance;
-  vec3 bouncedIrradiance = bouncedLight * exp(-opticalDepthToGround);
-  return albedo * bouncedIrradiance * RECIPROCAL_PI4 * groundIrradianceScale;
+  vec3 groundIrradiance = skyIrradiance + (1.0 - coverage) * sunIrradiance;
+  vec3 bouncedRadiance = groundAlbedo * RECIPROCAL_PI * groundIrradiance;
+  return bouncedRadiance * exp(-opticalDepthToGround);
 }
 #endif // GROUND_IRRADIANCE
 
@@ -548,28 +552,28 @@ vec4 marchClouds(
         );
       }
 
-      float scattering = approximateMultipleScattering(opticalDepth, cosTheta);
-      vec3 radiance = albedo * sunIrradiance * scattering;
+      vec3 radiance = sunIrradiance * approximateMultipleScattering(opticalDepth, cosTheta);
 
       #ifdef GROUND_IRRADIANCE
       // Fudge factor for the irradiance from ground.
       if (height < shadowTopHeight && mipLevel < 0.5) {
-        radiance += approximateIrradianceFromGround(
+        vec3 groundIrradiance = approximateIrradianceFromGround(
           position,
           surfaceNormal,
           height,
           mipLevel,
           jitter
         );
+        radiance += groundIrradiance * RECIPROCAL_PI4 * groundIrradianceScale;
       }
       #endif // GROUND_IRRADIANCE
 
       // Crude approximation of sky gradient. Better than none in the shadows.
-      float skyGradient = dot(0.5 + weather.heightFraction, media.weight);
-      radiance += albedo * skyIrradiance * RECIPROCAL_PI4 * skyGradient * skyIrradianceScale;
+      float skyGradient = dot(weather.heightFraction * 0.5 + 0.5, media.weight);
+      radiance += skyIrradiance * RECIPROCAL_PI4 * skyGradient * skyIrradianceScale;
 
-      // Finally multiply by extinction (redundant but kept for clarity).
-      radiance *= media.extinction;
+      // Finally multiply by scattering.
+      radiance *= media.scattering;
 
       #ifdef POWDER
       radiance *= 1.0 - powderScale * exp(-media.extinction * powderExponent);
@@ -622,7 +626,7 @@ float marchShadowLength(
   float maxRayDistance = rayNearFar.y - rayNearFar.x;
   float stepSize = minShadowLengthStepSize;
   float rayDistance = stepSize * jitter;
-  const float attenuationFactor = 1.0 - 1e-3;
+  const float attenuationFactor = 1.0 - 5e-4;
   float attenuation = 1.0;
 
   // TODO: This march is closed, and sample resolution can be much lower.
@@ -668,25 +672,33 @@ vec4 approximateHaze(
     return vec4(0.0); // Prevent artifact in views from space
   }
 
+  // Blend two normals by the difference in angle so that normal near the
+  // ground becomes that of the origin, and in the sky that of the horizon.
+  vec3 normalAtOrigin = normalize(rayOrigin);
+  vec3 normalAtHorizon = (rayOrigin - dot(rayOrigin, rayDirection) * rayDirection) / bottomRadius;
+  float alpha = remapClamped(dot(normalAtOrigin, normalAtHorizon), 0.9, 1.0);
+  vec3 normal = mix(normalAtOrigin, normalAtHorizon, alpha);
+
   // Analytical optical depth where density exponentially decreases with height.
   // Based on: https://iquilezles.org/articles/fog/
-  float angle = max(dot(normalize(rayOrigin), rayDirection), 1e-5);
+  float angle = max(dot(normal, rayDirection), 1e-5);
   float exponent = angle * hazeExponent;
+  float linearTerm = density / hazeExponent / angle;
+
   // Derive the optical depths separately for with and without shadow length.
   float expTerm = 1.0 - exp(-maxRayDistance * exponent);
   float shadowExpTerm = 1.0 - exp(-min(maxRayDistance, shadowLength) * exponent);
-  float linearTerm = density / hazeExponent / angle;
   float opticalDepth = expTerm * linearTerm;
-  float effectiveOpticalDepth = max((expTerm - shadowExpTerm) * linearTerm, 0.0);
+  float shadowOpticalDepth = max((expTerm - shadowExpTerm) * linearTerm, 0.0);
+  float transmittance = saturate(1.0 - exp(-opticalDepth));
+  float shadowTransmittance = saturate(1.0 - exp(-shadowOpticalDepth));
 
   vec3 skyIrradiance = vGroundIrradiance.sky;
   vec3 sunIrradiance = vGroundIrradiance.sun;
-  vec3 irradiance = sunIrradiance * phaseFunction(cosTheta);
-  irradiance += skyIrradiance * RECIPROCAL_PI4 * skyIrradianceScale;
-  vec3 inscatter = albedo * irradiance * saturate(1.0 - exp(-effectiveOpticalDepth));
-
-  // Inscatter is attenuated by shadow length, but transmittance is not.
-  return vec4(inscatter, saturate(1.0 - exp(-opticalDepth)));
+  vec3 inscatter = sunIrradiance * phaseFunction(cosTheta) * shadowTransmittance;
+  inscatter += skyIrradiance * RECIPROCAL_PI4 * skyIrradianceScale * transmittance;
+  inscatter *= hazeScatteringCoefficient / (hazeAbsorptionCoefficient + hazeScatteringCoefficient);
+  return vec4(inscatter, transmittance);
 }
 
 #endif // HAZE
@@ -705,8 +717,7 @@ void applyAerialPerspective(
     sunDirection,
     transmittance
   );
-  float clampedAlpha = max(color.a, 1e-7);
-  color.rgb = mix(vec3(0.0), color.rgb * transmittance / clampedAlpha + inscatter, color.a);
+  color.rgb = color.rgb * transmittance + inscatter * color.a;
 }
 
 bool rayIntersectsGround(const vec3 cameraPosition, const vec3 rayDirection) {
@@ -985,7 +996,8 @@ void main() {
     cosTheta,
     shadowLength
   );
-  color = color * (1.0 - haze.a) + haze;
+  color.rgb = mix(color.rgb, haze.rgb, haze.a);
+  color.a = color.a * (1.0 - haze.a) + haze.a;
   #endif // HAZE
 
   outputColor = color;

package/src/shaders/clouds.glsl

@@ -167,7 +167,7 @@ MediaSample sampleMedia(
   }
   #endif // SHAPE_DETAIL
 
-  // Nicely decrease the density at the bottom.
+  // Apply the density profiles.
   density = saturate(density * densityScales * getLayerDensity(weather.heightFraction));
 
   MediaSample media;

package/src/shaders/clouds.vert

@@ -32,7 +32,7 @@ out GroundIrradiance vGroundIrradiance;
 out CloudsIrradiance vCloudsIrradiance;
 
 void sampleSunSkyIrradiance(const vec3 positionECEF) {
-  vGroundIrradiance.sun = GetSunAndSkyIrradiance(
+  vGroundIrradiance.sun = GetSunAndSkyIrradianceForParticle(
     positionECEF * METER_TO_LENGTH_UNIT,
     sunDirection,
     vGroundIrradiance.sky
@@ -40,12 +40,12 @@ void sampleSunSkyIrradiance(const vec3 positionECEF) {
 
   vec3 surfaceNormal = normalize(positionECEF);
   vec2 radii = (bottomRadius + vec2(minHeight, maxHeight)) * METER_TO_LENGTH_UNIT;
-  vCloudsIrradiance.minSun = GetSunAndSkyIrradiance(
+  vCloudsIrradiance.minSun = GetSunAndSkyIrradianceForParticle(
     surfaceNormal * radii.x,
     sunDirection,
     vCloudsIrradiance.minSky
   );
-  vCloudsIrradiance.maxSun = GetSunAndSkyIrradiance(
+  vCloudsIrradiance.maxSun = GetSunAndSkyIrradianceForParticle(
     surfaceNormal * radii.y,
     sunDirection,
     vCloudsIrradiance.maxSky