@basementstudio/shader-lab 0.1.0 → 1.0.2

package/packages/shader-lab-react/src/renderer/dithering-pass.ts

@@ -1,322 +0,0 @@
-import * as THREE from "three/webgpu"
-import {
-  abs,
-  clamp,
-  float,
-  floor,
-  fract,
-  max,
-  mix,
-  smoothstep,
-  texture as tslTexture,
-  type TSLNode,
-  uniform,
-  uv,
-  vec2,
-  vec3,
-  vec4,
-} from "three/tsl"
-import { buildDitherTextures, type DitherTextures } from "./dither-textures"
-import { PassNode } from "./pass-node"
-import type { LayerParameterValues } from "../types/editor"
-
-type Node = TSLNode
-type DitherColorMode = "duo-tone" | "monochrome" | "source"
-
-function hexToRgb(hex: string): [number, number, number] {
-  const normalized = hex.trim().replace("#", "")
-  const value =
-    normalized.length === 3
-      ? normalized
-          .split("")
-          .map((entry) => `${entry}${entry}`)
-          .join("")
-      : normalized.padEnd(6, "0").slice(0, 6)
-
-  return [
-    Number.parseInt(value.slice(0, 2), 16) / 255,
-    Number.parseInt(value.slice(2, 4), 16) / 255,
-    Number.parseInt(value.slice(4, 6), 16) / 255,
-  ]
-}
-
-export class DitheringPass extends PassNode {
-  private colorMode: DitherColorMode = "source"
-  private isAnimated = false
-
-  private readonly colorBlueUniform: Node
-  private readonly colorGreenUniform: Node
-  private readonly colorRedUniform: Node
-  private readonly highlightBlueUniform: Node
-  private readonly highlightGreenUniform: Node
-  private readonly highlightRedUniform: Node
-  private readonly levelsUniform: Node
-  private readonly logicalHeightUniform: Node
-  private readonly logicalWidthUniform: Node
-  private readonly matrixSizeUniform: Node
-  private readonly pixelSizeUniform: Node
-  private readonly shadowBlueUniform: Node
-  private readonly shadowGreenUniform: Node
-  private readonly shadowRedUniform: Node
-  private readonly spreadUniform: Node
-  private readonly textures: DitherTextures
-
-  // Effects uniforms
-  private readonly dotScaleUniform: Node
-  private readonly animateDitherUniform: Node
-  private readonly ditherSpeedUniform: Node
-  private readonly timeUniform: Node
-  private readonly chromaticSplitUniform: Node
-
-  private currentTexture: THREE.DataTexture
-  private ditherNode: Node | null = null
-  private ditherNodeG: Node | null = null
-  private ditherNodeB: Node | null = null
-  private readonly placeholder: THREE.Texture
-  private sourceTextureNode: Node | null = null
-
-  constructor(layerId: string) {
-    super(layerId)
-    this.textures = buildDitherTextures()
-    this.placeholder = new THREE.Texture()
-    this.currentTexture = this.textures.bayer4
-    this.levelsUniform = uniform(4)
-    this.logicalWidthUniform = uniform(1)
-    this.logicalHeightUniform = uniform(1)
-    this.matrixSizeUniform = uniform(4)
-    this.pixelSizeUniform = uniform(1)
-    this.spreadUniform = uniform(0.5)
-    this.colorRedUniform = uniform(0.96)
-    this.colorGreenUniform = uniform(0.96)
-    this.colorBlueUniform = uniform(0.94)
-    this.shadowRedUniform = uniform(0.06)
-    this.shadowGreenUniform = uniform(0.06)
-    this.shadowBlueUniform = uniform(0.06)
-    this.highlightRedUniform = uniform(0.96)
-    this.highlightGreenUniform = uniform(0.95)
-    this.highlightBlueUniform = uniform(0.91)
-
-    // Effects uniforms
-    this.dotScaleUniform = uniform(1.0)
-    this.animateDitherUniform = uniform(0.0)
-    this.ditherSpeedUniform = uniform(1.0)
-    this.timeUniform = uniform(0.0)
-    this.chromaticSplitUniform = uniform(0.0)
-
-    this.rebuildEffectNode()
-  }
-
-  override render(
-    renderer: THREE.WebGPURenderer,
-    inputTexture: THREE.Texture,
-    outputTarget: THREE.WebGLRenderTarget,
-    time: number,
-    delta: number,
-  ): void {
-    if (this.sourceTextureNode) {
-      this.sourceTextureNode.value = inputTexture
-    }
-
-    if (this.ditherNode) {
-      this.ditherNode.value = this.currentTexture
-    }
-    if (this.ditherNodeG) {
-      this.ditherNodeG.value = this.currentTexture
-    }
-    if (this.ditherNodeB) {
-      this.ditherNodeB.value = this.currentTexture
-    }
-
-    super.render(renderer, inputTexture, outputTarget, time, delta)
-  }
-
-  protected override beforeRender(time: number, _delta: number): void {
-    this.timeUniform.value = time
-  }
-
-  override needsContinuousRender(): boolean {
-    return this.isAnimated
-  }
-
-  override updateParams(params: LayerParameterValues): void {
-    const nextColorMode: DitherColorMode =
-      params.colorMode === "monochrome" ||
-      params.colorMode === "duo-tone"
-        ? params.colorMode
-        : "source"
-
-    const [red, green, blue] = hexToRgb(typeof params.monoColor === "string" ? params.monoColor : "#f5f5f0")
-    const [shadowRed, shadowGreen, shadowBlue] = hexToRgb(
-      typeof params.shadowColor === "string" ? params.shadowColor : "#101010",
-    )
-    const [highlightRed, highlightGreen, highlightBlue] = hexToRgb(
-      typeof params.highlightColor === "string" ? params.highlightColor : "#f5f2e8",
-    )
-
-    this.colorRedUniform.value = red
-    this.colorGreenUniform.value = green
-    this.colorBlueUniform.value = blue
-    this.shadowRedUniform.value = shadowRed
-    this.shadowGreenUniform.value = shadowGreen
-    this.shadowBlueUniform.value = shadowBlue
-    this.highlightRedUniform.value = highlightRed
-    this.highlightGreenUniform.value = highlightGreen
-    this.highlightBlueUniform.value = highlightBlue
-    this.levelsUniform.value =
-      typeof params.levels === "number" ? Math.max(2, params.levels) : 4
-    this.pixelSizeUniform.value =
-      typeof params.pixelSize === "number" ? Math.max(1, Math.round(params.pixelSize)) : 1
-    this.spreadUniform.value =
-      typeof params.spread === "number"
-        ? Math.max(0, Math.min(1, params.spread))
-        : 0.5
-
-    switch (params.algorithm) {
-      case "bayer-2x2":
-        this.currentTexture = this.textures.bayer2
-        this.matrixSizeUniform.value = 2
-        break
-      case "bayer-8x8":
-        this.currentTexture = this.textures.bayer8
-        this.matrixSizeUniform.value = 8
-        break
-      case "noise":
-        this.currentTexture = this.textures.noise
-        this.matrixSizeUniform.value = 64
-        break
-      default:
-        this.currentTexture = this.textures.bayer4
-        this.matrixSizeUniform.value = 4
-        break
-    }
-
-    // Effects params
-    this.dotScaleUniform.value =
-      typeof params.dotScale === "number" ? params.dotScale : 1.0
-    this.isAnimated = params.animateDither === true
-    this.animateDitherUniform.value = this.isAnimated ? 1.0 : 0.0
-    this.ditherSpeedUniform.value =
-      typeof params.ditherSpeed === "number" ? params.ditherSpeed : 1.0
-    this.chromaticSplitUniform.value = params.chromaticSplit === true ? 1.0 : 0.0
-
-    if (nextColorMode !== this.colorMode) {
-      this.colorMode = nextColorMode
-      this.rebuildEffectNode()
-    }
-  }
-
-  override dispose(): void {
-    this.placeholder.dispose()
-    this.textures.bayer2.dispose()
-    this.textures.bayer4.dispose()
-    this.textures.bayer8.dispose()
-    this.textures.noise.dispose()
-    super.dispose()
-  }
-
-  override updateLogicalSize(width: number, height: number): void {
-    this.logicalWidthUniform.value = Math.max(1, width)
-    this.logicalHeightUniform.value = Math.max(1, height)
-  }
-
-  protected override buildEffectNode(): Node {
-    if (!(this.levelsUniform && this.matrixSizeUniform)) {
-      return this.inputNode
-    }
-
-    const pixelSize = max(this.pixelSizeUniform, float(1))
-    const renderTargetUv = vec2(uv().x, float(1).sub(uv().y))
-    const logicalWidth = max(this.logicalWidthUniform.div(pixelSize), float(1))
-    const logicalHeight = max(this.logicalHeightUniform.div(pixelSize), float(1))
-    const logicalDims = vec2(logicalWidth, logicalHeight)
-
-    // Cell grid
-    const cellCoordinates = vec2(
-      floor(renderTargetUv.x.mul(logicalWidth)),
-      floor(renderTargetUv.y.mul(logicalHeight)),
-    )
-    const snappedUv = vec2(
-      cellCoordinates.x.add(0.5).div(logicalWidth),
-      cellCoordinates.y.add(0.5).div(logicalHeight),
-    )
-
-    // Animated Dither: shift ditherUv by time * speed when animate is on
-    const timeOffset = this.timeUniform.mul(this.ditherSpeedUniform).mul(this.animateDitherUniform)
-    const ditherUv = cellCoordinates.div(this.matrixSizeUniform).add(timeOffset)
-
-    // Chromatic Split: sample dither at 3 offset UVs when enabled
-    const splitOffset = this.chromaticSplitUniform.div(this.matrixSizeUniform)
-    const ditherUvR = ditherUv
-    const ditherUvG = ditherUv.add(vec2(splitOffset, float(0)))
-    const ditherUvB = ditherUv.add(vec2(float(0), splitOffset))
-
-    this.sourceTextureNode = tslTexture(this.placeholder, snappedUv)
-    this.ditherNode = tslTexture(this.currentTexture, ditherUvR)
-    this.ditherNodeG = tslTexture(this.currentTexture, ditherUvG)
-    this.ditherNodeB = tslTexture(this.currentTexture, ditherUvB)
-
-    const src = this.sourceTextureNode
-    const thresholdR = float(this.ditherNode.r).sub(float(0.5))
-    const thresholdG = float(this.ditherNodeG.r).sub(float(0.5))
-    const thresholdB = float(this.ditherNodeB.r).sub(float(0.5))
-    const levelsMinusOne = max(this.levelsUniform.sub(float(1)), float(1))
-
-    // Per-channel quantization with independent thresholds
-    const adjustedR = float(src.r).add(thresholdR.mul(this.spreadUniform))
-    const adjustedG = float(src.g).add(thresholdG.mul(this.spreadUniform))
-    const adjustedB = float(src.b).add(thresholdB.mul(this.spreadUniform))
-    const quantizedColor = clamp(
-      vec3(
-        floor(adjustedR.mul(levelsMinusOne).add(0.5)).div(levelsMinusOne),
-        floor(adjustedG.mul(levelsMinusOne).add(0.5)).div(levelsMinusOne),
-        floor(adjustedB.mul(levelsMinusOne).add(0.5)).div(levelsMinusOne),
-      ),
-      vec3(float(0), float(0), float(0)),
-      vec3(float(1), float(1), float(1)),
-    )
-
-    // Color mode
-    const quantizedLuma = float(quantizedColor.x)
-      .mul(float(0.2126))
-      .add(float(quantizedColor.y).mul(float(0.7152)))
-      .add(float(quantizedColor.z).mul(float(0.0722)))
-
-    const monoTint = vec3(
-      this.colorRedUniform,
-      this.colorGreenUniform,
-      this.colorBlueUniform,
-    )
-    const shadowTint = vec3(
-      this.shadowRedUniform,
-      this.shadowGreenUniform,
-      this.shadowBlueUniform,
-    )
-    const highlightTint = vec3(
-      this.highlightRedUniform,
-      this.highlightGreenUniform,
-      this.highlightBlueUniform,
-    )
-
-    let colorResult: Node
-    switch (this.colorMode) {
-      case "monochrome":
-        colorResult = vec3(quantizedLuma, quantizedLuma, quantizedLuma).mul(monoTint)
-        break
-      case "duo-tone":
-        colorResult = mix(shadowTint, highlightTint, quantizedLuma)
-        break
-      default:
-        colorResult = quantizedColor
-        break
-    }
-
-    // Dot Scale: mask within each cell (square shape only)
-    const cellFrac = fract(renderTargetUv.mul(logicalDims))
-    const centered = cellFrac.sub(vec2(0.5, 0.5))
-    const dist = max(abs(centered.x), abs(centered.y))
-    const halfSize = float(0.5).mul(this.dotScaleUniform)
-    const mask = smoothstep(halfSize, halfSize.sub(float(0.01)), dist)
-
-    return vec4(vec3(colorResult).mul(mask), float(1))
-  }
-}