@takram/three-geospatial-effects 0.0.1-alpha.0

package/src/NormalEffect.ts

@@ -0,0 +1,135 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/// <reference types="vite-plugin-glsl/ext" />
+
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import {
+  Matrix4,
+  Uniform,
+  type Camera,
+  type Texture,
+  type WebGLRenderer,
+  type WebGLRenderTarget
+} from 'three'
+
+import {
+  depthShader,
+  packingShader,
+  transformShader
+} from '@takram/three-geospatial'
+
+import fragmentShader from './shaders/normalEffect.frag'
+
+export interface NormalEffectOptions {
+  blendFunction?: BlendFunction
+  normalBuffer?: Texture | null
+  octEncoded?: boolean
+  reconstructFromDepth?: boolean
+}
+
+export const normalEffectOptionsDefaults = {
+  blendFunction: BlendFunction.SRC,
+  octEncoded: false,
+  reconstructFromDepth: false
+} satisfies NormalEffectOptions
+
+export class NormalEffect extends Effect {
+  constructor(
+    private camera: Camera,
+    options?: NormalEffectOptions
+  ) {
+    const {
+      blendFunction,
+      normalBuffer = null,
+      octEncoded,
+      reconstructFromDepth
+    } = {
+      ...normalEffectOptionsDefaults,
+      ...options
+    }
+    super(
+      'NormalEffect',
+      /* glsl */ `
+        ${depthShader}
+        ${packingShader}
+        ${transformShader}
+        ${fragmentShader}
+      `,
+      {
+        blendFunction,
+        attributes: EffectAttribute.DEPTH,
+        uniforms: new Map<string, Uniform>([
+          ['normalBuffer', new Uniform(normalBuffer)],
+          ['projectionMatrix', new Uniform(new Matrix4())],
+          ['inverseProjectionMatrix', new Uniform(new Matrix4())]
+        ])
+      }
+    )
+    if (camera != null) {
+      this.mainCamera = camera
+    }
+    this.octEncoded = octEncoded
+    this.reconstructFromDepth = reconstructFromDepth
+  }
+
+  get mainCamera(): Camera {
+    return this.camera
+  }
+
+  override set mainCamera(value: Camera) {
+    this.camera = value
+  }
+
+  update(
+    renderer: WebGLRenderer,
+    inputBuffer: WebGLRenderTarget,
+    deltaTime?: number
+  ): void {
+    const uniforms = this.uniforms
+    const projectionMatrix = uniforms.get('projectionMatrix')!
+    const inverseProjectionMatrix = uniforms.get('inverseProjectionMatrix')!
+    const camera = this.camera
+    if (camera != null) {
+      projectionMatrix.value.copy(camera.projectionMatrix)
+      inverseProjectionMatrix.value.copy(camera.projectionMatrixInverse)
+    }
+  }
+
+  get normalBuffer(): Texture | null {
+    return this.uniforms.get('normalBuffer')!.value
+  }
+
+  set normalBuffer(value: Texture | null) {
+    this.uniforms.get('normalBuffer')!.value = value
+  }
+
+  get octEncoded(): boolean {
+    return this.defines.has('OCT_ENCODED')
+  }
+
+  set octEncoded(value: boolean) {
+    if (value !== this.octEncoded) {
+      if (value) {
+        this.defines.set('OCT_ENCODED', '1')
+      } else {
+        this.defines.delete('OCT_ENCODED')
+      }
+      this.setChanged()
+    }
+  }
+
+  get reconstructFromDepth(): boolean {
+    return this.defines.has('RECONSTRUCT_FROM_DEPTH')
+  }
+
+  set reconstructFromDepth(value: boolean) {
+    if (value !== this.reconstructFromDepth) {
+      if (value) {
+        this.defines.set('RECONSTRUCT_FROM_DEPTH', '1')
+      } else {
+        this.defines.delete('RECONSTRUCT_FROM_DEPTH')
+      }
+      this.setChanged()
+    }
+  }
+}

package/src/createHaldLookupTexture.ts

