@takram/three-clouds 0.1.0

package/src/CloudsPass.ts

@@ -0,0 +1,285 @@
+import { ShaderPass } from 'postprocessing'
+import {
+  HalfFloatType,
+  LinearFilter,
+  RedFormat,
+  WebGLRenderTarget,
+  type Camera,
+  type DataArrayTexture,
+  type DepthPackingStrategies,
+  type Texture,
+  type TextureDataType,
+  type WebGLRenderer
+} from 'three'
+
+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
+} from './uniforms'
+
+type RenderTarget = WebGLRenderTarget & {
+  depthVelocity: Texture | null
+  shadowLength: Texture | null
+}
+
+interface RenderTargetOptions {
+  depthVelocity: boolean
+  shadowLength: boolean
+}
+
+function createRenderTarget(
+  name: string,
+  { depthVelocity, shadowLength }: RenderTargetOptions
+): RenderTarget {
+  const renderTarget: WebGLRenderTarget & {
+    depthVelocity?: Texture
+    shadowLength?: Texture
+  } = new WebGLRenderTarget(1, 1, {
+    depthBuffer: false,
+    stencilBuffer: false,
+    type: HalfFloatType
+  })
+  renderTarget.texture.minFilter = LinearFilter
+  renderTarget.texture.magFilter = LinearFilter
+  renderTarget.texture.name = name
+
+  let depthVelocityBuffer
+  if (depthVelocity) {
+    depthVelocityBuffer = renderTarget.texture.clone()
+    depthVelocityBuffer.isRenderTargetTexture = true
+    renderTarget.depthVelocity = depthVelocityBuffer
+    renderTarget.textures.push(depthVelocityBuffer)
+  }
+  let shadowLengthBuffer
+  if (shadowLength) {
+    shadowLengthBuffer = renderTarget.texture.clone()
+    shadowLengthBuffer.isRenderTargetTexture = true
+    shadowLengthBuffer.format = RedFormat
+    renderTarget.shadowLength = shadowLengthBuffer
+    renderTarget.textures.push(shadowLengthBuffer)
+  }
+
+  return Object.assign(renderTarget, {
+    depthVelocity: depthVelocityBuffer ?? null,
+    shadowLength: shadowLengthBuffer ?? null
+  })
+}
+
+export interface CloudsPassOptions extends PassBaseOptions {
+  parameterUniforms: CloudParameterUniforms
+  layerUniforms: CloudLayerUniforms
+  atmosphereUniforms: AtmosphereUniforms
+}
+
+export class CloudsPass extends PassBase {
+  private currentRenderTarget!: RenderTarget
+  readonly currentMaterial: CloudsMaterial
+  readonly currentPass: ShaderPass
+  private resolveRenderTarget!: RenderTarget
+  readonly resolveMaterial: CloudsResolveMaterial
+  readonly resolvePass: ShaderPass
+  private historyRenderTarget!: RenderTarget
+
+  private width = 0
+  private height = 0
+
+  constructor(
+    {
+      parameterUniforms,
+      layerUniforms,
+      atmosphereUniforms,
+      ...options
+    }: CloudsPassOptions,
+    private readonly atmosphere: AtmosphereParameters
+  ) {
+    super('CloudsPass', options)
+
+    this.currentMaterial = new CloudsMaterial(
+      {
+        parameterUniforms,
+        layerUniforms,
+        atmosphereUniforms
+      },
+      atmosphere
+    )
+    this.currentPass = new ShaderPass(this.currentMaterial)
+    this.resolveMaterial = new CloudsResolveMaterial()
+    this.resolvePass = new ShaderPass(this.resolveMaterial)
+
+    this.initRenderTargets({
+      depthVelocity: true,
+      shadowLength: defaults.lightShafts
+    })
+  }
+
+  copyCameraSettings(camera: Camera): void {
+    this.currentMaterial.copyCameraSettings(camera)
+  }
+
+  override initialize(
+    renderer: WebGLRenderer,
+    alpha: boolean,
+    frameBufferType: TextureDataType
+  ): void {
+    this.currentPass.initialize(renderer, alpha, frameBufferType)
+    this.resolvePass.initialize(renderer, alpha, frameBufferType)
+  }
+
+  private initRenderTargets(options: RenderTargetOptions): void {
+    this.currentRenderTarget?.dispose()
+    this.resolveRenderTarget?.dispose()
+    this.historyRenderTarget?.dispose()
+    const current = createRenderTarget('Clouds', options)
+    const resolve = createRenderTarget('Clouds.A', {
+      ...options,
+      depthVelocity: false
+    })
+    const history = createRenderTarget('Clouds.B', {
+      ...options,
+      depthVelocity: false
+    })
+    this.currentRenderTarget = current
+    this.resolveRenderTarget = resolve
+    this.historyRenderTarget = history
+
+    const resolveUniforms = this.resolveMaterial.uniforms
+    resolveUniforms.colorBuffer.value = current.texture
+    resolveUniforms.depthVelocityBuffer.value = current.depthVelocity
+    resolveUniforms.shadowLengthBuffer.value = current.shadowLength
+    resolveUniforms.colorHistoryBuffer.value = history.texture
+    resolveUniforms.shadowLengthHistoryBuffer.value = history.shadowLength
+  }
+
+  private copyShadow(): void {
+    const shadow = this.shadow
+    const currentUniforms = this.currentMaterial.uniforms
+    for (let i = 0; i < shadow.cascadeCount; ++i) {
+      const cascade = shadow.cascades[i]
+      currentUniforms.shadowIntervals.value[i].copy(cascade.interval)
+      currentUniforms.shadowMatrices.value[i].copy(cascade.matrix)
+    }
+    currentUniforms.shadowFar.value = shadow.far
+  }
+
+  private copyReprojection(): void {
+    this.currentMaterial.copyReprojectionMatrix(this.mainCamera)
+  }
+
+  private swapBuffers(): void {
+    const nextResolve = this.historyRenderTarget
+    const nextHistory = this.resolveRenderTarget
+    this.resolveRenderTarget = nextResolve
+    this.historyRenderTarget = nextHistory
+
+    const resolveUniforms = this.resolveMaterial.uniforms
+    resolveUniforms.colorHistoryBuffer.value = nextHistory.texture
+    resolveUniforms.shadowLengthHistoryBuffer.value = nextHistory.shadowLength
+  }
+
+  update(renderer: WebGLRenderer, frame: number, deltaTime: number): void {
+    // Update frame uniforms before copyCameraSettings.
+    this.currentMaterial.uniforms.frame.value = frame
+    this.resolveMaterial.uniforms.frame.value = frame
+
+    this.copyCameraSettings(this.mainCamera)
+    this.copyShadow()
+
+    this.currentPass.render(renderer, null, this.currentRenderTarget)
+    this.resolvePass.render(renderer, null, this.resolveRenderTarget)
+
+    // Store the current view and projection matrices for the next reprojection.
+    this.copyReprojection()
+
+    // Swap resolve and history render targets for the next render.
+    this.swapBuffers()
+  }
+
+  override setSize(width: number, height: number): void {
+    this.width = width
+    this.height = height
+
+    if (this.temporalUpscale) {
+      const lowResWidth = Math.ceil(width / 4)
+      const lowResHeight = Math.ceil(height / 4)
+      this.currentRenderTarget.setSize(lowResWidth, lowResHeight)
+      this.currentMaterial.setSize(
+        lowResWidth * 4,
+        lowResHeight * 4,
+        width,
+        height
+      )
+    } else {
+      this.currentRenderTarget.setSize(width, height)
+      this.currentMaterial.setSize(width, height)
+    }
+    this.resolveRenderTarget.setSize(width, height)
+    this.resolveMaterial.setSize(width, height)
+    this.historyRenderTarget.setSize(width, height)
+  }
+
+  setShadowSize(width: number, height: number, depth: number): void {
+    this.currentMaterial.shadowCascadeCount = depth
+    this.currentMaterial.setShadowSize(width, height)
+  }
+
+  override setDepthTexture(
+    depthTexture: Texture,
+    depthPacking?: DepthPackingStrategies
+  ): void {
+    this.currentMaterial.depthBuffer = depthTexture
+    this.currentMaterial.depthPacking = depthPacking ?? 0
+  }
+
+  get outputBuffer(): Texture {
+    // Resolve and history render targets are already swapped.
+    return this.historyRenderTarget.texture
+  }
+
+  get shadowBuffer(): DataArrayTexture | null {
+    return this.currentMaterial.uniforms.shadowBuffer.value
+  }
+
+  set shadowBuffer(value: DataArrayTexture | null) {
+    this.currentMaterial.uniforms.shadowBuffer.value = value
+  }
+
+  get shadowLengthBuffer(): Texture | null {
+    // Resolve and history render targets are already swapped.
+    return this.historyRenderTarget.shadowLength
+  }
+
+  get temporalUpscale(): boolean {
+    return this.currentMaterial.temporalUpscale
+  }
+
+  set temporalUpscale(value: boolean) {
+    if (value !== this.temporalUpscale) {
+      this.currentMaterial.temporalUpscale = value
+      this.resolveMaterial.temporalUpscale = value
+      this.setSize(this.width, this.height)
+    }
+  }
+
+  get lightShafts(): boolean {
+    return this.currentMaterial.shadowLength
+  }
+
+  set lightShafts(value: boolean) {
+    if (value !== this.lightShafts) {
+      this.currentMaterial.shadowLength = value
+      this.resolveMaterial.shadowLength = value
+      this.initRenderTargets({
+        depthVelocity: true,
+        shadowLength: value
+      })
+      this.setSize(this.width, this.height)
+    }
+  }
+}

