@basementstudio/shader-lab 0.1.0

package/src/renderer/pipeline-manager.ts

@@ -0,0 +1,343 @@
+import { float, type TSLNode, texture as tslTexture, uv, vec2 } from "three/tsl"
+import * as THREE from "three/webgpu"
+import type { RenderableLayerPass } from "@/renderer/contracts"
+import { CustomShaderPass } from "@/renderer/custom-shader-pass"
+import { GradientPass } from "@/renderer/gradient-pass"
+import { LivePass } from "@/renderer/live-pass"
+import { MediaPass } from "@/renderer/media-pass"
+import type { PassNode } from "@/renderer/pass-node"
+import { createPassNode } from "@/renderer/pass-node-factory"
+import { TextPass } from "@/renderer/text-pass"
+import type { EditorLayer, Size } from "@/types/editor"
+import { parameterValuesSignature } from "@/lib/editor/parameter-schema"
+
+type LayerPassNode = LivePass | MediaPass | PassNode
+
+const RENDER_TARGET_OPTIONS = {
+  depthBuffer: false,
+  format: THREE.RGBAFormat,
+  generateMipmaps: false,
+  magFilter: THREE.NearestFilter,
+  minFilter: THREE.NearestFilter,
+  stencilBuffer: false,
+  type: THREE.HalfFloatType,
+} as const
+
+function clampUnit(value: number): number {
+  return Math.max(0, Math.min(1, value))
+}
+
+function createLayerSignature(layer: RenderableLayerPass): string {
+  if (layer.layer.type === "custom-shader") {
+    return [
+      layer.layer.id,
+      layer.layer.kind,
+      layer.layer.type,
+      layer.layer.visible ? "1" : "0",
+      layer.layer.opacity.toFixed(4),
+      layer.layer.hue.toFixed(4),
+      layer.layer.saturation.toFixed(4),
+      layer.layer.blendMode,
+      layer.layer.compositeMode,
+      typeof layer.params.sourceRevision === "number"
+        ? String(layer.params.sourceRevision)
+        : "0",
+      typeof layer.params.sourceMode === "string"
+        ? layer.params.sourceMode
+        : "paste",
+      typeof layer.params.entryExport === "string"
+        ? layer.params.entryExport
+        : "sketch",
+      typeof layer.params.sourceFileName === "string"
+        ? layer.params.sourceFileName
+        : "",
+    ].join("|")
+  }
+
+  return [
+    layer.layer.id,
+    layer.layer.kind,
+    layer.layer.type,
+    layer.asset?.id ?? "no-asset",
+    layer.asset?.url ?? "no-url",
+    layer.layer.visible ? "1" : "0",
+    layer.layer.opacity.toFixed(4),
+    layer.layer.hue.toFixed(4),
+    layer.layer.saturation.toFixed(4),
+    layer.layer.blendMode,
+    layer.layer.compositeMode,
+    parameterValuesSignature(layer.params),
+  ].join("|")
+}
+
+export class PipelineManager {
+  private readonly renderer: THREE.WebGPURenderer
+  private readonly baseScene: THREE.Scene
+  private readonly baseCamera: THREE.OrthographicCamera
+  private readonly blitScene: THREE.Scene
+  private readonly blitCamera: THREE.OrthographicCamera
+  private readonly blitInputNode: TSLNode
+  private readonly blitMaterial: THREE.MeshBasicNodeMaterial
+
+  private passMap = new Map<string, LayerPassNode>()
+  private passes: LayerPassNode[] = []
+  private layerSignatures = new Map<string, string>()
+  private dirty = true
+  private width: number
+  private height: number
+  private logicalWidth: number
+  private logicalHeight: number
+  private rtA: THREE.WebGLRenderTarget
+  private rtB: THREE.WebGLRenderTarget
+
+  constructor(renderer: THREE.WebGPURenderer, size: Size) {
+    this.renderer = renderer
+    this.width = Math.max(1, size.width)
+    this.height = Math.max(1, size.height)
+    this.logicalWidth = this.width
+    this.logicalHeight = this.height
+
+    this.baseScene = new THREE.Scene()
+    this.baseCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    const baseMaterial = new THREE.MeshBasicMaterial({ color: "#080808" })
+    const baseMesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), baseMaterial)
+    baseMesh.frustumCulled = false
+    this.baseScene.add(baseMesh)
+
+    this.rtA = new THREE.WebGLRenderTarget(
+      this.width,
+      this.height,
+      RENDER_TARGET_OPTIONS
+    )
+    this.rtB = new THREE.WebGLRenderTarget(
+      this.width,
+      this.height,
+      RENDER_TARGET_OPTIONS
+    )
+
+    this.blitScene = new THREE.Scene()
+    this.blitCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    const blitUv = vec2(uv().x, float(1).sub(uv().y))
+    this.blitInputNode = tslTexture(new THREE.Texture(), blitUv)
+    this.blitMaterial = new THREE.MeshBasicNodeMaterial()
+    this.blitMaterial.colorNode = this.blitInputNode
+    const blitMesh = new THREE.Mesh(
+      new THREE.PlaneGeometry(2, 2),
+      this.blitMaterial
+    )
+    blitMesh.frustumCulled = false
+    this.blitScene.add(blitMesh)
+  }
+
+  syncLayers(layers: RenderableLayerPass[]): void {
+    const incomingIds = new Set(layers.map((layer) => layer.layer.id))
+
+    for (const [layerId, pass] of this.passMap) {
+      if (incomingIds.has(layerId)) {
+        continue
+      }
+
+      pass.dispose()
+      this.passMap.delete(layerId)
+      this.layerSignatures.delete(layerId)
+      this.dirty = true
+    }
+
+    const orderedPasses: LayerPassNode[] = []
+
+    for (const renderableLayer of layers) {
+      const layerId = renderableLayer.layer.id
+      const signature = createLayerSignature(renderableLayer)
+      let pass = this.passMap.get(layerId)
+
+      if (!pass) {
+        pass = this.createPass(renderableLayer.layer)
+        pass.resize(this.width, this.height)
+        pass.updateLogicalSize(this.logicalWidth, this.logicalHeight)
+        this.passMap.set(layerId, pass)
+        this.dirty = true
+      }
+
+      if (this.layerSignatures.get(layerId) !== signature) {
+        this.layerSignatures.set(layerId, signature)
+        this.applyLayerState(pass, renderableLayer)
+        this.dirty = true
+      }
+
+      orderedPasses.push(pass)
+    }
+
+    if (
+      orderedPasses.length !== this.passes.length ||
+      orderedPasses.some((pass, index) => this.passes[index] !== pass)
+    ) {
+      this.passes = orderedPasses
+      this.dirty = true
+    }
+  }
+
+  render(time: number, delta: number): boolean {
+    const activePasses = this.passes.filter((pass) => pass.enabled)
+    const needsContinuousRender = activePasses.some((pass) =>
+      pass.needsContinuousRender()
+    )
+
+    if (!(this.dirty || needsContinuousRender)) {
+      return false
+    }
+
+    if (activePasses.length === 0) {
+      this.renderer.setRenderTarget(null)
+      this.renderer.render(this.baseScene, this.baseCamera)
+      this.dirty = false
+      return true
+    }
+
+    this.renderer.setRenderTarget(this.rtA)
+    this.renderer.render(this.baseScene, this.baseCamera)
+
+    let readTarget = this.rtA
+    let writeTarget = this.rtB
+
+    for (const pass of activePasses) {
+      pass.render(this.renderer, readTarget.texture, writeTarget, time, delta)
+      const previousRead = readTarget
+      readTarget = writeTarget
+      writeTarget = previousRead
+    }
+
+    this.blitInputNode.value = readTarget.texture
+    this.renderer.setRenderTarget(null)
+    this.renderer.render(this.blitScene, this.blitCamera)
+    this.dirty = false
+    return true
+  }
+
+  resize(size: Size): void {
+    this.width = Math.max(1, size.width)
+    this.height = Math.max(1, size.height)
+    this.rtA.setSize(this.width, this.height)
+    this.rtB.setSize(this.width, this.height)
+
+    for (const pass of this.passMap.values()) {
+      pass.resize(this.width, this.height)
+    }
+
+    this.dirty = true
+  }
+
+  updateLogicalSize(size: Size): void {
+    const nextWidth = Math.max(1, size.width)
+    const nextHeight = Math.max(1, size.height)
+
+    if (nextWidth === this.logicalWidth && nextHeight === this.logicalHeight) {
+      return
+    }
+
+    this.logicalWidth = nextWidth
+    this.logicalHeight = nextHeight
+
+    for (const pass of this.passMap.values()) {
+      pass.updateLogicalSize(this.logicalWidth, this.logicalHeight)
+    }
+
+    this.dirty = true
+  }
+
+  dispose(): void {
+    this.rtA.dispose()
+    this.rtB.dispose()
+    this.blitMaterial.dispose()
+
+    for (const pass of this.passMap.values()) {
+      pass.dispose()
+    }
+
+    this.passMap.clear()
+    this.passes = []
+    this.layerSignatures.clear()
+  }
+
+  private applyLayerState(
+    pass: LayerPassNode,
+    renderableLayer: RenderableLayerPass
+  ): void {
+    pass.enabled = renderableLayer.layer.visible
+    pass.updateOpacity(clampUnit(renderableLayer.layer.opacity))
+    pass.updateBlendMode(renderableLayer.layer.blendMode)
+    pass.updateCompositeMode(renderableLayer.layer.compositeMode)
+    pass.updateLayerColorAdjustments(
+      renderableLayer.layer.hue,
+      renderableLayer.layer.saturation
+    )
+    pass.updateParams(renderableLayer.params)
+
+    if (pass instanceof MediaPass) {
+      const asset = renderableLayer.asset
+      if (asset?.kind === "image" || asset?.kind === "video") {
+        void pass
+          .setMedia(asset.url, asset.kind)
+          .then(() => {
+            this.dirty = true
+          })
+          .catch(() => {
+            this.dirty = true
+          })
+      } else {
+        pass.clearMedia()
+      }
+    }
+
+    if (pass instanceof LivePass) {
+      const facingMode =
+        typeof renderableLayer.params.facingMode === "string"
+          ? renderableLayer.params.facingMode
+          : "user"
+
+      if (
+        facingMode !== pass.getFacingMode() ||
+        !pass.needsContinuousRender()
+      ) {
+        void pass
+          .startCamera(facingMode)
+          .then(() => {
+            this.dirty = true
+          })
+          .catch(() => {
+            this.dirty = true
+          })
+      }
+    }
+  }
+
+  private createPass(layer: EditorLayer): LayerPassNode {
+    if (layer.kind === "effect") {
+      return createPassNode(layer.id, layer.type)
+    }
+
+    if (
+      layer.kind === "source" &&
+      (layer.type === "image" || layer.type === "video")
+    ) {
+      return new MediaPass(layer.id)
+    }
+
+    if (layer.kind === "source" && layer.type === "gradient") {
+      return new GradientPass(layer.id)
+    }
+
+    if (layer.kind === "source" && layer.type === "text") {
+      return new TextPass(layer.id)
+    }
+
+    if (layer.kind === "source" && layer.type === "custom-shader") {
+      return new CustomShaderPass(layer.id)
+    }
+
+    if (layer.kind === "source" && layer.type === "live") {
+      return new LivePass(layer.id)
+    }
+
+    throw new Error(`Unsupported layer type in current scope: ${layer.type}`)
+  }
+}