@@ -0,0 +1,20 @@
+import { LookupTexture, RawImageData } from 'postprocessing'
+import { type Texture } from 'three'
+
+export function createHaldLookupTexture(texture: Texture): LookupTexture {
+  const { image } = texture
+  const { width, height } = image
+  if (width !== height) {
+    throw new Error('Hald CLUT image must be square.')
+  }
+  const size = Math.cbrt(width * height)
+  if (size % 1 !== 0) {
+    throw new Error('Hald CLUT image must be cubic.')
+  }
+  const { data } = RawImageData.from(image)
+  const lut = new LookupTexture(data, size)
+  lut.name = texture.name
+  lut.type = texture.type
+  texture.colorSpace = lut.colorSpace
+  return lut
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './createHaldLookupTexture'
+export * from './DepthEffect'
+export * from './DitheringEffect'
+export * from './GeometryPass'
+export * from './LensFlareEffect'
+export * from './NormalEffect'
+export * from './setupMaterialsForGeometryPass'

package/src/r3f/Depth.tsx

@@ -0,0 +1,8 @@
+import { wrapEffect } from '@react-three/postprocessing'
+import { type ComponentPropsWithoutRef } from 'react'
+
+import { DepthEffect } from '../DepthEffect'
+
+export const Depth = wrapEffect(DepthEffect)
+
+export type DepthProps = ComponentPropsWithoutRef<typeof Depth>

package/src/r3f/Dithering.tsx

@@ -0,0 +1,5 @@
+import { wrapEffect } from '@react-three/postprocessing'
+
+import { DitheringEffect } from '../DitheringEffect'
+
+export const Dithering = wrapEffect(DitheringEffect)

package/src/r3f/EffectComposer.tsx

@@ -0,0 +1,189 @@
+import { useFrame, useInstanceHandle, useThree } from '@react-three/fiber'
+import { EffectComposerContext } from '@react-three/postprocessing'
+import {
+  Effect,
+  EffectAttribute,
+  EffectComposer as EffectComposerImpl,
+  EffectPass,
+  Pass
+} from 'postprocessing'
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  type Context,
+  type ReactNode
+} from 'react'
+import {
+  HalfFloatType,
+  NoToneMapping,
+  type Camera,
+  type Scene,
+  type TextureDataType
+} from 'three'
+
+import { GeometryPass } from '../GeometryPass'
+
+type InferContextValue<T> = T extends Context<infer U> ? U : never
+
+export interface EffectComposerContextValue
+  extends InferContextValue<typeof EffectComposerContext> {
+  geometryPass?: GeometryPass
+}
+
+export interface EffectComposerProps {
+  enabled?: boolean
+  depthBuffer?: boolean
+  stencilBuffer?: boolean
+  autoClear?: boolean
+  resolutionScale?: number
+  multisampling?: number
+  frameBufferType?: TextureDataType
+  renderPriority?: number
+  camera?: Camera
+  scene?: Scene
+  children?: ReactNode
+}
+
+function isConvolution(effect: Effect): boolean {
+  return (
+    (effect.getAttributes() & EffectAttribute.CONVOLUTION) ===
+    EffectAttribute.CONVOLUTION
+  )
+}
+
+export const EffectComposer = /*#__PURE__*/ forwardRef<
+  EffectComposerImpl,
+  EffectComposerProps
+>(function EffectComposer(
+  {
+    children,
+    camera: cameraProp,
+    scene: sceneProp,
+    enabled = true,
+    renderPriority = 1,
+    autoClear = true,
+    resolutionScale,
+    depthBuffer,
+    stencilBuffer = false,
+    multisampling = 8,
+    frameBufferType = HalfFloatType
+  },
+  forwardedRef
+) {
+  const gl = useThree(({ gl }) => gl)
+  const defaultScene = useThree(({ scene }) => scene)
+  const defaultCamera = useThree(({ camera }) => camera)
+  const scene = sceneProp ?? defaultScene
+  const camera = cameraProp ?? defaultCamera
+
+  const [composer, geometryPass] = useMemo(() => {
+    const composer = new EffectComposerImpl(gl, {
+      depthBuffer,
+      stencilBuffer,
+      multisampling,
+      frameBufferType
+    })
+    const geometryPass = new GeometryPass(composer.inputBuffer, scene, camera)
+    composer.addPass(geometryPass)
+    return [composer, geometryPass]
+  }, [
+    gl,
+    scene,
+    camera,
+    depthBuffer,
+    stencilBuffer,
+    multisampling,
+    frameBufferType
+  ])
+
+  const size = useThree(({ size }) => size)
+  useEffect(() => {
+    composer?.setSize(size.width, size.height)
+  }, [composer, size])
+
+  useFrame(
+    (state, delta) => {
+      if (enabled) {
+        const currentAutoClear = gl.autoClear
+        gl.autoClear = autoClear
+        if (stencilBuffer && !autoClear) {
+          gl.clearStencil()
+        }
+        composer.render(delta)
+        gl.autoClear = currentAutoClear
+      }
+    },
+    enabled ? renderPriority : 0
+  )
+
+  const group = useRef(null)
+  const instance = useInstanceHandle(group)
+  useLayoutEffect(() => {
+    const passes: Pass[] = []
+    if (group.current != null && instance.current != null && composer != null) {
+      const children = instance.current.objects as unknown[]
+      for (let i = 0; i < children.length; ++i) {
+        const child = children[i]
+        if (child instanceof Effect) {
+          const effects: Effect[] = [child]
+          if (!isConvolution(child)) {
+            let next: unknown = null
+            while ((next = children[i + 1]) instanceof Effect) {
+              if (isConvolution(next)) {
+                break
+              }
+              effects.push(next)
+              ++i
+            }
+          }
+          const pass = new EffectPass(camera, ...effects)
+          passes.push(pass)
+        } else if (child instanceof Pass) {
+          passes.push(child)
+        }
+      }
+      for (const pass of passes) {
+        composer?.addPass(pass)
+      }
+    }
+
+    return () => {
+      for (const pass of passes) {
+        composer?.removePass(pass)
+      }
+    }
+  }, [composer, children, camera, instance])
+
+  useEffect(() => {
+    const currentToneMapping = gl.toneMapping
+    gl.toneMapping = NoToneMapping
+    return () => {
+      gl.toneMapping = currentToneMapping
+    }
+  }, [gl])
+
+  const context = useMemo(
+    (): EffectComposerContextValue => ({
+      composer,
+      camera,
+      scene,
+      geometryPass,
+      normalPass: null,
+      downSamplingPass: null,
+      resolutionScale
+    }),
+    [composer, camera, scene, geometryPass, resolutionScale]
+  )
+
+  useImperativeHandle(forwardedRef, () => composer, [composer])
+
+  return (
+    <EffectComposerContext.Provider value={context}>
+      <group ref={group}>{children}</group>
+    </EffectComposerContext.Provider>
+  )
+})

