@basementstudio/shader-lab 0.1.0

package/packages/shader-lab-react/src/renderer/shaders/tsl/patterns/canvas-weave-pattern.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+import { Fn, PI, mix, sin, smoothstep, vec3 } from "three/tsl"
+import { fbm } from "../noise/fbm"
+
+/**
+ * Returns a canvas weave pattern value for a given UV coordinate.
+ */
+export const canvasWeavePattern = Fn(([uv]) => {
+  const grid = uv.mul(200.0).fract()
+  const noiseOffset = fbm(vec3(uv.mul(30.0), 0.0), { octaves: 3 }).mul(0.1)
+  const warpedGrid = grid.add(noiseOffset)
+
+  const weaveX = sin(
+    warpedGrid.x.mul(PI).add(fbm(vec3(uv.mul(100.0), 0.0), { octaves: 2 }).mul(0.5)),
+  )
+  const weaveY = sin(
+    warpedGrid.y.mul(PI).add(fbm(vec3(uv.mul(100.0).add(0.5), 0.0), { octaves: 2 }).mul(0.5)),
+  )
+
+  const weave = weaveX.mul(weaveY)
+  const smoothedWeave = smoothstep(-0.3, 0.3, weave)
+
+  return mix(0.9, 1.0, smoothedWeave)
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/patterns/grain-texture-pattern.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { Fn, dot, fract, sin, vec2 } from "three/tsl"
+
+/**
+ * Returns a grain texture pattern value for a given UV coordinate.
+ */
+export const grainTexturePattern = Fn(([uv]) => {
+  return fract(sin(dot(uv, vec2(12.9898, 78.233))).mul(43758.5453123))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/patterns/repeating-pattern.ts

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import { Fn, float, sin } from "three/tsl"
+
+/**
+ * Returns a repeating pattern of a sine function.
+ */
+export const repeatingPattern = Fn(([pattern, repeat, time = float(0)]) => {
+  pattern.assign(sin(pattern.mul(repeat).add(time)).div(repeat))
+
+  return pattern
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/atan2.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { atan, Fn, PI, select, sign } from "three/tsl"
+
+export const atan2 = Fn(([y, x]) => {
+  const base = atan(y.div(x))
+  const offset = sign(y).mul(PI)
+
+  return select(x.greaterThanEqual(0), base, base.add(offset))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-conj.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { Fn, vec2 } from "three/tsl"
+
+/**
+ * Complex conjugate: conj(a + bi) = a - bi
+ */
+export const complexConj = Fn(([z]) => {
+  return vec2(z.x, z.y.negate())
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-cos.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { cos, Fn, sin, vec2 } from "three/tsl"
+import { cosh, sinh } from "./hyperbolic"
+
+/**
+ * Complex cosine: cos(a + bi) = cos(a)cosh(b) - i sin(a)sinh(b)
+ */
+export const complexCos = Fn(([z]) => {
+  return vec2(cos(z.x).mul(cosh(z.y)), sin(z.x).mul(sinh(z.y)).negate())
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-div.ts

@@ -0,0 +1,11 @@
+// @ts-nocheck
+import { div, dot, Fn, vec2 } from "three/tsl"
+
+export const complexDiv = Fn(([a, b]) => {
+  const denominator = dot(b, b)
+
+  return vec2(
+    div(a.x.mul(b.x).add(a.y.mul(b.y)), denominator),
+    div(a.y.mul(b.x).sub(a.x.mul(b.y)), denominator)
+  )
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-log.ts

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import { Fn, length, log, vec2 } from "three/tsl"
+import { atan2 } from "./atan2"
+
+export const complexLog = Fn(([z]) => {
+  return vec2(log(length(z)), atan2(z.y, z.x))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-mobius.ts

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { Fn, vec2 } from "three/tsl"
+import { complexDiv } from "./complex-div"
+
+/**
+ * Möbius transformation: (z - 1) / (z + 1)
+ */
+export const complexMobius = Fn(([z]) => {
+  const one = vec2(1.0, 0.0)
+
+  return complexDiv(z.sub(one), z.add(one))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-mul.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { Fn, vec2 } from "three/tsl"
+
+/**
+ * Complex multiplication: (a + bi)(c + di) = (ac - bd) + (ad + bc)i
+ */
+export const complexMul = Fn(([a, b]) => {
+  return vec2(a.x.mul(b.x).sub(a.y.mul(b.y)), a.x.mul(b.y).add(a.y.mul(b.x)))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-pow.ts

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import { cos, Fn, length, pow, sin, vec2 } from "three/tsl"
+import { atan2 } from "./atan2"
+
+/**
+ * Complex power: z^n
+ * Let z = r(cos θ + i sin θ), then z^n = r^n (cos nθ + i sin nθ)
+ */
+export const complexPow = Fn(([z, n]) => {
+  const angle = atan2(z.y, z.x)
+  const r = length(z)
+  const rn = pow(r, n)
+  const nAngle = n.mul(angle)
+
+  return vec2(rn.mul(cos(nAngle)), rn.mul(sin(nAngle)))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-sin.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { cos, Fn, sin, vec2 } from "three/tsl"
+import { cosh, sinh } from "./hyperbolic"
+
+/**
+ * Complex sine: sin(a + bi) = sin(a)cosh(b) + i cos(a)sinh(b)
+ */
+export const complexSin = Fn(([z]) => {
+  return vec2(sin(z.x).mul(cosh(z.y)), cos(z.x).mul(sinh(z.y)))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-sqrt.ts

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import { Fn, length, select, sqrt, vec2 } from "three/tsl"
+
+/**
+ * Complex square root.
+ * sqrt(a + bi) = (sqrt((r+a)/2), sign(b) * sqrt((r-a)/2))
+ */
+export const complexSqrt = Fn(([z]) => {
+  const r = length(z)
+  const rpart = sqrt(r.add(z.x).mul(0.5))
+  const ipart = sqrt(r.sub(z.x).mul(0.5))
+
+  return select(
+    z.y.greaterThanEqual(0),
+    vec2(rpart, ipart),
+    vec2(rpart, ipart.negate())
+  )
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-tan.ts

@@ -0,0 +1,12 @@
+// @ts-nocheck
+import { Fn } from "three/tsl"
+import { complexCos } from "./complex-cos"
+import { complexDiv } from "./complex-div"
+import { complexSin } from "./complex-sin"
+
+/**
+ * Complex tangent: tan(z) = sin(z) / cos(z)
+ */
+export const complexTan = Fn(([z]) => {
+  return complexDiv(complexSin(z), complexCos(z))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/complex-to-polar.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import { Fn, length, vec2 } from "three/tsl"
+import { atan2 } from "./atan2"
+
+/**
+ * Convert complex number to polar form: (r, θ)
+ */
+export const complexToPolar = Fn(([z]) => {
+  return vec2(length(z), atan2(z.y, z.x))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/hyperbolic.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import { exp, Fn, float } from "three/tsl"
+
+/**
+ * Hyperbolic cosine: cosh(x) = (e^x + e^-x) / 2
+ */
+export const cosh = Fn(([x]) => {
+  const ex = exp(x)
+
+  return ex.add(float(1).div(ex)).mul(0.5)
+})
+
+/**
+ * Hyperbolic sine: sinh(x) = (e^x - e^-x) / 2
+ */
+export const sinh = Fn(([x]) => {
+  const ex = exp(x)
+
+  return ex.sub(float(1).div(ex)).mul(0.5)
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/index.ts

@@ -0,0 +1,48 @@
+// @ts-nocheck
+export {
+  acesTonemap,
+  bleachBypassTonemap,
+  cinematicTonemap,
+  crossProcessTonemap,
+  reinhardTonemap,
+  tanh,
+  technicolorTonemap,
+  totosTonemap,
+} from "../color/tonemapping"
+export { cosinePalette } from "../cosine-palette"
+export { curlNoise3d } from "../noise/curl-noise-3d"
+export { curlNoise4d } from "../noise/curl-noise-4d"
+export { fbm } from "../noise/fbm"
+export { perlinNoise3d } from "../noise/perlin-noise-3d"
+export { ridgeNoise } from "../noise/ridge-noise"
+export { simplexNoise3d } from "../noise/simplex-noise-3d"
+export { simplexNoise4d } from "../noise/simplex-noise-4d"
+export { turbulence } from "../noise/turbulence"
+export { valueNoise3d } from "../noise/value-noise-3d"
+export { voronoiNoise3d } from "../noise/voronoi-noise-3d"
+export { bloom } from "../patterns/bloom"
+export { bloomEdgePattern } from "../patterns/bloom-edge-pattern"
+export { canvasWeavePattern } from "../patterns/canvas-weave-pattern"
+export { grainTexturePattern } from "../patterns/grain-texture-pattern"
+export { repeatingPattern } from "../patterns/repeating-pattern"
+export { atan2 } from "./atan2"
+export { complexConj } from "./complex-conj"
+export { complexCos } from "./complex-cos"
+export { complexDiv } from "./complex-div"
+export { complexLog } from "./complex-log"
+export { complexMobius } from "./complex-mobius"
+export { complexMul } from "./complex-mul"
+export { complexPow } from "./complex-pow"
+export { complexSin } from "./complex-sin"
+export { complexSqrt } from "./complex-sqrt"
+export { complexTan } from "./complex-tan"
+export { complexToPolar } from "./complex-to-polar"
+export { cosh, sinh } from "./hyperbolic"
+export { rotate } from "./rotate"
+export { screenAspectUV } from "./screen-aspect-uv"
+export { sdBox2d } from "./sd-box-2d"
+export { sdDiamond } from "./sd-diamond"
+export { sdRhombus } from "./sd-rhombus"
+export { sdSphere } from "./sd-sphere"
+export { smax } from "./smax"
+export { smin } from "./smin"

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/rotate.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { cos, sin, vec2 } from "three/tsl"
+
+export function rotate(
+  uvNode: ReturnType<typeof vec2>,
+  angle: unknown
+): ReturnType<typeof vec2> {
+  const cosAngle = cos(angle)
+  const sinAngle = sin(angle)
+
+  return vec2(
+    uvNode.x.mul(cosAngle).sub(uvNode.y.mul(sinAngle)),
+    uvNode.x.mul(sinAngle).add(uvNode.y.mul(cosAngle))
+  )
+}

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/screen-aspect-uv.ts

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import { float, select, uv, vec2 } from "three/tsl"
+
+export const screenAspectUV = (
+  renderSize: ReturnType<typeof vec2>,
+  range = float(0.5)
+) => {
+  const baseUv = uv().sub(range)
+
+  return select(
+    renderSize.x.greaterThan(renderSize.y),
+    vec2(baseUv.x.mul(renderSize.x.div(renderSize.y)), baseUv.y),
+    vec2(baseUv.x, baseUv.y.mul(renderSize.y.div(renderSize.x)))
+  )
+}

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/sd-box-2d.ts

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import { abs, Fn, float, max } from "three/tsl"
+
+export const sdBox2d = Fn(([_uv, size = float(0)]) => {
+  return max(abs(_uv.x), abs(_uv.y)).sub(float(size))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/sd-diamond.ts

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import { abs, Fn, float } from "three/tsl"
+
+export const sdDiamond = Fn(([uvNode, radius = float(0)]) => {
+  return abs(uvNode.x).add(abs(uvNode.y)).sub(radius)
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/sd-rhombus.ts

@@ -0,0 +1,27 @@
+// @ts-nocheck
+import { abs, clamp, dot, Fn, float, length, sign, vec2 } from "three/tsl"
+
+const ndot = Fn(([left, right]) => {
+  return left.x.mul(right.x).sub(left.y.mul(right.y))
+})
+
+export const sdRhombus = Fn(([pointNode, bounds = vec2(0.4)]) => {
+  const point = abs(pointNode).toVar()
+  const h = clamp(
+    ndot(bounds.sub(point.mul(2)), bounds).div(dot(bounds, bounds)),
+    -1,
+    1
+  )
+  const distance = length(
+    point.sub(bounds.mul(0.5).mul(vec2(float(1).sub(h), float(1).add(h))))
+  )
+
+  return distance.mul(
+    sign(
+      point.x
+        .mul(bounds.y)
+        .add(point.y.mul(bounds.x))
+        .sub(bounds.x.mul(bounds.y))
+    )
+  )
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/sd-sphere.ts

@@ -0,0 +1,6 @@
+// @ts-nocheck
+import { Fn, float, length } from "three/tsl"
+
+export const sdSphere = Fn(([_uv, radius = float(0)]) => {
+  return length(_uv).sub(float(radius))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/smax.ts

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import { abs, Fn, float, max } from "three/tsl"
+
+export const smax = Fn(([left, right, factor = float(0)]) => {
+  const h = max(factor.sub(abs(left.sub(right))), 0).div(factor)
+  return max(left, right).add(h.mul(h).mul(factor).mul(0.25))
+})

package/packages/shader-lab-react/src/renderer/shaders/tsl/utils/smin.ts

@@ -0,0 +1,7 @@
+// @ts-nocheck
+import { abs, Fn, max, min } from "three/tsl"
+
+export const smin = Fn(([left, right, factor]) => {
+  const h = max(factor.sub(abs(left.sub(right))), 0).div(factor)
+  return min(left, right).sub(h.mul(h).mul(factor).mul(0.25))
+})

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

@@ -0,0 +1,176 @@
+import {
+  float,
+  type TSLNode,
+  texture as tslTexture,
+  uv,
+  vec2,
+  vec4,
+} from "three/tsl"
+import * as THREE from "three/webgpu"
+import { PassNode } from "./pass-node"
+import type { LayerParameterValues } from "../types/editor"
+
+type Node = TSLNode
+
+function resolveFontFamily(value: string): string {
+  switch (value) {
+    case "mono":
+      return '"Geist Mono", ui-monospace, monospace'
+    case "sans":
+      return "Geist, Arial, sans-serif"
+    case "impact":
+      return 'Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif'
+    default:
+      return 'Georgia, "Times New Roman", serif'
+  }
+}
+
+export class TextPass extends PassNode {
+  private readonly placeholder: THREE.Texture
+  private textureNode: Node
+  private textTexture: THREE.CanvasTexture | null = null
+  private canvas: HTMLCanvasElement | null = null
+  private width = 1
+  private height = 1
+  private params: LayerParameterValues = {}
+  private dirty = true
+
+  constructor(layerId: string) {
+    super(layerId)
+    this.placeholder = new THREE.Texture()
+    this.textureNode = tslTexture(
+      this.placeholder,
+      vec2(uv().x, float(1).sub(uv().y))
+    )
+    this.rebuildEffectNode()
+  }
+
+  override render(
+    renderer: THREE.WebGPURenderer,
+    inputTexture: THREE.Texture,
+    outputTarget: THREE.WebGLRenderTarget,
+    time: number,
+    delta: number
+  ): void {
+    if (!this.textTexture || this.dirty) {
+      this.rebuildTextTexture()
+    }
+
+    this.textureNode.value = this.textTexture ?? this.placeholder
+    super.render(renderer, inputTexture, outputTarget, time, delta)
+  }
+
+  override updateParams(params: LayerParameterValues): void {
+    this.params = params
+    this.dirty = true
+  }
+
+  override resize(width: number, height: number): void {
+    this.width = Math.max(1, width)
+    this.height = Math.max(1, height)
+    this.dirty = true
+  }
+
+  override dispose(): void {
+    this.textTexture?.dispose()
+    this.placeholder.dispose()
+    super.dispose()
+  }
+
+  protected override buildEffectNode(): Node {
+    if (!this.textureNode) {
+      return vec4(float(0), float(0), float(0), float(1))
+    }
+
+    return vec4(this.textureNode.rgb, float(1))
+  }
+
+  private rebuildTextTexture(): void {
+    if (!this.canvas) {
+      this.canvas = document.createElement("canvas")
+    }
+
+    const canvas = this.canvas
+    canvas.width = this.width
+    canvas.height = this.height
+    const context = canvas.getContext("2d")
+
+    if (!context) {
+      return
+    }
+
+    const text =
+      typeof this.params.text === "string" && this.params.text.length > 0
+        ? this.params.text
+        : "basement.studio"
+    const fontSize =
+      typeof this.params.fontSize === "number"
+        ? Math.max(48, this.params.fontSize)
+        : 280
+    const fontWeight =
+      typeof this.params.fontWeight === "number"
+        ? Math.round(this.params.fontWeight)
+        : 700
+    const letterSpacing =
+      typeof this.params.letterSpacing === "number"
+        ? this.params.letterSpacing
+        : -0.02
+    const fontFamily = resolveFontFamily(
+      typeof this.params.fontFamily === "string"
+        ? this.params.fontFamily
+        : "display-serif"
+    )
+    const textColor =
+      typeof this.params.textColor === "string"
+        ? this.params.textColor
+        : "#ffffff"
+    const backgroundColor =
+      typeof this.params.backgroundColor === "string"
+        ? this.params.backgroundColor
+        : "#000000"
+
+    context.clearRect(0, 0, this.width, this.height)
+    context.fillStyle = backgroundColor
+    context.fillRect(0, 0, this.width, this.height)
+    context.fillStyle = textColor
+    context.textAlign = "center"
+    context.textBaseline = "middle"
+    context.font = `${fontWeight} ${fontSize}px ${fontFamily}`
+
+    const characters = [...text]
+    const spacing = fontSize * letterSpacing
+    let totalWidth = 0
+
+    for (const [index, char] of characters.entries()) {
+      totalWidth += context.measureText(char).width
+      if (index < characters.length - 1) {
+        totalWidth += spacing
+      }
+    }
+
+    let x = this.width * 0.5 - totalWidth * 0.5
+    const y = this.height * 0.5
+
+    for (const char of characters) {
+      const charWidth = context.measureText(char).width
+      context.fillText(char, x + charWidth * 0.5, y)
+      x += charWidth + spacing
+    }
+
+    if (!this.textTexture) {
+      this.textTexture = new THREE.CanvasTexture(canvas)
+      this.textTexture.flipY = false
+      this.textTexture.generateMipmaps = false
+      this.textTexture.magFilter = THREE.LinearFilter
+      this.textTexture.minFilter = THREE.LinearFilter
+      this.textTexture.wrapS = THREE.ClampToEdgeWrapping
+      this.textTexture.wrapT = THREE.ClampToEdgeWrapping
+      this.textTexture.colorSpace = THREE.SRGBColorSpace
+    } else {
+      this.textTexture.image = canvas
+    }
+
+    this.textTexture.needsUpdate = true
+    this.dirty = false
+  }
+}

package/packages/shader-lab-react/src/runtime-clock.ts

@@ -0,0 +1,42 @@
+import type { ShaderLabTimelineConfig } from "./types"
+
+export interface ShaderLabRuntimeClock {
+  delta: number
+  duration: number
+  loop: boolean
+  time: number
+}
+
+const MIN_DURATION = 0.25
+
+export function createRuntimeClock(
+  timeline: Pick<ShaderLabTimelineConfig, "duration" | "loop">,
+  time: number,
+  delta: number,
+): ShaderLabRuntimeClock {
+  return {
+    delta,
+    duration: Math.max(timeline.duration, MIN_DURATION),
+    loop: timeline.loop,
+    time,
+  }
+}
+
+export function advanceRuntimeClock(
+  currentTime: number,
+  timeline: Pick<ShaderLabTimelineConfig, "duration" | "loop">,
+  delta: number,
+): number {
+  if (!Number.isFinite(delta) || delta <= 0) {
+    return currentTime
+  }
+
+  const duration = Math.max(timeline.duration, MIN_DURATION)
+  const nextTime = currentTime + delta
+
+  if (timeline.loop) {
+    return nextTime % duration
+  }
+
+  return Math.min(nextTime, duration)
+}

package/packages/shader-lab-react/src/runtime-frame.ts

@@ -0,0 +1,29 @@
+import { createRuntimeClock } from "./runtime-clock"
+import { resolveEvaluatedLayers } from "./timeline"
+import type { ShaderLabConfig, ShaderLabLayerConfig } from "./types"
+
+export interface ShaderLabRenderableLayer {
+  layer: ShaderLabLayerConfig
+}
+
+export interface ShaderLabRuntimeFrame {
+  clock: ReturnType<typeof createRuntimeClock>
+  composition: ShaderLabConfig["composition"]
+  layers: ShaderLabRenderableLayer[]
+}
+
+export function buildRuntimeFrame(
+  config: ShaderLabConfig,
+  time: number,
+  delta: number,
+): ShaderLabRuntimeFrame {
+  const layers = resolveEvaluatedLayers(config.layers, config.timeline.tracks, time)
+    .filter((layer) => layer.visible)
+    .map((layer) => ({ layer }))
+
+  return {
+    clock: createRuntimeClock(config.timeline, time, delta),
+    composition: config.composition,
+    layers,
+  }
+}