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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@takram/three-geospatial-effects",
+  "version": "0.0.1-alpha.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.cjs",
+      "types": "./types/index.d.ts"
+    },
+    "./r3f": {
+      "import": "./build/r3f.js",
+      "require": "./build/r3f.cjs",
+      "types": "./types/r3f/index.d.ts"
+    }
+  },
+  "main": "./build/index.cjs",
+  "module": "./build/index.js",
+  "types": "./types/index.d.ts",
+  "files": [
+    "build",
+    "src",
+    "types",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "@takram/three-geospatial": "0.0.1-alpha.1",
+    "n8ao": "^1.9.3"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": ">=8.17.10",
+    "@react-three/postprocessing": ">=2.16.3",
+    "postprocessing": ">=6.36.4",
+    "react": ">=18.0",
+    "three": ">=0.170.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "@react-three/postprocessing": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DepthEffect.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/// <reference types="vite-plugin-glsl/ext" />
+
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { Uniform } from 'three'
+
+import { depthShader } from '@takram/three-geospatial'
+
+import fragmentShader from './shaders/depthEffect.frag'
+
+export interface DepthEffectOptions {
+  blendFunction?: BlendFunction
+  useTurbo?: boolean
+  near?: number
+  far?: number
+}
+
+export const depthEffectOptionsDefaults = {
+  blendFunction: BlendFunction.SRC,
+  useTurbo: false,
+  near: 1,
+  far: 1000
+} satisfies DepthEffectOptions
+
+export class DepthEffect extends Effect {
+  constructor(options?: DepthEffectOptions) {
+    const { blendFunction, useTurbo, near, far } = {
+      ...depthEffectOptionsDefaults,
+      ...options
+    }
+
+    super(
+      'DepthEffect',
+      /* glsl */ `
+        ${depthShader}
+        ${fragmentShader}
+      `,
+      {
+        blendFunction,
+        attributes: EffectAttribute.DEPTH,
+        uniforms: new Map([
+          ['near', new Uniform(near)],
+          ['far', new Uniform(far)]
+        ])
+      }
+    )
+    this.useTurbo = useTurbo
+  }
+
+  get useTurbo(): boolean {
+    return this.defines.has('USE_TURBO')
+  }
+
+  set useTurbo(value: boolean) {
+    if (this.useTurbo !== value) {
+      if (value) {
+        this.defines.set('USE_TURBO', '1')
+      } else {
+        this.defines.delete('USE_TURBO')
+      }
+      this.setChanged()
+    }
+  }
+
+  get near(): number {
+    return this.uniforms.get('near')!.value
+  }
+
+  set near(value: number) {
+    this.uniforms.get('near')!.value = value
+  }
+
+  get far(): number {
+    return this.uniforms.get('far')!.value
+  }
+
+  set far(value: number) {
+    this.uniforms.get('far')!.value = value
+  }
+}

package/src/DitheringEffect.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/// <reference types="vite-plugin-glsl/ext" />
+
+import { BlendFunction, Effect } from 'postprocessing'
+
+import fragmentShader from './shaders/ditheringEffect.frag'
+
+export interface DitheringEffectOptions {
+  blendFunction?: BlendFunction
+}
+
+export const ditheringOptionsDefaults = {
+  blendFunction: BlendFunction.NORMAL
+} satisfies DitheringEffectOptions
+
+export class DitheringEffect extends Effect {
+  constructor(options?: DitheringEffectOptions) {
+    const { blendFunction } = {
+      ...ditheringOptionsDefaults,
+      ...options
+    }
+
+    super('DitheringEffect', fragmentShader, {
+      blendFunction
+    })
+  }
+}

package/src/DownsampleThresholdMaterial.ts

@@ -0,0 +1,83 @@
+/// <reference types="vite-plugin-glsl/ext" />
+
+import {
+  NoBlending,
+  ShaderMaterial,
+  Uniform,
+  Vector2,
+  type ShaderMaterialParameters,
+  type Texture
+} from 'three'
+
+import fragmentShader from './shaders/downsampleThreshold.frag'
+import vertexShader from './shaders/downsampleThreshold.vert'
+
+export interface DownsampleThresholdMaterialParameters
+  extends ShaderMaterialParameters {
+  inputBuffer?: Texture | null
+  thresholdLevel?: number
+  thresholdRange?: number
+}
+
+export const downsampleThresholdMaterialParametersDefaults = {
+  thresholdLevel: 10,
+  thresholdRange: 1
+} satisfies DownsampleThresholdMaterialParameters
+
+export class DownsampleThresholdMaterial extends ShaderMaterial {
+  constructor(params?: DownsampleThresholdMaterialParameters) {
+    const {
+      inputBuffer = null,
+      thresholdLevel,
+      thresholdRange,
+      ...others
+    } = {
+      ...downsampleThresholdMaterialParametersDefaults,
+      ...params
+    }
+    super({
+      name: 'DownsampleThresholdMaterial',
+      fragmentShader,
+      vertexShader,
+      uniforms: {
+        inputBuffer: new Uniform(inputBuffer),
+        texelSize: new Uniform(new Vector2()),
+        thresholdLevel: new Uniform(thresholdLevel),
+        thresholdRange: new Uniform(thresholdRange)
+      },
+      blending: NoBlending,
+      toneMapped: false,
+      depthWrite: false,
+      depthTest: false,
+      ...others
+    })
+  }
+
+  setSize(width: number, height: number): void {
+    this.uniforms.texelSize.value.set(1 / width, 1 / height)
+  }
+
+  get inputBuffer(): Texture | null {
+    return this.uniforms.inputBuffer.value
+  }
+
+  set inputBuffer(value: Texture | null) {
+    this.uniforms.inputBuffer.value = value
+  }
+
+  get thresholdLevel(): number {
+    return this.uniforms.thresholdLevel.value
+  }
+
+  set thresholdLevel(value: number) {
+    this.uniforms.thresholdLevel.value = value
+  }
+
+  get thresholdRange(): number {
+    return this.uniforms.thresholdRange.value
+  }
+
+  set thresholdRange(value: number) {
+    this.uniforms.thresholdRange.value = value
+  }
+}

package/src/GeometryEffect.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/// <reference types="vite-plugin-glsl/ext" />
+
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { Uniform, type Texture } from 'three'
+
+import { packingShader } from '@takram/three-geospatial'
+
+import fragmentShader from './shaders/geometryEffect.frag'
+
+export type GeometryEffectOutput = 'normal' | 'pbr'
+
+export interface GeometryEffectOptions {
+  blendFunction?: BlendFunction
+  geometryBuffer?: Texture | null
+  output?: GeometryEffectOutput
+}
+
+export const geometryEffectOptionsDefaults = {
+  blendFunction: BlendFunction.SRC,
+  output: 'normal'
+} satisfies GeometryEffectOptions
+
+export class GeometryEffect extends Effect {
+  constructor(options?: GeometryEffectOptions) {
+    const {
+      blendFunction,
+      geometryBuffer = null,
+      output
+    } = {
+      ...geometryEffectOptionsDefaults,
+      ...options
+    }
+    super(
+      'GeometryEffect',
+      /* glsl */ `
+        ${packingShader}
+        ${fragmentShader}
+      `,
+      {
+        blendFunction,
+        attributes: EffectAttribute.DEPTH,
+        uniforms: new Map<string, Uniform>([
+          ['geometryBuffer', new Uniform(geometryBuffer)]
+        ])
+      }
+    )
+    this.output = output
+  }
+
+  get geometryBuffer(): Texture | null {
+    return this.uniforms.get('geometryBuffer')!.value
+  }
+
+  set geometryBuffer(value: Texture | null) {
+    this.uniforms.get('geometryBuffer')!.value = value
+  }
+
+  get output(): GeometryEffectOutput {
+    return this.defines.has('OUTPUT_NORMAL') ? 'normal' : 'pbr'
+  }
+
+  set output(value: GeometryEffectOutput) {
+    if (value !== this.output) {
+      if (value === 'normal') {
+        this.defines.set('OUTPUT_NORMAL', '1')
+      } else {
+        this.defines.delete('OUTPUT_NORMAL')
+      }
+      if (value === 'pbr') {
+        this.defines.set('OUTPUT_PBR', '1')
+      } else {
+        this.defines.delete('OUTPUT_PBR')
+      }
+      this.setChanged()
+    }
+  }
+}

package/src/GeometryPass.ts

@@ -0,0 +1,53 @@
+import { RenderPass } from 'postprocessing'
+import {
+  HalfFloatType,
+  type Camera,
+  type Material,
+  type Scene,
+  type Texture,
+  type WebGLRenderer,
+  type WebGLRenderTarget
+} from 'three'
+
+import { setupMaterialsForGeometryPass } from './setupMaterialsForGeometryPass'
+
+export class GeometryPass extends RenderPass {
+  readonly geometryTexture: Texture
+
+  constructor(
+    inputBuffer: WebGLRenderTarget,
+    scene?: Scene,
+    camera?: Camera,
+    overrideMaterial?: Material
+  ) {
+    super(scene, camera, overrideMaterial)
+    this.geometryTexture = inputBuffer.texture.clone()
+    this.geometryTexture.isRenderTargetTexture = true
+    // We could use UnsignedByteType but it causes banding in aerial
+    // perspective's lighting.
+    this.geometryTexture.type = HalfFloatType
+
+    setupMaterialsForGeometryPass()
+  }
+
+  override render(
+    renderer: WebGLRenderer,
+    inputBuffer: WebGLRenderTarget | null,
+    outputBuffer: WebGLRenderTarget | null,
+    deltaTime?: number,
+    stencilTest?: boolean
+  ): void {
+    if (inputBuffer != null) {
+      inputBuffer.textures[1] = this.geometryTexture
+    }
+    super.render(renderer, inputBuffer, null)
+    if (inputBuffer != null) {
+      inputBuffer.textures.length = 1
+    }
+  }
+
+  setSize(width: number, height: number): void {
+    this.geometryTexture.image.width = width
+    this.geometryTexture.image.height = height
+  }
+}

package/src/LensFlareEffect.ts

@@ -0,0 +1,185 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+/// <reference types="vite-plugin-glsl/ext" />
+
+import {
+  BlendFunction,
+  Effect,
+  KawaseBlurPass,
+  KernelSize,
+  MipmapBlurPass,
+  Resolution,
+  ShaderPass
+} from 'postprocessing'
+import {
+  HalfFloatType,
+  Uniform,
+  WebGLRenderTarget,
+  type Event,
+  type TextureDataType,
+  type WebGLRenderer
+} from 'three'
+
+import { DownsampleThresholdMaterial } from './DownsampleThresholdMaterial'
+import { LensFlareFeaturesMaterial } from './LensFlareFeaturesMaterial'
+
+import fragmentShader from './shaders/lensFlareEffect.frag'
+
+export interface LensFlareEffectOptions {
+  blendFunction?: BlendFunction
+  resolutionScale?: number
+  width?: number
+  height?: number
+  resolutionX?: number
+  resolutionY?: number
+  intensity?: number
+}
+
+export const lensFlareEffectOptionsDefaults = {
+  blendFunction: BlendFunction.NORMAL,
+  resolutionScale: 0.5,
+  width: Resolution.AUTO_SIZE,
+  height: Resolution.AUTO_SIZE,
+  intensity: 0.005
+} satisfies LensFlareEffectOptions
+
+// Reference: https://www.froyok.fr/blog/2021-09-ue4-custom-lens-flare/
+export class LensFlareEffect extends Effect {
+  readonly resolution: Resolution
+  readonly renderTarget1: WebGLRenderTarget
+  readonly renderTarget2: WebGLRenderTarget
+
+  readonly thresholdMaterial: DownsampleThresholdMaterial
+  readonly thresholdPass: ShaderPass
+  readonly blurPass: MipmapBlurPass
+  readonly preBlurPass: KawaseBlurPass
+  readonly featuresMaterial: LensFlareFeaturesMaterial
+  readonly featuresPass: ShaderPass
+
+  constructor(options?: LensFlareEffectOptions) {
+    const {
+      blendFunction,
+      resolutionScale,
+      width,
+      height,
+      resolutionX = width,
+      resolutionY = height,
+      intensity
+    } = {
+      ...lensFlareEffectOptionsDefaults,
+      ...options
+    }
+    super('LensFlareEffect', fragmentShader, {
+      blendFunction,
+      uniforms: new Map<string, Uniform>([
+        ['bloomBuffer', new Uniform(null)],
+        ['featuresBuffer', new Uniform(null)],
+        ['intensity', new Uniform(1)]
+      ])
+    })
+
+    this.renderTarget1 = new WebGLRenderTarget(1, 1, {
+      depthBuffer: false,
+      stencilBuffer: false,
+      type: HalfFloatType
+    })
+    this.renderTarget1.texture.name = 'LensFlare.Target1'
+
+    this.renderTarget2 = new WebGLRenderTarget(1, 1, {
+      depthBuffer: false,
+      stencilBuffer: false,
+      type: HalfFloatType
+    })
+    this.renderTarget2.texture.name = 'LensFlare.Target2'
+
+    this.thresholdMaterial = new DownsampleThresholdMaterial()
+    this.thresholdPass = new ShaderPass(this.thresholdMaterial)
+
+    this.blurPass = new MipmapBlurPass()
+    this.blurPass.levels = 8
+
+    this.preBlurPass = new KawaseBlurPass({
+      kernelSize: KernelSize.SMALL
+    })
+
+    this.featuresMaterial = new LensFlareFeaturesMaterial()
+    this.featuresPass = new ShaderPass(this.featuresMaterial)
+
+    this.uniforms.get('bloomBuffer')!.value = this.blurPass.texture
+    this.uniforms.get('featuresBuffer')!.value = this.renderTarget1.texture
+
+    this.resolution = new Resolution(
+      this,
+      resolutionX,
+      resolutionY,
+      resolutionScale
+    )
+    this.resolution.addEventListener<keyof Event>(
+      'change' as keyof Event,
+      this.onResolutionChange
+    )
+
+    this.intensity = intensity
+  }
+
+  private readonly onResolutionChange = (): void => {
+    this.setSize(this.resolution.baseWidth, this.resolution.baseHeight)
+  }
+
+  override initialize(
+    renderer: WebGLRenderer,
+    alpha: boolean,
+    frameBufferType: TextureDataType
+  ): void {
+    this.thresholdPass.initialize(renderer, alpha, frameBufferType)
+    this.blurPass.initialize(renderer, alpha, frameBufferType)
+    this.preBlurPass.initialize(renderer, alpha, frameBufferType)
+    this.featuresPass.initialize(renderer, alpha, frameBufferType)
+  }
+
+  override update(
+    renderer: WebGLRenderer,
+    inputBuffer: WebGLRenderTarget,
+    deltaTime?: number
+  ): void {
+    this.thresholdPass.render(renderer, inputBuffer, this.renderTarget1)
+    this.blurPass.render(renderer, this.renderTarget1, null)
+    this.preBlurPass.render(renderer, this.renderTarget1, this.renderTarget2)
+    this.featuresPass.render(renderer, this.renderTarget2, this.renderTarget1)
+  }
+
+  override setSize(width: number, height: number): void {
+    const resolution = this.resolution
+    resolution.setBaseSize(width, height)
+    this.renderTarget1.setSize(resolution.width, resolution.height)
+    this.renderTarget2.setSize(resolution.width, resolution.height)
+    this.thresholdMaterial.setSize(resolution.width, resolution.height)
+    this.blurPass.setSize(resolution.width, resolution.height)
+    this.preBlurPass.setSize(resolution.width, resolution.height)
+    this.featuresMaterial.setSize(resolution.width, resolution.height)
+  }
+
+  get intensity(): number {
+    return this.uniforms.get('intensity')!.value
+  }
+
+  set intensity(value: number) {
+    this.uniforms.get('intensity')!.value = value
+  }
+
+  get thresholdLevel(): number {
+    return this.thresholdMaterial.thresholdLevel
+  }
+
+  set thresholdLevel(value: number) {
+    this.thresholdMaterial.thresholdLevel = value
+  }
+
+  get thresholdRange(): number {
+    return this.thresholdMaterial.thresholdRange
+  }
+
+  set thresholdRange(value: number) {
+    this.thresholdMaterial.thresholdRange = value
+  }
+}

package/src/LensFlareFeaturesMaterial.ts

@@ -0,0 +1,96 @@
+/// <reference types="vite-plugin-glsl/ext" />
+
+import {
+  NoBlending,
+  ShaderMaterial,
+  Uniform,
+  Vector2,
+  type ShaderMaterialParameters,
+  type Texture
+} from 'three'
+
+import fragmentShader from './shaders/lensFlareFeatures.frag'
+import vertexShader from './shaders/lensFlareFeatures.vert'
+
+export interface LensFlareFeaturesMaterialParameters
+  extends ShaderMaterialParameters {
+  inputBuffer?: Texture | null
+  lensColorTexture?: Texture | null
+  ghostAmount?: number
+  haloAmount?: number
+  chromaticAberration?: number
+}
+
+export const lensFlareFeaturesMaterialParametersDefaults = {
+  ghostAmount: 0.001,
+  haloAmount: 0.001,
+  chromaticAberration: 10
+} satisfies LensFlareFeaturesMaterialParameters
+
+export class LensFlareFeaturesMaterial extends ShaderMaterial {
+  constructor(params?: LensFlareFeaturesMaterialParameters) {
+    const {
+      inputBuffer = null,
+      ghostAmount,
+      haloAmount,
+      chromaticAberration
+    } = {
+      ...lensFlareFeaturesMaterialParametersDefaults,
+      ...params
+    }
+    super({
+      name: 'LensFlareFeaturesMaterial',
+      fragmentShader,
+      vertexShader,
+      uniforms: {
+        inputBuffer: new Uniform(inputBuffer),
+        texelSize: new Uniform(new Vector2()),
+        ghostAmount: new Uniform(ghostAmount),
+        haloAmount: new Uniform(haloAmount),
+        chromaticAberration: new Uniform(chromaticAberration)
+      },
+      blending: NoBlending,
+      toneMapped: false,
+      depthWrite: false,
+      depthTest: false
+    })
+  }
+
+  setSize(width: number, height: number): void {
+    const texelSize = this.uniforms.texelSize
+    texelSize.value.x = 1 / width
+    texelSize.value.y = 1 / height
+  }
+
+  get inputBuffer(): Texture | null {
+    return this.uniforms.inputBuffer.value
+  }
+
+  set inputBuffer(value: Texture | null) {
+    this.uniforms.inputBuffer.value = value
+  }
+
+  get ghostAmount(): number {
+    return this.uniforms.ghostAmount.value
+  }
+
+  set ghostAmount(value: number) {
+    this.uniforms.ghostAmount.value = value
+  }
+
+  get haloAmount(): number {
+    return this.uniforms.haloAmount.value
+  }
+
+  set haloAmount(value: number) {
+    this.uniforms.haloAmount.value = value
+  }
+
+  get chromaticAberration(): number {
+    return this.uniforms.chromaticAberration.value
+  }
+
+  set chromaticAberration(value: number) {
+    this.uniforms.chromaticAberration.value = value
+  }
+}