package/src/r3f/Geometry.tsx

@@ -0,0 +1,45 @@
+import { EffectComposerContext } from '@react-three/postprocessing'
+import { forwardRef, useContext, useEffect, useMemo } from 'react'
+
+import {
+  GeometryEffect,
+  geometryEffectOptionsDefaults,
+  type GeometryEffectOptions
+} from '../GeometryEffect'
+import { type EffectComposerContextValue } from './EffectComposer'
+import { type EffectProps } from './types'
+
+export interface GeometryProps
+  extends EffectProps<typeof GeometryEffect, GeometryEffectOptions> {}
+
+export const Geometry = /*#__PURE__*/ forwardRef<GeometryEffect, GeometryProps>(
+  function Geometry(props, forwardedRef) {
+    const { blendFunction, ...others } = {
+      ...geometryEffectOptionsDefaults,
+      ...props
+    }
+
+    const { geometryPass } = useContext(
+      EffectComposerContext
+    ) as EffectComposerContextValue
+
+    const effect = useMemo(
+      () => new GeometryEffect({ blendFunction }),
+      [blendFunction]
+    )
+    useEffect(() => {
+      return () => {
+        effect.dispose()
+      }
+    }, [effect])
+
+    return (
+      <primitive
+        ref={forwardedRef}
+        object={effect}
+        geometryBuffer={geometryPass?.geometryTexture}
+        {...others}
+      />
+    )
+  }
+)

package/src/r3f/LensFlare.tsx

@@ -0,0 +1,30 @@
+import { forwardRef, useEffect, useMemo } from 'react'
+
+import {
+  LensFlareEffect,
+  lensFlareEffectOptionsDefaults,
+  type LensFlareEffectOptions
+} from '../LensFlareEffect'
+import { type EffectProps } from './types'
+
+export interface LensFlareProps
+  extends EffectProps<typeof LensFlareEffect, LensFlareEffectOptions> {}
+
+export const LensFlare = /*#__PURE__*/ forwardRef<
+  LensFlareEffect,
+  LensFlareProps
+>(function LensFlare(props, forwardedRef) {
+  const { blendFunction, ...others } = {
+    ...lensFlareEffectOptionsDefaults,
+    ...props
+  }
+
+  const effect = useMemo(() => new LensFlareEffect(), [])
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
+
+  return <primitive ref={forwardedRef} object={effect} {...others} />
+})

package/src/r3f/Normal.tsx

@@ -0,0 +1,49 @@
+import { EffectComposerContext } from '@react-three/postprocessing'
+import { forwardRef, useContext, useEffect, useMemo } from 'react'
+
+import {
+  NormalEffect,
+  normalEffectOptionsDefaults,
+  type NormalEffectOptions
+} from '../NormalEffect'
+import { type EffectComposerContextValue } from './EffectComposer'
+import { type EffectProps } from './types'
+
+export interface NormalProps
+  extends EffectProps<typeof NormalEffect, NormalEffectOptions> {}
+
+export const Normal = /*#__PURE__*/ forwardRef<NormalEffect, NormalProps>(
+  function Normal(props, forwardedRef) {
+    const { blendFunction, ...others } = {
+      ...normalEffectOptionsDefaults,
+      ...props
+    }
+
+    const { geometryPass, normalPass, camera } = useContext(
+      EffectComposerContext
+    ) as EffectComposerContextValue
+
+    const effect = useMemo(
+      () => new NormalEffect(camera, { blendFunction }),
+      [camera, blendFunction]
+    )
+    useEffect(() => {
+      return () => {
+        effect.dispose()
+      }
+    }, [effect])
+
+    return (
+      <primitive
+        ref={forwardedRef}
+        object={effect}
+        mainCamera={camera}
+        normalBuffer={
+          geometryPass?.geometryTexture ?? normalPass?.texture ?? null
+        }
+        {...others}
+        octEncoded={geometryPass?.geometryTexture != null}
+      />
+    )
+  }
+)

