@basementstudio/shader-lab 0.1.0

package/src/renderer/ascii-pass.ts

@@ -0,0 +1,416 @@
+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

@@ -0,0 +1,229 @@
+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))
+}