package/src/CloudsResolveMaterial.ts

@@ -0,0 +1,108 @@
+import {
+  GLSL3,
+  RawShaderMaterial,
+  Uniform,
+  Vector2,
+  type BufferGeometry,
+  type Camera,
+  type Group,
+  type Object3D,
+  type Scene,
+  type Texture,
+  type WebGLRenderer
+} from 'three'
+
+import { define, resolveIncludes, unrollLoops } from '@takram/three-geospatial'
+import { turbo } from '@takram/three-geospatial/shaders'
+
+import { bayerOffsets } from './bayer'
+
+import catmullRomSampling from './shaders/catmullRomSampling.glsl?raw'
+import fragmentShader from './shaders/cloudsResolve.frag?raw'
+import vertexShader from './shaders/cloudsResolve.vert?raw'
+import varianceClipping from './shaders/varianceClipping.glsl?raw'
+
+export interface CloudsResolveMaterialParameters {
+  colorBuffer?: Texture | null
+  depthVelocityBuffer?: Texture | null
+  shadowLengthBuffer?: Texture | null
+  colorHistoryBuffer?: Texture | null
+  shadowLengthHistoryBuffer?: Texture | null
+}
+
+export interface CloudsResolveMaterialUniforms {
+  [key: string]: Uniform<unknown>
+  colorBuffer: Uniform<Texture | null>
+  depthVelocityBuffer: Uniform<Texture | null>
+  shadowLengthBuffer: Uniform<Texture | null>
+  colorHistoryBuffer: Uniform<Texture | null>
+  shadowLengthHistoryBuffer: Uniform<Texture | null>
+  texelSize: Uniform<Vector2>
+  frame: Uniform<number>
+  jitterOffset: Uniform<Vector2>
+  varianceGamma: Uniform<number>
+  temporalAlpha: Uniform<number>
+}
+
+export class CloudsResolveMaterial extends RawShaderMaterial {
+  declare uniforms: CloudsResolveMaterialUniforms
+
+  constructor({
+    colorBuffer = null,
+    depthVelocityBuffer = null,
+    shadowLengthBuffer = null,
+    colorHistoryBuffer = null,
+    shadowLengthHistoryBuffer = null
+  }: CloudsResolveMaterialParameters = {}) {
+    super({
+      name: 'CloudsResolveMaterial',
+      glslVersion: GLSL3,
+      vertexShader,
+      fragmentShader: unrollLoops(
+        resolveIncludes(fragmentShader, {
+          core: { turbo },
+          catmullRomSampling,
+          varianceClipping
+        })
+      ),
+      uniforms: {
+        colorBuffer: new Uniform(colorBuffer),
+        depthVelocityBuffer: new Uniform(depthVelocityBuffer),
+        shadowLengthBuffer: new Uniform(shadowLengthBuffer),
+        colorHistoryBuffer: new Uniform(colorHistoryBuffer),
+        shadowLengthHistoryBuffer: new Uniform(shadowLengthHistoryBuffer),
+        texelSize: new Uniform(new Vector2()),
+        frame: new Uniform(0),
+        jitterOffset: new Uniform(new Vector2()),
+        varianceGamma: new Uniform(2),
+        temporalAlpha: new Uniform(0.1)
+      } satisfies CloudsResolveMaterialUniforms
+    })
+  }
+
+  setSize(width: number, height: number): void {
+    this.uniforms.texelSize.value.set(1 / width, 1 / height)
+  }
+
+  onBeforeRender(
+    renderer: WebGLRenderer,
+    scene: Scene,
+    camera: Camera,
+    geometry: BufferGeometry,
+    object: Object3D,
+    group: Group
+  ): void {
+    const uniforms = this.uniforms
+    const frame = uniforms.frame.value % 16
+    const offset = bayerOffsets[frame]
+    const dx = (offset.x - 0.5) * 4
+    const dy = (offset.y - 0.5) * 4
+    this.uniforms.jitterOffset.value.set(dx, dy)
+  }
+
+  @define('TEMPORAL_UPSCALE')
+  temporalUpscale = true
+
+  @define('SHADOW_LENGTH')
+  shadowLength = true
+}

