@takram/three-clouds 0.2.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takram/three-clouds",
-  "version": "0.2.2",
+  "version": "0.4.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.2",
-    "@takram/three-geospatial": "0.2.1",
+    "@takram/three-atmosphere": "0.13.0",
+    "@takram/three-geospatial": "0.3.0",
     "tiny-invariant": "^1.3.3",
     "type-fest": "^4.34.1"
   },

package/src/CloudLayers.ts

@@ -1,7 +1,7 @@
-import { type Vector3, type Vector4 } from 'three'
+import type { Vector3, Vector4 } from 'three'
 
 import { CloudLayer, type CloudLayerLike } from './CloudLayer'
-import { type DensityProfileLike } from './DensityProfile'
+import type { DensityProfileLike } from './DensityProfile'
 
 type NumericKey = keyof {
   [P in keyof CloudLayer as number extends CloudLayer[P] ? P : never]: any

package/src/CloudsEffect.ts

@@ -8,7 +8,6 @@ import {
   Uniform,
   Vector2,
   Vector3,
-  type DataTexture,
   type DepthPackingStrategies,
   type PerspectiveCamera,
   type TextureDataType,
@@ -36,18 +35,12 @@ import {
 
 import { CascadedShadowMaps } from './CascadedShadowMaps'
 import { CloudLayers } from './CloudLayers'
-import {
-  type CloudsMaterial,
-  type CloudsMaterialUniforms
-} from './CloudsMaterial'
+import type { CloudsMaterial, CloudsMaterialUniforms } from './CloudsMaterial'
 import { CloudsPass } from './CloudsPass'
-import { type Procedural3DTexture } from './Procedural3DTexture'
-import { type ProceduralTexture } from './ProceduralTexture'
+import type { Procedural3DTexture } from './Procedural3DTexture'
+import type { ProceduralTexture } from './ProceduralTexture'
 import { defaults, qualityPresets, type QualityPreset } from './qualityPresets'
-import {
-  type ShadowMaterial,
-  type ShadowMaterialUniforms
-} from './ShadowMaterial'
+import type { ShadowMaterial, ShadowMaterialUniforms } from './ShadowMaterial'
 import { ShadowPass } from './ShadowPass'
 import {
   createAtmosphereUniforms,
@@ -82,13 +75,15 @@ const cloudsUniformKeys = [
   'minShadowLengthStepSize',
   'maxShadowLengthRayDistance',
   'hazeDensityScale',
-  'hazeExponent'
+  'hazeExponent',
+  'hazeScatteringCoefficient',
+  'hazeAbsorptionCoefficient'
 ] as const satisfies Array<keyof CloudsMaterialUniforms>
 
 // prettier-ignore
 const cloudsMaterialParameterKeys = [
   'multiScatteringOctaves',
-  'accurateSunSkyIrradiance',
+  'accurateSunSkyLight',
   'accuratePhaseFunction',
 ] as const satisfies Array<keyof CloudsMaterial>
 
@@ -706,20 +701,40 @@ export class CloudsEffect extends Effect {
     this.cloudsPass.currentMaterial.scatterAnisotropyMix = value
   }
 
+  /** @deprecated Use skyLightScale instead. */
   get skyIrradianceScale(): number {
-    return this.cloudsPass.currentMaterial.uniforms.skyIrradianceScale.value
+    return this.skyLightScale
   }
 
+  /** @deprecated Use skyLightScale instead. */
   set skyIrradianceScale(value: number) {
-    this.cloudsPass.currentMaterial.uniforms.skyIrradianceScale.value = value
+    this.skyLightScale = value
+  }
+
+  get skyLightScale(): number {
+    return this.cloudsPass.currentMaterial.uniforms.skyLightScale.value
+  }
+
+  set skyLightScale(value: number) {
+    this.cloudsPass.currentMaterial.uniforms.skyLightScale.value = value
   }
 
+  /** @deprecated Use groundBounceScale instead. */
   get groundIrradianceScale(): number {
-    return this.cloudsPass.currentMaterial.uniforms.groundIrradianceScale.value
+    return this.groundBounceScale
   }
 
+  /** @deprecated Use groundBounceScale instead. */
   set groundIrradianceScale(value: number) {
-    this.cloudsPass.currentMaterial.uniforms.groundIrradianceScale.value = value
+    this.groundBounceScale = value
+  }
+
+  get groundBounceScale(): number {
+    return this.cloudsPass.currentMaterial.uniforms.groundBounceScale.value
+  }
+
+  set groundBounceScale(value: number) {
+    this.cloudsPass.currentMaterial.uniforms.groundBounceScale.value = value
   }
 
   get powderScale(): number {
@@ -754,11 +769,11 @@ export class CloudsEffect extends Effect {
 
   // Atmosphere parameters
 
-  get irradianceTexture(): DataTexture | null {
+  get irradianceTexture(): Texture | null {
     return this.cloudsPass.currentMaterial.irradianceTexture
   }
 
-  set irradianceTexture(value: DataTexture | null) {
+  set irradianceTexture(value: Texture | null) {
     this.cloudsPass.currentMaterial.irradianceTexture = value
   }
 
@@ -770,28 +785,36 @@ export class CloudsEffect extends Effect {
     this.cloudsPass.currentMaterial.scatteringTexture = value
   }
 
-  get transmittanceTexture(): DataTexture | null {
+  get transmittanceTexture(): Texture | null {
     return this.cloudsPass.currentMaterial.transmittanceTexture
   }
 
-  set transmittanceTexture(value: DataTexture | null) {
+  set transmittanceTexture(value: Texture | null) {
     this.cloudsPass.currentMaterial.transmittanceTexture = value
   }
 
-  get ellipsoid(): Ellipsoid {
-    return this.cloudsPass.currentMaterial.ellipsoid
+  get singleMieScatteringTexture(): Data3DTexture | null {
+    return this.cloudsPass.currentMaterial.singleMieScatteringTexture
   }
 
-  set ellipsoid(value: Ellipsoid) {
-    this.cloudsPass.currentMaterial.ellipsoid = value
+  set singleMieScatteringTexture(value: Data3DTexture | null) {
+    this.cloudsPass.currentMaterial.singleMieScatteringTexture = value
   }
 
-  get photometric(): boolean {
-    return this.cloudsPass.currentMaterial.photometric
+  get higherOrderScatteringTexture(): Data3DTexture | null {
+    return this.cloudsPass.currentMaterial.higherOrderScatteringTexture
   }
 
-  set photometric(value: boolean) {
-    this.cloudsPass.currentMaterial.photometric = value
+  set higherOrderScatteringTexture(value: Data3DTexture | null) {
+    this.cloudsPass.currentMaterial.higherOrderScatteringTexture = value
+  }
+
+  get ellipsoid(): Ellipsoid {
+    return this.cloudsPass.currentMaterial.ellipsoid
+  }
+
+  set ellipsoid(value: Ellipsoid) {
+    this.cloudsPass.currentMaterial.ellipsoid = value
   }
 
   get sunAngularRadius(): number {

package/src/CloudsMaterial.ts

@@ -24,9 +24,10 @@ import {
   type AtmosphereMaterialBaseUniforms
 } from '@takram/three-atmosphere'
 import {
-  parameters as atmosphereParameters,
-  functions
-} from '@takram/three-atmosphere/shaders'
+  common,
+  definitions,
+  runtime
+} from '@takram/three-atmosphere/shaders/bruneton'
 import {
   assertType,
   define,
@@ -50,10 +51,10 @@ import {
 
 import { bayerOffsets } from './bayer'
 import { defaults } from './qualityPresets'
-import {
-  type AtmosphereUniforms,
-  type CloudLayerUniforms,
-  type CloudParameterUniforms
+import type {
+  AtmosphereUniforms,
+  CloudLayerUniforms,
+  CloudParameterUniforms
 } from './uniforms'
 
 import fragmentShader from './shaders/clouds.frag?raw'
@@ -97,9 +98,8 @@ export interface CloudsMaterialUniforms
   stbnTexture: Uniform<Data3DTexture | null>
 
   // Scattering
-  albedo: Uniform<Vector3>
-  skyIrradianceScale: Uniform<number>
-  groundIrradianceScale: Uniform<number>
+  skyLightScale: Uniform<number>
+  groundBounceScale: Uniform<number>
   powderScale: Uniform<number>
   powderExponent: Uniform<number>
 
@@ -135,6 +135,8 @@ export interface CloudsMaterialUniforms
   // Haze
   hazeDensityScale: Uniform<number>
   hazeExponent: Uniform<number>
+  hazeScatteringCoefficient: Uniform<number>
+  hazeAbsorptionCoefficient: Uniform<number>
 }
 
 export class CloudsMaterial extends AtmosphereMaterialBase {
@@ -159,8 +161,11 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
         glslVersion: GLSL3,
         vertexShader: resolveIncludes(vertexShader, {
           atmosphere: {
-            parameters: atmosphereParameters,
-            functions
+            bruneton: {
+              common,
+              definitions,
+              runtime
+            }
           },
           types
         }),
@@ -177,8 +182,11 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
               vogelDisk
             },
             atmosphere: {
-              parameters: atmosphereParameters,
-              functions
+              bruneton: {
+                common,
+                definitions,
+                runtime
+              }
             },
             types,
             parameters,
@@ -207,9 +215,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),
+          skyLightScale: new Uniform(1),
+          groundBounceScale: new Uniform(1),
           powderScale: new Uniform(0.8),
           powderExponent: new Uniform(150),
 
@@ -249,7 +256,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 +277,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
@@ -286,15 +299,15 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
       this.needsUpdate = true
     }
 
-    const prevGroundIrradiance = this.defines.GROUND_IRRADIANCE != null
+    const prevGroundIrradiance = this.defines.GROUND_BOUNCE != null
     const nextGroundIrradiance =
-      this.uniforms.groundIrradianceScale.value > 0 &&
+      this.uniforms.groundBounceScale.value > 0 &&
       this.uniforms.maxIterationCountToGround.value > 0
     if (nextGroundIrradiance !== prevGroundIrradiance) {
       if (nextPowder) {
-        this.defines.GROUND_IRRADIANCE = '1'
+        this.defines.GROUND_BOUNCE = '1'
       } else {
-        delete this.defines.GROUND_IRRADIANCE
+        delete this.defines.GROUND_BOUNCE
       }
       this.needsUpdate = true
     }
@@ -441,8 +454,18 @@ export class CloudsMaterial extends AtmosphereMaterialBase {
   @defineInt('MULTI_SCATTERING_OCTAVES', { min: 1, max: 12 })
   multiScatteringOctaves: number = defaults.clouds.multiScatteringOctaves
 
-  @define('ACCURATE_SUN_SKY_IRRADIANCE')
-  accurateSunSkyIrradiance: boolean = defaults.clouds.accurateSunSkyIrradiance
+  /** @deprecated Use accurateSunSkyLight instead. */
+  get accurateSunSkyIrradiance(): boolean {
+    return this.accurateSunSkyLight
+  }
+
+  /** @deprecated Use accurateSunSkyLight instead. */
+  set accurateSunSkyIrradiance(value: boolean) {
+    this.accurateSunSkyLight = value
+  }
+
+  @define('ACCURATE_SUN_SKY_LIGHT')
+  accurateSunSkyLight: boolean = defaults.clouds.accurateSunSkyLight
 
   @define('ACCURATE_PHASE_FUNCTION')
   accuratePhaseFunction: boolean = defaults.clouds.accuratePhaseFunction

package/src/CloudsPass.ts

@@ -12,16 +12,16 @@ import {
   type WebGLRenderer
 } from 'three'
 
-import { type AtmosphereParameters } from '@takram/three-atmosphere'
+import type { AtmosphereParameters } from '@takram/three-atmosphere'
 
 import { CloudsMaterial } from './CloudsMaterial'
 import { CloudsResolveMaterial } from './CloudsResolveMaterial'
 import { PassBase, type PassBaseOptions } from './PassBase'
 import { defaults } from './qualityPresets'
-import {
-  type AtmosphereUniforms,
-  type CloudLayerUniforms,
-  type CloudParameterUniforms
+import type {
+  AtmosphereUniforms,
+  CloudLayerUniforms,
+  CloudParameterUniforms
 } from './uniforms'
 
 type RenderTarget = WebGLRenderTarget & {
@@ -43,7 +43,6 @@ function createRenderTarget(
     shadowLength?: Texture
   } = new WebGLRenderTarget(1, 1, {
     depthBuffer: false,
-    stencilBuffer: false,
     type: HalfFloatType
   })
   renderTarget.texture.minFilter = LinearFilter

package/src/PassBase.ts

@@ -1,7 +1,7 @@
 import { Pass } from 'postprocessing'
 import { Camera } from 'three'
 
-import { type CascadedShadowMaps } from './CascadedShadowMaps'
+import type { CascadedShadowMaps } from './CascadedShadowMaps'
 
 export interface PassBaseOptions {
   shadow: CascadedShadowMaps

package/src/Procedural3DTexture.ts

@@ -14,7 +14,7 @@ import {
   type WebGLRenderer
 } from 'three'
 
-import { type ProceduralTexture } from './ProceduralTexture'
+import type { ProceduralTexture } from './ProceduralTexture'
 
 export type Procedural3DTexture = ProceduralTexture<Data3DTexture>
 
@@ -53,7 +53,6 @@ export class Procedural3DTextureBase implements Procedural3DTexture {
 
     this.renderTarget = new WebGL3DRenderTarget(size, size, size, {
       depthBuffer: false,
-      stencilBuffer: false,
       format: RedFormat
     })
     const texture = this.renderTarget.texture
@@ -79,13 +78,12 @@ export class Procedural3DTextureBase implements Procedural3DTexture {
 
     // Unfortunately, rendering into 3D target requires as many draw calls as
     // the value of "size".
-    const renderTarget = renderer.getRenderTarget()
     for (let layer = 0; layer < this.size; ++layer) {
       this.material.uniforms.layer.value = layer / this.size
       renderer.setRenderTarget(this.renderTarget, layer)
       renderer.render(this.mesh, this.camera)
     }
-    renderer.setRenderTarget(renderTarget)
+    renderer.setRenderTarget(null)
   }
 
   get texture(): Data3DTexture {

package/src/ProceduralTexture.ts

@@ -58,7 +58,6 @@ export class ProceduralTextureBase implements ProceduralTexture {
 
     this.renderTarget = new WebGLRenderTarget(size, size, {
       depthBuffer: false,
-      stencilBuffer: false,
       format: RGBAFormat
     })
     const texture = this.renderTarget.texture
@@ -82,10 +81,9 @@ export class ProceduralTextureBase implements ProceduralTexture {
     }
     this.needsRender = false
 
-    const renderTarget = renderer.getRenderTarget()
     renderer.setRenderTarget(this.renderTarget)
     renderer.render(this.mesh, this.camera)
-    renderer.setRenderTarget(renderTarget)
+    renderer.setRenderTarget(null)
   }
 
   get texture(): Texture {

package/src/ShaderArrayPass.ts

@@ -1,9 +1,9 @@
 import { ShaderPass, type CopyMaterial } from 'postprocessing'
-import {
-  type Uniform,
-  type WebGLArrayRenderTarget,
-  type WebGLRenderer,
-  type WebGLRenderTarget
+import type {
+  Uniform,
+  WebGLArrayRenderTarget,
+  WebGLRenderer,
+  WebGLRenderTarget
 } from 'three'
 
 import { setArrayRenderTargetLayers } from './helpers/setArrayRenderTargetLayers'

package/src/ShadowMaterial.ts

@@ -17,10 +17,10 @@ import {
 import { math, raySphereIntersection } from '@takram/three-geospatial/shaders'
 
 import { defaults } from './qualityPresets'
-import {
-  type AtmosphereUniforms,
-  type CloudLayerUniforms,
-  type CloudParameterUniforms
+import type {
+  AtmosphereUniforms,
+  CloudLayerUniforms,
+  CloudParameterUniforms
 } from './uniforms'
 
 import clouds from './shaders/clouds.glsl?raw'

package/src/ShadowPass.ts

@@ -12,16 +12,15 @@ import { PassBase, type PassBaseOptions } from './PassBase'
 import { ShaderArrayPass } from './ShaderArrayPass'
 import { ShadowMaterial } from './ShadowMaterial'
 import { ShadowResolveMaterial } from './ShadowResolveMaterial'
-import {
-  type AtmosphereUniforms,
-  type CloudLayerUniforms,
-  type CloudParameterUniforms
+import type {
+  AtmosphereUniforms,
+  CloudLayerUniforms,
+  CloudParameterUniforms
 } from './uniforms'
 
 function createRenderTarget(name: string): WebGLArrayRenderTarget {
   const renderTarget = new WebGLArrayRenderTarget(1, 1, 1, {
-    depthBuffer: false,
-    stencilBuffer: false
+    depthBuffer: false
   })
   // Constructor option doesn't work
   renderTarget.texture.type = HalfFloatType

package/src/constants.ts

@@ -1,6 +1,7 @@
 export const CLOUD_SHAPE_TEXTURE_SIZE = 128
 export const CLOUD_SHAPE_DETAIL_TEXTURE_SIZE = 32
 
+// Reference to the latest assets.
 const ref = '45a1c6c1bb9fd38b3680fd120795ff4c32df68ff'
 export const DEFAULT_LOCAL_WEATHER_URL = `https://media.githubusercontent.com/media/takram-design-engineering/three-geospatial/${ref}/packages/clouds/assets/local_weather.png`
 export const DEFAULT_SHAPE_URL = `https://media.githubusercontent.com/media/takram-design-engineering/three-geospatial/${ref}/packages/clouds/assets/shape.bin`

package/src/helpers/setArrayRenderTargetLayers.ts

@@ -1,15 +1,12 @@
-import { type WebGLArrayRenderTarget, type WebGLRenderer } from 'three'
+import type { WebGLArrayRenderTarget, WebGLRenderer } from 'three'
 import invariant from 'tiny-invariant'
 
 export function setArrayRenderTargetLayers(
   renderer: WebGLRenderer,
   outputBuffer: WebGLArrayRenderTarget
 ): void {
-  const glTexture = (
-    renderer.properties.get(outputBuffer.texture) as {
-      __webglTexture?: WebGLTexture
-    }
-  ).__webglTexture
+  const property: any = renderer.properties.get(outputBuffer.texture)
+  const glTexture: WebGLTexture | undefined = property.__webglTexture
 
   const gl = renderer.getContext()
   invariant(gl instanceof WebGL2RenderingContext)

package/src/qualityPresets.ts

@@ -1,7 +1,7 @@
 import { Vector2 } from 'three'
-import { type PartialDeep, type SharedUnionFieldsDeep } from 'type-fest'
+import type { PartialDeep, SharedUnionFieldsDeep } from 'type-fest'
 
-import { type CloudsEffect } from './CloudsEffect'
+import type { CloudsEffect } from './CloudsEffect'
 
 export type QualityPreset = 'low' | 'medium' | 'high' | 'ultra'
 
@@ -13,7 +13,7 @@ const values = {
   haze: true,
   clouds: {
     multiScatteringOctaves: 8,
-    accurateSunSkyIrradiance: true,
+    accurateSunSkyLight: true,
     accuratePhaseFunction: false,
 
     // Primary raymarch
@@ -67,7 +67,7 @@ export const qualityPresets: Record<QualityPreset, Schema> = {
     turbulence: false, // Expensive
     clouds: {
       ...defaults.clouds,
-      accurateSunSkyIrradiance: false, // Greatly reduces texel reads.
+      accurateSunSkyLight: false, // Greatly reduces texel reads.
       maxIterationCount: 200,
       minStepSize: 100,
       maxRayDistance: 1e5,
@@ -95,7 +95,7 @@ export const qualityPresets: Record<QualityPreset, Schema> = {
       ...defaults.clouds,
       minDensity: 1e-4,
       minExtinction: 1e-4,
-      accurateSunSkyIrradiance: false,
+      accurateSunSkyLight: false,
       maxIterationCountToSun: 2,
       maxIterationCountToGround: 1
     },