@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -1,9 +0,0 @@
-// @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-cos.ts

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

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

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

@@ -1,12 +0,0 @@
-// @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-pow.ts

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

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

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

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

@@ -1,10 +0,0 @@
-// @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/index.ts

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

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

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

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

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

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

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

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

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

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

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

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