package/src/DensityProfile.ts

@@ -0,0 +1,38 @@
+export interface DensityProfileLike
+  extends Partial<
+    Pick<DensityProfile, 'expTerm' | 'exponent' | 'linearTerm' | 'constantTerm'>
+  > {}
+
+export class DensityProfile {
+  constructor(
+    public expTerm = 0,
+    public exponent = 0,
+    public linearTerm = 0,
+    public constantTerm = 0
+  ) {}
+
+  set(expTerm = 0, exponent = 0, linearTerm = 0, constantTerm = 0): this {
+    this.expTerm = expTerm
+    this.exponent = exponent
+    this.linearTerm = linearTerm
+    this.constantTerm = constantTerm
+    return this
+  }
+
+  clone(): DensityProfile {
+    return new DensityProfile(
+      this.expTerm,
+      this.exponent,
+      this.linearTerm,
+      this.constantTerm
+    )
+  }
+
+  copy(other: DensityProfile): this {
+    this.expTerm = other.expTerm
+    this.exponent = other.exponent
+    this.linearTerm = other.linearTerm
+    this.constantTerm = other.constantTerm
+    return this
+  }
+}

package/src/LocalWeather.ts

@@ -0,0 +1,21 @@
+import { resolveIncludes } from '@takram/three-geospatial'
+import { math } from '@takram/three-geospatial/shaders'
+
+import { ProceduralTextureBase } from './ProceduralTexture'
+
+import fragmentShader from './shaders/localWeather.frag?raw'
+import perlin from './shaders/perlin.glsl?raw'
+import tileableNoise from './shaders/tileableNoise.glsl?raw'
+
+export class LocalWeather extends ProceduralTextureBase {
+  constructor() {
+    super({
+      size: 512,
+      fragmentShader: resolveIncludes(fragmentShader, {
+        core: { math },
+        perlin,
+        tileableNoise
+      })
+    })
+  }
+}