package/src/r3f/SSAO.tsx

@@ -0,0 +1,123 @@
+import { applyProps, useThree } from '@react-three/fiber'
+import { N8AOPostPass } from 'n8ao'
+import { type Effect } from 'postprocessing'
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef } from 'react'
+import { Color } from 'three'
+
+export interface SSAOProps {
+  aoSamples?: number
+  aoRadius?: number
+  aoTones?: number
+  denoiseSamples?: number
+  denoiseRadius?: number
+  distanceFalloff?: number
+  intensity?: number
+  denoiseIterations?: number
+  renderMode?: number
+  biasOffset?: number
+  biasMultiplier?: number
+  color?: Color
+  gammaCorrection?: boolean
+  logarithmicDepthBuffer?: boolean
+  screenSpaceRadius?: boolean
+  halfRes?: boolean
+  depthAwareUpsampling?: boolean
+  colorMultiply?: boolean
+  transparencyAware?: boolean
+  accumulate?: boolean
+}
+
+export const SSAO = /*#__PURE__*/ forwardRef<Effect, SSAOProps>(function SSAO(
+  {
+    aoSamples = 16,
+    aoRadius = 5,
+    aoTones = 0,
+    denoiseSamples = 8,
+    denoiseRadius = 12,
+    distanceFalloff = 1,
+    intensity = 1, // Changed
+    denoiseIterations = 2,
+    renderMode = 0,
+    biasOffset = 0,
+    biasMultiplier = 0,
+    color = new Color(0, 0, 0),
+    gammaCorrection = false, // Changed
+    logarithmicDepthBuffer = false,
+    screenSpaceRadius = false,
+    halfRes = false,
+    depthAwareUpsampling = true,
+    colorMultiply = true,
+    transparencyAware = false,
+    accumulate = false
+  },
+  forwardedRef
+) {
+  const { camera, scene, size } = useThree()
+  const effect = useMemo(
+    () => new N8AOPostPass(scene, camera, size.width, size.height),
+    // TODO: Change of scene and camera break the pass.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  const effectRef = useRef(effect)
+  effectRef.current = effect
+
+  useLayoutEffect(() => {
+    effectRef.current.setSize(size.width, size.height)
+  }, [size.width, size.height])
+
+  useLayoutEffect(() => {
+    applyProps(effectRef.current.configuration, {
+      aoSamples,
+      aoRadius,
+      aoTones,
+      denoiseSamples,
+      denoiseRadius,
+      distanceFalloff,
+      intensity,
+      denoiseIterations,
+      renderMode,
+      biasOffset,
+      biasMultiplier,
+      color,
+      gammaCorrection,
+      logarithmicDepthBuffer,
+      screenSpaceRadius,
+      halfRes,
+      depthAwareUpsampling,
+      colorMultiply,
+      transparencyAware,
+      accumulate
+    })
+  }, [
+    aoSamples,
+    aoRadius,
+    aoTones,
+    denoiseSamples,
+    denoiseRadius,
+    distanceFalloff,
+    intensity,
+    denoiseIterations,
+    renderMode,
+    biasOffset,
+    biasMultiplier,
+    color,
+    gammaCorrection,
+    logarithmicDepthBuffer,
+    screenSpaceRadius,
+    halfRes,
+    depthAwareUpsampling,
+    colorMultiply,
+    transparencyAware,
+    accumulate
+  ])
+
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
+
+  return <primitive ref={forwardedRef} object={effect} />
+})

package/src/r3f/index.ts

@@ -0,0 +1,8 @@
+export * from './Depth'
+export * from './Dithering'
+export * from './EffectComposer'
+export * from './Geometry'
+export * from './LensFlare'
+export * from './Normal'
+export * from './SSAO'
+export * from './types'

package/src/r3f/types.ts

@@ -0,0 +1,12 @@
+import { type Node } from '@react-three/fiber'
+import { type EffectConstructor } from '@react-three/postprocessing'
+import { type BlendFunction } from 'postprocessing'
+
+export type EffectProps<T extends EffectConstructor, Options = {}> = Node<
+  InstanceType<T>,
+  T
+> &
+  Options & {
+    blendFunction?: BlendFunction
+    opacity?: number
+  }