@basementstudio/shader-lab 0.1.0 → 1.0.2

package/src/renderer/ascii-pass.ts

@@ -1,416 +0,0 @@
-import * as THREE from "three/webgpu"
-import { bloom } from "three/examples/jsm/tsl/display/BloomNode.js"
-import {
-  clamp,
-  float,
-  floor,
-  mix,
-  mod,
-  select,
-  texture as tslTexture,
-  type TSLNode,
-  uniform,
-  uv,
-  vec2,
-  vec3,
-  vec4,
-} from "three/tsl"
-import {
-  ASCII_CHARSETS,
-  buildAsciiAtlas,
-  type AsciiFontWeight,
-  DEFAULT_ASCII_CHARS,
-} from "@/renderer/ascii-atlas"
-import { PassNode } from "@/renderer/pass-node"
-import type { LayerParameterValues } from "@/types/editor"
-
-type Node = TSLNode
-type AsciiColorMode = "green-terminal" | "monochrome" | "source"
-type AsciiCharset = keyof typeof ASCII_CHARSETS | "custom"
-
-function clamp01(value: number): number {
-  return Math.max(0, Math.min(1, value))
-}
-
-function parseCssColorRgb(value: string): [number, number, number] {
-  const rgba = value.match(
-    /rgba?\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*[\d.]+)?\s*\)/i,
-  )
-
-  if (rgba) {
-    return [
-      clamp01(Number.parseFloat(rgba[1] ?? "0") / 255),
-      clamp01(Number.parseFloat(rgba[2] ?? "0") / 255),
-      clamp01(Number.parseFloat(rgba[3] ?? "0") / 255),
-    ]
-  }
-
-  const hex = value.trim().replace("#", "")
-
-  if (hex.length === 6) {
-    return [
-      Number.parseInt(hex.slice(0, 2), 16) / 255,
-      Number.parseInt(hex.slice(2, 4), 16) / 255,
-      Number.parseInt(hex.slice(4, 6), 16) / 255,
-    ]
-  }
-
-  if (hex.length === 3) {
-    return [
-      Number.parseInt(`${hex[0] ?? "0"}${hex[0] ?? "0"}`, 16) / 255,
-      Number.parseInt(`${hex[1] ?? "0"}${hex[1] ?? "0"}`, 16) / 255,
-      Number.parseInt(`${hex[2] ?? "0"}${hex[2] ?? "0"}`, 16) / 255,
-    ]
-  }
-
-  return [1, 1, 1]
-}
-
-export class AsciiPass extends PassNode {
-  private atlasTexture: THREE.CanvasTexture | null = null
-  private atlasTextureNodes: Node[] = []
-  private bloomEnabled = false
-  private bloomNode: ReturnType<typeof bloom> | null = null
-  private readonly bloomIntensityUniform: Node
-  private readonly bloomRadiusUniform: Node
-  private readonly bloomSoftnessUniform: Node
-  private readonly bloomThresholdUniform: Node
-  private readonly cellSizeUniform: Node
-  private readonly bgOpacityUniform: Node
-  private readonly colorModeUniform: Node
-  private readonly invertUniform: Node
-  private readonly monoBlueUniform: Node
-  private readonly monoGreenUniform: Node
-  private readonly logicalHeightUniform: Node
-  private readonly logicalWidthUniform: Node
-  private readonly monoRedUniform: Node
-  private readonly numCharsUniform: Node
-  private readonly placeholder: THREE.Texture
-  private sourceTextureNodes: Node[] = []
-
-  private currentCellSize = 12
-  private currentCharset: AsciiCharset = "light"
-  private currentCustomChars = DEFAULT_ASCII_CHARS
-  private currentFontWeight: AsciiFontWeight = "regular"
-
-  constructor(layerId: string) {
-    super(layerId)
-    this.placeholder = new THREE.Texture()
-    this.bloomIntensityUniform = uniform(1.25)
-    this.bloomRadiusUniform = uniform(6)
-    this.bloomSoftnessUniform = uniform(0.35)
-    this.bloomThresholdUniform = uniform(0.6)
-    this.cellSizeUniform = uniform(12)
-    this.logicalWidthUniform = uniform(1)
-    this.logicalHeightUniform = uniform(1)
-    this.numCharsUniform = uniform(DEFAULT_ASCII_CHARS.length)
-    this.colorModeUniform = uniform(1)
-    this.monoRedUniform = uniform(0.96)
-    this.monoGreenUniform = uniform(0.96)
-    this.monoBlueUniform = uniform(0.94)
-    this.bgOpacityUniform = uniform(0)
-    this.invertUniform = uniform(0)
-    this.atlasTexture = buildAsciiAtlas(DEFAULT_ASCII_CHARS, "regular", this.currentCellSize)
-    this.rebuildEffectNode()
-  }
-
-  override render(
-    renderer: THREE.WebGPURenderer,
-    inputTexture: THREE.Texture,
-    outputTarget: THREE.WebGLRenderTarget,
-    time: number,
-    delta: number,
-  ): void {
-    for (const sourceTextureNode of this.sourceTextureNodes) {
-      sourceTextureNode.value = inputTexture
-    }
-
-    if (this.atlasTexture) {
-      for (const atlasTextureNode of this.atlasTextureNodes) {
-        atlasTextureNode.value = this.atlasTexture
-      }
-    }
-
-    super.render(renderer, inputTexture, outputTarget, time, delta)
-  }
-
-  override updateParams(params: LayerParameterValues): void {
-    const nextCellSize =
-      typeof params.cellSize === "number" ? Math.max(4, Math.round(params.cellSize)) : 12
-    const nextCharset = this.resolveCharset(params.charset)
-    const nextCustomChars =
-      typeof params.customChars === "string" ? params.customChars : DEFAULT_ASCII_CHARS
-    const nextFontWeight = this.resolveFontWeight(params.fontWeight)
-    const nextColorMode = this.resolveColorMode(params.colorMode)
-    const nextBgOpacity =
-      typeof params.bgOpacity === "number" ? clamp01(params.bgOpacity) : 0
-    const nextBloomEnabled = params.bloomEnabled === true
-    const nextBloomIntensity =
-      typeof params.bloomIntensity === "number" ? Math.max(0, params.bloomIntensity) : 1.25
-    const nextBloomThreshold =
-      typeof params.bloomThreshold === "number" ? clamp01(params.bloomThreshold) : 0.6
-    const nextBloomRadius =
-      typeof params.bloomRadius === "number" ? Math.max(0, params.bloomRadius) : 6
-    const nextBloomSoftness =
-      typeof params.bloomSoftness === "number" ? clamp01(params.bloomSoftness) : 0.35
-    const [red, green, blue] = parseCssColorRgb(
-      typeof params.monoColor === "string" ? params.monoColor : "#f5f5f0",
-    )
-
-    this.cellSizeUniform.value = nextCellSize
-    this.bgOpacityUniform.value = nextBgOpacity
-    this.bloomIntensityUniform.value = nextBloomIntensity
-    this.bloomRadiusUniform.value = nextBloomRadius
-    this.bloomSoftnessUniform.value = nextBloomSoftness
-    this.bloomThresholdUniform.value = nextBloomThreshold
-    this.invertUniform.value = params.invert === true ? 1 : 0
-    this.monoRedUniform.value = red
-    this.monoGreenUniform.value = green
-    this.monoBlueUniform.value = blue
-
-    this.colorModeUniform.value = this.getColorModeValue(nextColorMode)
-
-    const needsAtlasRebuild =
-      nextCellSize !== this.currentCellSize ||
-      nextCharset !== this.currentCharset ||
-      nextFontWeight !== this.currentFontWeight ||
-      (nextCharset === "custom" && nextCustomChars !== this.currentCustomChars)
-
-    this.currentCellSize = nextCellSize
-    this.currentCharset = nextCharset
-    this.currentCustomChars = nextCustomChars
-    this.currentFontWeight = nextFontWeight
-
-    if (nextBloomEnabled !== this.bloomEnabled) {
-      this.bloomEnabled = nextBloomEnabled
-      this.rebuildEffectNode()
-      return
-    }
-
-    if (this.bloomNode) {
-      this.bloomNode.strength.value = nextBloomIntensity
-      this.bloomNode.radius.value = this.normalizeBloomRadius(nextBloomRadius)
-      this.bloomNode.threshold.value = nextBloomThreshold
-      this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(nextBloomSoftness)
-    }
-
-    if (needsAtlasRebuild) {
-      this.rebuildAtlas()
-    }
-  }
-
-  override dispose(): void {
-    this.disposeBloomNode()
-    this.placeholder.dispose()
-    this.atlasTexture?.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.cellSizeUniform && this.numCharsUniform && this.placeholder)) {
-      return this.inputNode
-    }
-
-    this.disposeBloomNode()
-    this.bloomNode = null
-    this.sourceTextureNodes = []
-    this.atlasTextureNodes = []
-
-    const renderTargetUv = vec2(uv().x, float(1).sub(uv().y))
-    const logicalScreenSize = vec2(this.logicalWidthUniform, this.logicalHeightUniform)
-    const normalizedCellSize = vec2(this.cellSizeUniform, this.cellSizeUniform).div(
-      logicalScreenSize,
-    )
-    const sampleAscii = (sampleUv: Node) => {
-      const safeUv = clamp(sampleUv, vec2(float(0), float(0)), vec2(float(1), float(1)))
-      const screenPixel = floor(safeUv.mul(logicalScreenSize))
-      const cellCenterUv = floor(safeUv.div(normalizedCellSize))
-        .add(vec2(0.5, 0.5))
-        .mul(normalizedCellSize)
-      const localCellPixel = vec2(
-        mod(screenPixel.x, this.cellSizeUniform),
-        mod(screenPixel.y, this.cellSizeUniform),
-      )
-      const sampledColor = this.trackSourceTextureNode(cellCenterUv)
-      const luma = float(sampledColor.r)
-        .mul(float(0.2126))
-        .add(float(sampledColor.g).mul(float(0.7152)))
-        .add(float(sampledColor.b).mul(float(0.0722)))
-      const adjustedLuma = select(
-        this.invertUniform.greaterThan(float(0.5)),
-        float(1).sub(luma),
-        luma,
-      )
-      const charIndex = floor(
-        clamp(
-          adjustedLuma.mul(this.numCharsUniform.sub(float(1))),
-          float(0),
-          this.numCharsUniform.sub(float(1)),
-        ),
-      )
-      const atlasUv = vec2(
-        charIndex
-          .mul(this.cellSizeUniform)
-          .add(localCellPixel.x)
-          .add(float(0.5))
-          .div(this.numCharsUniform.mul(this.cellSizeUniform)),
-        localCellPixel.y.add(float(0.5)).div(this.cellSizeUniform),
-      )
-      const characterMask = float(this.trackAtlasTextureNode(atlasUv).r)
-      const sourceColor = vec3(
-        float(sampledColor.r),
-        float(sampledColor.g),
-        float(sampledColor.b),
-      )
-      const monoTint = vec3(
-        this.monoRedUniform,
-        this.monoGreenUniform,
-        this.monoBlueUniform,
-      )
-      const monochromeColor = monoTint.mul(adjustedLuma)
-      const greenTerminalColor = vec3(float(0), adjustedLuma, float(0))
-      const glyphColor = select(
-        this.colorModeUniform.lessThan(float(0.5)),
-        sourceColor,
-        select(
-          this.colorModeUniform.lessThan(float(1.5)),
-          monochromeColor,
-          greenTerminalColor,
-        ),
-      )
-      const sourceBackground = sourceColor.mul(this.bgOpacityUniform)
-      const backgroundColor = select(
-        this.colorModeUniform.lessThan(float(0.5)),
-        sourceBackground,
-        vec3(float(0), float(0), float(0)),
-      )
-
-      return {
-        baseColor: mix(backgroundColor, glyphColor, characterMask),
-        emissiveColor: glyphColor.mul(characterMask),
-      }
-    }
-
-    const baseSample = sampleAscii(renderTargetUv)
-
-    if (!this.bloomEnabled) {
-      return vec4(baseSample.baseColor, float(1))
-    }
-
-    const bloomInput = vec4(baseSample.emissiveColor, float(1))
-    this.bloomNode = bloom(
-      bloomInput,
-      this.bloomIntensityUniform.value as number,
-      this.normalizeBloomRadius(this.bloomRadiusUniform.value as number),
-      this.bloomThresholdUniform.value as number,
-    )
-    this.bloomNode.smoothWidth.value = this.normalizeBloomSoftness(
-      this.bloomSoftnessUniform.value as number,
-    )
-
-    return vec4(
-      clamp(
-        baseSample.baseColor.add(this.getBloomTextureNode().rgb),
-        vec3(float(0), float(0), float(0)),
-        vec3(float(1), float(1), float(1)),
-      ),
-      float(1),
-    )
-  }
-
-  private getActiveChars(): string {
-    return this.currentCharset === "custom"
-      ? this.currentCustomChars || " "
-      : ASCII_CHARSETS[this.currentCharset] ?? DEFAULT_ASCII_CHARS
-  }
-
-  private getColorModeValue(colorMode: AsciiColorMode): number {
-    switch (colorMode) {
-      case "source":
-        return 0
-      case "green-terminal":
-        return 2
-      default:
-        return 1
-    }
-  }
-
-  private rebuildAtlas(): void {
-    const chars = this.getActiveChars()
-    this.atlasTexture?.dispose()
-    this.atlasTexture = buildAsciiAtlas(chars, this.currentFontWeight, this.currentCellSize)
-    this.numCharsUniform.value = chars.length
-    this.rebuildEffectNode()
-  }
-
-  private resolveCharset(value: unknown): AsciiCharset {
-    return value === "binary" ||
-      value === "blocks" ||
-      value === "custom" ||
-      value === "dense" ||
-      value === "hatching" ||
-      value === "light"
-      ? value
-      : "light"
-  }
-
-  private resolveColorMode(value: unknown): AsciiColorMode {
-    return value === "green-terminal" || value === "source" ? value : "monochrome"
-  }
-
-  private resolveFontWeight(value: unknown): AsciiFontWeight {
-    return value === "bold" || value === "thin" ? value : "regular"
-  }
-
-  private normalizeBloomRadius(value: number): number {
-    return clamp01(value / 24)
-  }
-
-  private normalizeBloomSoftness(value: number): number {
-    return Math.max(0.001, value * 0.25)
-  }
-
-  private disposeBloomNode(): void {
-    ;(this.bloomNode as { dispose?: () => void } | null)?.dispose?.()
-  }
-
-  private getBloomTextureNode(): Node {
-    const bloomNode = this.bloomNode as
-      | ({
-          getTexture?: () => Node
-          getTextureNode?: () => Node
-        } & object)
-      | null
-
-    if (!bloomNode) {
-      throw new Error("Bloom node is not initialized")
-    }
-
-    if ("getTextureNode" in bloomNode && typeof bloomNode.getTextureNode === "function") {
-      return bloomNode.getTextureNode()
-    }
-
-    if ("getTexture" in bloomNode && typeof bloomNode.getTexture === "function") {
-      return bloomNode.getTexture()
-    }
-
-    throw new Error("Bloom node does not expose a texture getter")
-  }
-
-  private trackAtlasTextureNode(uvNode: Node): Node {
-    const atlasTextureNode = tslTexture(this.atlasTexture ?? new THREE.Texture(), uvNode)
-    this.atlasTextureNodes.push(atlasTextureNode)
-    return atlasTextureNode
-  }
-
-  private trackSourceTextureNode(uvNode: Node): Node {
-    const sourceTextureNode = tslTexture(this.placeholder, uvNode)
-    this.sourceTextureNodes.push(sourceTextureNode)
-    return sourceTextureNode
-  }
-}