package/src/renderer/pixel-sorting-pass.ts

@@ -0,0 +1,277 @@
+import * as THREE from "three/webgpu"
+import {
+  dot,
+  float,
+  floor,
+  max,
+  min,
+  mod,
+  select,
+  texture as tslTexture,
+  type TSLNode,
+  uniform,
+  uv,
+  vec2,
+  vec3,
+  vec4,
+} from "three/tsl"
+import { PassNode } from "@/renderer/pass-node"
+import type { LayerParameterValues } from "@/types/editor"
+
+type Node = TSLNode
+
+export class PixelSortingPass extends PassNode {
+  private readonly sortScene: THREE.Scene
+  private readonly sortCamera: THREE.OrthographicCamera
+  private readonly sortMaterial: THREE.MeshBasicNodeMaterial
+  private sortRtA: THREE.WebGLRenderTarget
+  private sortRtB: THREE.WebGLRenderTarget
+
+  private readonly blitInputNode: Node
+  private readonly sortTexNodeA: Node
+  private readonly sortTexNodeB: Node
+
+  private readonly passOffsetUniform: Node
+  private readonly widthUniform: Node
+  private readonly heightUniform: Node
+  private readonly thresholdUniform: Node
+  private readonly upperThresholdUniform: Node
+  private readonly directionUniform: Node
+  private readonly modeUniform: Node
+  private readonly reverseUniform: Node
+
+  private passCount = 150
+  private width = 1
+  private height = 1
+
+  constructor(layerId: string) {
+    super(layerId)
+
+    this.sortScene = new THREE.Scene()
+    this.sortCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1)
+
+    this.passOffsetUniform = uniform(0)
+    this.widthUniform = uniform(1)
+    this.heightUniform = uniform(1)
+    this.thresholdUniform = uniform(0.25)
+    this.upperThresholdUniform = uniform(1)
+    this.directionUniform = uniform(0)
+    this.modeUniform = uniform(0)
+    this.reverseUniform = uniform(0)
+
+    const placeholder = new THREE.Texture()
+
+    // Compute pixel coordinates from flipped UVs
+    const texUv = vec2(uv().x, float(1).sub(uv().y))
+    const dims = vec2(this.widthUniform, this.heightUniform)
+    const pixelCoord = floor(texUv.mul(dims))
+
+    // Sort axis: horizontal (x) or vertical (y)
+    const isHorizontal = this.directionUniform.lessThan(float(0.5))
+    const sortIdx = select(isHorizontal, pixelCoord.x, pixelCoord.y)
+    const maxIdx = select(isHorizontal, this.widthUniform, this.heightUniform)
+
+    // Odd-even transposition: alternate pair groupings each pass
+    const pairMod = mod(sortIdx.add(this.passOffsetUniform), float(2))
+    const isLeft = pairMod.lessThan(float(1))
+
+    // Neighbor pixel coordinate
+    const neighborDir = select(isLeft, float(1), float(-1))
+    const neighborCoord = vec2(
+      select(isHorizontal, pixelCoord.x.add(neighborDir), pixelCoord.x),
+      select(isHorizontal, pixelCoord.y, pixelCoord.y.add(neighborDir)),
+    )
+
+    // Bounds check
+    const neighborIdx = select(isHorizontal, neighborCoord.x, neighborCoord.y)
+    const inBounds = neighborIdx
+      .greaterThanEqual(float(0))
+      .and(neighborIdx.lessThan(maxIdx))
+
+    // Sample both pixels (snapped to texel centers)
+    const mySnapUv = pixelCoord.add(0.5).div(dims)
+    const neighborSnapUv = neighborCoord.add(0.5).div(dims)
+
+    this.sortTexNodeA = tslTexture(placeholder, mySnapUv)
+    this.sortTexNodeB = tslTexture(placeholder, neighborSnapUv)
+
+    const myColor = this.sortTexNodeA
+    const neighborColor = this.sortTexNodeB
+
+    // Sort value: luminance
+    const lumaW = vec3(0.2126, 0.7152, 0.0722)
+    const myLuma = dot(vec3(myColor.r, myColor.g, myColor.b), lumaW)
+    const neighborLuma = dot(
+      vec3(neighborColor.r, neighborColor.g, neighborColor.b),
+      lumaW,
+    )
+
+    // Sort value: warmth (R-B, approximates hue/temperature)
+    const myWarmth = myColor.r.sub(myColor.b)
+    const neighborWarmth = neighborColor.r.sub(neighborColor.b)
+
+    // Sort value: saturation (HSV)
+    const myMax = max(max(myColor.r, myColor.g), myColor.b)
+    const myMin = min(min(myColor.r, myColor.g), myColor.b)
+    const mySat = select(
+      myMax.greaterThan(float(0.001)),
+      myMax.sub(myMin).div(myMax),
+      float(0),
+    )
+    const nMax = max(max(neighborColor.r, neighborColor.g), neighborColor.b)
+    const nMin = min(min(neighborColor.r, neighborColor.g), neighborColor.b)
+    const nSat = select(
+      nMax.greaterThan(float(0.001)),
+      nMax.sub(nMin).div(nMax),
+      float(0),
+    )
+
+    // Select sort value based on mode (0=luma, 1=hue/warmth, 2=saturation)
+    const isSatMode = this.modeUniform.greaterThan(float(1.5))
+    const isHueMode = this.modeUniform.greaterThan(float(0.5))
+    const myValue = select(isSatMode, mySat, select(isHueMode, myWarmth, myLuma))
+    const neighborValue = select(
+      isSatMode,
+      nSat,
+      select(isHueMode, neighborWarmth, neighborLuma),
+    )
+
+    // Validation: both pixels must be within threshold band (luma-based)
+    const myInBand = myLuma
+      .greaterThan(this.thresholdUniform)
+      .and(myLuma.lessThan(this.upperThresholdUniform))
+    const neighborInBand = neighborLuma
+      .greaterThan(this.thresholdUniform)
+      .and(neighborLuma.lessThan(this.upperThresholdUniform))
+    const valid = myInBand.or(neighborInBand)
+
+    // Sort: swap if left > right (ascending) or left < right (descending/reverse)
+    const leftValue = select(isLeft, myValue, neighborValue)
+    const rightValue = select(isLeft, neighborValue, myValue)
+    const isReverse = this.reverseUniform.greaterThan(float(0.5))
+    const shouldSwap = select(
+      isReverse,
+      rightValue.greaterThan(leftValue),
+      leftValue.greaterThan(rightValue),
+    )
+
+    const doSwap = inBounds.and(valid).and(shouldSwap)
+    const result = vec4(
+      select(doSwap, neighborColor.r, myColor.r),
+      select(doSwap, neighborColor.g, myColor.g),
+      select(doSwap, neighborColor.b, myColor.b),
+      float(1),
+    )
+
+    this.sortMaterial = new THREE.MeshBasicNodeMaterial()
+    this.sortMaterial.colorNode = result as Node
+
+    const sortMesh = new THREE.Mesh(
+      new THREE.PlaneGeometry(2, 2),
+      this.sortMaterial,
+    )
+    sortMesh.frustumCulled = false
+    this.sortScene.add(sortMesh)
+
+    // Internal ping-pong render targets
+    const rtOptions = {
+      depthBuffer: false,
+      format: THREE.RGBAFormat,
+      generateMipmaps: false,
+      magFilter: THREE.NearestFilter,
+      minFilter: THREE.NearestFilter,
+      stencilBuffer: false,
+      type: THREE.HalfFloatType,
+    }
+    this.sortRtA = new THREE.WebGLRenderTarget(1, 1, rtOptions)
+    this.sortRtB = new THREE.WebGLRenderTarget(1, 1, rtOptions)
+
+    // Blit node for PassNode pipeline
+    const blitUv = vec2(uv().x, float(1).sub(uv().y))
+    this.blitInputNode = tslTexture(new THREE.Texture(), blitUv)
+
+    this.rebuildEffectNode()
+  }
+
+  override render(
+    renderer: THREE.WebGPURenderer,
+    inputTexture: THREE.Texture,
+    outputTarget: THREE.WebGLRenderTarget,
+    time: number,
+    delta: number,
+  ): void {
+    let readTexture: THREE.Texture = inputTexture
+    let writeTarget = this.sortRtA
+
+    for (let i = 0; i < this.passCount; i++) {
+      this.passOffsetUniform.value = i % 2
+      this.sortTexNodeA.value = readTexture
+      this.sortTexNodeB.value = readTexture
+      renderer.setRenderTarget(writeTarget)
+      renderer.render(this.sortScene, this.sortCamera)
+
+      if (writeTarget === this.sortRtA) {
+        readTexture = this.sortRtA.texture
+        writeTarget = this.sortRtB
+      } else {
+        readTexture = this.sortRtB.texture
+        writeTarget = this.sortRtA
+      }
+    }
+
+    this.blitInputNode.value = readTexture
+    super.render(renderer, inputTexture, outputTarget, time, delta)
+  }
+
+  override updateParams(params: LayerParameterValues): void {
+    this.thresholdUniform.value =
+      typeof params.threshold === "number" ? params.threshold : 0.25
+
+    this.upperThresholdUniform.value =
+      typeof params.upperThreshold === "number" ? params.upperThreshold : 1
+
+    this.directionUniform.value = params.direction === "vertical" ? 1 : 0
+
+    this.reverseUniform.value = params.reverse === true ? 1 : 0
+
+    if (params.mode === "hue") {
+      this.modeUniform.value = 1
+    } else if (params.mode === "saturation") {
+      this.modeUniform.value = 2
+    } else {
+      this.modeUniform.value = 0
+    }
+
+    const range = typeof params.range === "number" ? params.range : 0.3
+    this.passCount = Math.max(1, Math.round(range * 300))
+  }
+
+  override resize(width: number, height: number): void {
+    this.width = Math.max(1, width)
+    this.height = Math.max(1, height)
+    this.widthUniform.value = this.width
+    this.heightUniform.value = this.height
+    this.sortRtA.setSize(this.width, this.height)
+    this.sortRtB.setSize(this.width, this.height)
+  }
+
+  override dispose(): void {
+    this.sortRtA.dispose()
+    this.sortRtB.dispose()
+    this.sortMaterial.dispose()
+    super.dispose()
+  }
+
+  protected override buildEffectNode(): Node {
+    if (!this.blitInputNode) {
+      return this.inputNode
+    }
+
+    return vec4(
+      this.blitInputNode.r,
+      this.blitInputNode.g,
+      this.blitInputNode.b,
+      float(1),
+    )
+  }
+}

