@basementstudio/shader-lab 0.1.0 → 1.0.2

package/src/renderer/pipeline-manager.ts

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

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

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