package/src/renderer/blend-modes.ts

@@ -1,229 +0,0 @@
-import {
-  abs,
-  clamp,
-  dot,
-  float,
-  max,
-  min,
-  mix,
-  select,
-  sqrt,
-  type TSLNode,
-  vec3,
-  vec4,
-} from "three/tsl"
-
-type Node = TSLNode
-
-function normal(_base: Node, blend: Node): Node {
-  return blend
-}
-
-function multiply(base: Node, blend: Node): Node {
-  return base.mul(blend)
-}
-
-function screen(base: Node, blend: Node): Node {
-  return float(1).sub(float(1).sub(base).mul(float(1).sub(blend)))
-}
-
-function overlay(base: Node, blend: Node): Node {
-  const dark = float(2).mul(base).mul(blend)
-  const light = float(1).sub(
-    float(2).mul(float(1).sub(base)).mul(float(1).sub(blend)),
-  )
-
-  return select(base.lessThan(float(0.5)), dark, light)
-}
-
-function darken(base: Node, blend: Node): Node {
-  return min(base, blend)
-}
-
-function lighten(base: Node, blend: Node): Node {
-  return max(base, blend)
-}
-
-function colorDodge(base: Node, blend: Node): Node {
-  return clamp(base.div(max(float(1).sub(blend), float(1e-6))), vec3(0), vec3(1))
-}
-
-function colorBurn(base: Node, blend: Node): Node {
-  return clamp(
-    float(1).sub(float(1).sub(base).div(max(blend, float(1e-6)))),
-    vec3(0),
-    vec3(1),
-  )
-}
-
-function hardLight(base: Node, blend: Node): Node {
-  return overlay(blend, base)
-}
-
-function softLight(base: Node, blend: Node): Node {
-  const darkResult = base.sub(
-    float(1).sub(float(2).mul(blend)).mul(base).mul(float(1).sub(base)),
-  )
-  const twoBlendMinusOne = float(2).mul(blend).sub(float(1))
-  const dLow = float(16).mul(base).sub(float(12)).mul(base).add(float(4)).mul(base)
-  const dHigh = sqrt(base)
-  const d = select(base.lessThanEqual(float(0.25)), dLow, dHigh)
-  const lightResult = base.add(twoBlendMinusOne.mul(d.sub(base)))
-
-  return select(blend.lessThanEqual(float(0.5)), darkResult, lightResult)
-}
-
-function difference(base: Node, blend: Node): Node {
-  return abs(base.sub(blend))
-}
-
-function exclusion(base: Node, blend: Node): Node {
-  return base.add(blend).sub(float(2).mul(base).mul(blend))
-}
-
-function lum(color: Node): Node {
-  return dot(color, vec3(0.2126, 0.7152, 0.0722))
-}
-
-function clipColor(color: Node): Node {
-  const luma = lum(color)
-  const colorMin = min(color.x, min(color.y, color.z))
-  const lowClipped = color
-    .sub(luma)
-    .mul(luma.div(max(luma.sub(colorMin), float(1e-6))))
-    .add(luma)
-  const lowAdjusted = select(colorMin.lessThan(float(0)), lowClipped, color)
-  const maxAfterLow = max(lowAdjusted.x, max(lowAdjusted.y, lowAdjusted.z))
-  const excess = maxAfterLow.sub(float(1))
-  const highClipped = lowAdjusted
-    .sub(luma)
-    .mul(float(1).sub(luma).div(max(excess, float(1e-6))))
-    .add(luma)
-
-  return select(maxAfterLow.greaterThan(float(1)), highClipped, lowAdjusted)
-}
-
-function setLum(color: Node, nextLum: Node): Node {
-  return clipColor(color.add(nextLum.sub(lum(color))))
-}
-
-function sat(color: Node): Node {
-  return max(color.x, max(color.y, color.z)).sub(min(color.x, min(color.y, color.z)))
-}
-
-function setSat(color: Node, nextSat: Node): Node {
-  const red = color.x
-  const green = color.y
-  const blue = color.z
-  const colorMin = min(red, min(green, blue))
-  const colorMax = max(red, max(green, blue))
-  const delta = colorMax.sub(colorMin)
-  const scale = select(delta.greaterThan(float(0)), nextSat.div(delta), float(0))
-  const redOut = select(
-    red.lessThanEqual(colorMin),
-    float(0),
-    select(red.greaterThanEqual(colorMax), nextSat, red.sub(colorMin).mul(scale)),
-  )
-  const greenOut = select(
-    green.lessThanEqual(colorMin),
-    float(0),
-    select(green.greaterThanEqual(colorMax), nextSat, green.sub(colorMin).mul(scale)),
-  )
-  const blueOut = select(
-    blue.lessThanEqual(colorMin),
-    float(0),
-    select(blue.greaterThanEqual(colorMax), nextSat, blue.sub(colorMin).mul(scale)),
-  )
-
-  return vec3(redOut, greenOut, blueOut)
-}
-
-function hue(base: Node, blend: Node): Node {
-  return setLum(setSat(blend, sat(base)), lum(base))
-}
-
-function saturation(base: Node, blend: Node): Node {
-  return setLum(setSat(base, sat(blend)), lum(base))
-}
-
-function color(base: Node, blend: Node): Node {
-  return setLum(blend, lum(base))
-}
-
-function luminosity(base: Node, blend: Node): Node {
-  return setLum(base, lum(blend))
-}
-
-export function buildBlendNode(
-  mode: string,
-  base: Node,
-  blend: Node,
-  opacity: Node,
-  compositeMode: "filter" | "mask" = "filter",
-): Node {
-  const baseRgb = base.rgb
-  const blendRgb = blend.rgb
-  const normalizedOpacity = float(clamp(opacity, float(0), float(1)))
-
-  let composited: Node
-
-  switch (mode) {
-    case "multiply":
-      composited = multiply(baseRgb, blendRgb)
-      break
-    case "screen":
-      composited = screen(baseRgb, blendRgb)
-      break
-    case "overlay":
-      composited = overlay(baseRgb, blendRgb)
-      break
-    case "darken":
-      composited = darken(baseRgb, blendRgb)
-      break
-    case "lighten":
-      composited = lighten(baseRgb, blendRgb)
-      break
-    case "color-dodge":
-      composited = colorDodge(baseRgb, blendRgb)
-      break
-    case "color-burn":
-      composited = colorBurn(baseRgb, blendRgb)
-      break
-    case "hard-light":
-      composited = hardLight(baseRgb, blendRgb)
-      break
-    case "soft-light":
-      composited = softLight(baseRgb, blendRgb)
-      break
-    case "difference":
-      composited = difference(baseRgb, blendRgb)
-      break
-    case "exclusion":
-      composited = exclusion(baseRgb, blendRgb)
-      break
-    case "hue":
-      composited = hue(baseRgb, blendRgb)
-      break
-    case "saturation":
-      composited = saturation(baseRgb, blendRgb)
-      break
-    case "color":
-      composited = color(baseRgb, blendRgb)
-      break
-    case "luminosity":
-      composited = luminosity(baseRgb, blendRgb)
-      break
-    default:
-      composited = normal(baseRgb, blendRgb)
-      break
-  }
-
-  if (compositeMode === "filter") {
-    return vec4(mix(baseRgb, composited, normalizedOpacity), float(1))
-  }
-
-  const maskLuma = float(dot(blendRgb, vec3(0.2126, 0.7152, 0.0722)))
-  const maskStrength = mix(float(1), clamp(maskLuma, float(0), float(1)), normalizedOpacity)
-
-  return vec4(baseRgb.mul(maskStrength), float(1))
-}