package/src/PassBase.ts

@@ -0,0 +1,28 @@
+import { Pass } from 'postprocessing'
+import { Camera } from 'three'
+
+import { type CascadedShadowMaps } from './CascadedShadowMaps'
+
+export interface PassBaseOptions {
+  shadow: CascadedShadowMaps
+}
+
+export abstract class PassBase extends Pass {
+  shadow: CascadedShadowMaps
+
+  private _mainCamera = new Camera()
+
+  constructor(name: string, options: PassBaseOptions) {
+    super(name)
+    const { shadow } = options
+    this.shadow = shadow
+  }
+
+  get mainCamera(): Camera {
+    return this._mainCamera
+  }
+
+  set mainCamera(value: Camera) {
+    this._mainCamera = value
+  }
+}

package/src/Procedural3DTexture.ts

@@ -0,0 +1,94 @@
+import {
+  Camera,
+  GLSL3,
+  LinearFilter,
+  Mesh,
+  NoColorSpace,
+  PlaneGeometry,
+  RawShaderMaterial,
+  RedFormat,
+  RepeatWrapping,
+  Uniform,
+  WebGL3DRenderTarget,
+  type Data3DTexture,
+  type WebGLRenderer
+} from 'three'
+
+import { type ProceduralTexture } from './ProceduralTexture'
+
+export type Procedural3DTexture = ProceduralTexture<Data3DTexture>
+
+export interface Procedural3DTextureBaseParameters {
+  size: number
+  fragmentShader: string
+}
+
+export class Procedural3DTextureBase implements Procedural3DTexture {
+  readonly size: number
+  needsRender = true
+
+  private readonly material: RawShaderMaterial
+  private readonly mesh: Mesh
+  private readonly renderTarget: WebGL3DRenderTarget
+  private readonly camera = new Camera()
+
+  constructor({ size, fragmentShader }: Procedural3DTextureBaseParameters) {
+    this.size = size
+    this.material = new RawShaderMaterial({
+      glslVersion: GLSL3,
+      vertexShader: /* glsl */ `
+        in vec3 position;
+        out vec2 vUv;
+        void main() {
+          vUv = position.xy * 0.5 + 0.5;
+          gl_Position = vec4(position.xy, 0.0, 1.0);
+        }
+      `,
+      fragmentShader,
+      uniforms: {
+        layer: new Uniform(0)
+      }
+    })
+    this.mesh = new Mesh(new PlaneGeometry(2, 2), this.material)
+
+    this.renderTarget = new WebGL3DRenderTarget(size, size, size, {
+      depthBuffer: false,
+      stencilBuffer: false,
+      format: RedFormat
+    })
+    const texture = this.renderTarget.texture
+    texture.minFilter = LinearFilter
+    texture.magFilter = LinearFilter
+    texture.wrapS = RepeatWrapping
+    texture.wrapT = RepeatWrapping
+    texture.wrapR = RepeatWrapping
+    texture.colorSpace = NoColorSpace
+    texture.needsUpdate = true
+  }
+
+  dispose(): void {
+    this.renderTarget.dispose()
+    this.material.dispose()
+  }
+
+  render(renderer: WebGLRenderer, deltaTime?: number): void {
+    if (!this.needsRender) {
+      return
+    }
+    this.needsRender = false
+
+    // 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)
+  }
+
+  get texture(): Data3DTexture {
+    return this.renderTarget.texture
+  }
+}