package/src/renderer/project-clock.ts

@@ -0,0 +1,57 @@
+import type { ProjectClock } from "@/renderer/contracts"
+import type { TimelineStateSnapshot } from "@/types/editor"
+
+export type TimelineClockState = Pick<
+  TimelineStateSnapshot,
+  "currentTime" | "duration" | "isPlaying" | "loop"
+>
+
+const MIN_DURATION = 0.25
+
+export function createProjectClock(
+  timeline: TimelineClockState,
+  delta: number,
+  explicitTime?: number,
+): ProjectClock {
+  return {
+    delta,
+    duration: timeline.duration,
+    isPlaying: timeline.isPlaying,
+    loop: timeline.loop,
+    time: typeof explicitTime === "number" ? explicitTime : timeline.currentTime,
+  }
+}
+
+export function advanceProjectTimeline(
+  timeline: TimelineClockState,
+  delta: number,
+): Pick<TimelineClockState, "currentTime" | "isPlaying"> {
+  if (!Number.isFinite(delta) || delta <= 0 || !timeline.isPlaying) {
+    return {
+      currentTime: timeline.currentTime,
+      isPlaying: timeline.isPlaying,
+    }
+  }
+
+  const duration = Math.max(timeline.duration, MIN_DURATION)
+  const nextTime = timeline.currentTime + delta
+
+  if (timeline.loop) {
+    return {
+      currentTime: nextTime % duration,
+      isPlaying: timeline.isPlaying,
+    }
+  }
+
+  if (nextTime >= duration) {
+    return {
+      currentTime: duration,
+      isPlaying: false,
+    }
+  }
+
+  return {
+    currentTime: nextTime,
+    isPlaying: true,
+  }
+}