package/src/ProceduralTexture.ts

@@ -0,0 +1,94 @@
+import {
+  Camera,
+  GLSL3,
+  LinearFilter,
+  LinearMipMapLinearFilter,
+  Mesh,
+  NoColorSpace,
+  PlaneGeometry,
+  RawShaderMaterial,
+  RepeatWrapping,
+  RGBAFormat,
+  Uniform,
+  WebGLRenderTarget,
+  type Texture,
+  type WebGLRenderer
+} from 'three'
+
+export interface ProceduralTexture<T extends Texture = Texture> {
+  readonly size: number
+  readonly texture: T
+
+  dispose: () => void
+  render: (renderer: WebGLRenderer, deltaTime?: number) => void
+}
+
+export interface ProceduralTextureBaseParameters {
+  size: number
+  fragmentShader: string
+}
+
+export class ProceduralTextureBase implements ProceduralTexture {
+  readonly size: number
+  needsRender = true
+
+  private readonly material: RawShaderMaterial
+  private readonly mesh: Mesh
+  private readonly renderTarget: WebGLRenderTarget
+  private readonly camera = new Camera()
+
+  constructor({ size, fragmentShader }: ProceduralTextureBaseParameters) {
+    this.size = size
+    this.material = new RawShaderMaterial({
+      glslVersion: GLSL3,
+      vertexShader: /* glsl */ `
+        in vec3 position;
+        out vec2 vUv;
+        void main() {
+          vUv = position.xy * 0.5 + 0.5;
+          gl_Position = vec4(position.xy, 0.0, 1.0);
+        }
+      `,
+      fragmentShader,
+      uniforms: {
+        layer: new Uniform(0)
+      }
+    })
+    this.mesh = new Mesh(new PlaneGeometry(2, 2), this.material)
+
+    this.renderTarget = new WebGLRenderTarget(size, size, {
+      depthBuffer: false,
+      stencilBuffer: false,
+      format: RGBAFormat
+    })
+    const texture = this.renderTarget.texture
+    texture.generateMipmaps = true
+    texture.minFilter = LinearMipMapLinearFilter
+    texture.magFilter = LinearFilter
+    texture.wrapS = RepeatWrapping
+    texture.wrapT = RepeatWrapping
+    texture.colorSpace = NoColorSpace
+    texture.needsUpdate = true
+  }
+
+  dispose(): void {
+    this.renderTarget.dispose()
+    this.material.dispose()
+  }
+
+  render(renderer: WebGLRenderer, deltaTime?: number): void {
+    if (!this.needsRender) {
+      return
+    }
+    this.needsRender = false
+
+    const renderTarget = renderer.getRenderTarget()
+    renderer.setRenderTarget(this.renderTarget)
+    renderer.render(this.mesh, this.camera)
+    renderer.setRenderTarget(renderTarget)
+  }
+
+  get texture(): Texture {
+    return this.renderTarget.texture
+  }
+}

package/src/ShaderArrayPass.ts

@@ -0,0 +1,32 @@
+import { ShaderPass, type CopyMaterial } from 'postprocessing'
+import {
+  type Uniform,
+  type WebGLArrayRenderTarget,
+  type WebGLRenderer,
+  type WebGLRenderTarget
+} from 'three'
+
+import { setArrayRenderTargetLayers } from './helpers/setArrayRenderTargetLayers'
+
+export class ShaderArrayPass extends ShaderPass {
+  declare input: string
+
+  override render(
+    renderer: WebGLRenderer,
+    inputBuffer: WebGLRenderTarget | null,
+    outputBuffer: WebGLArrayRenderTarget,
+    deltaTime?: number,
+    stencilTest?: boolean
+  ): void {
+    const uniforms = (
+      this.fullscreenMaterial as CopyMaterial & {
+        uniforms?: Record<string, Uniform>
+      }
+    ).uniforms
+    if (inputBuffer !== null && uniforms?.[this.input] != null) {
+      uniforms[this.input].value = inputBuffer.texture
+    }
+    setArrayRenderTargetLayers(renderer, outputBuffer)
+    renderer.render(this.scene, this.camera)
+  }
+}