@basementstudio/shader-lab 0.1.0

package/packages/shader-lab-react/src/renderer/pipeline-manager.ts

@@ -0,0 +1,369 @@
+import { float, type TSLNode, texture as tslTexture, uv, vec2 } from "three/tsl"
+import * as THREE from "three/webgpu"
+import { AsciiPass } from "./ascii-pass"
+import { CrtPass } from "./crt-pass"
+import { CustomShaderPass } from "./custom-shader-pass"
+import { DitheringPass } from "./dithering-pass"
+import { GradientPass } from "./gradient-pass"
+import { HalftonePass } from "./halftone-pass"
+import { InkPass } from "./ink-pass"
+import { LivePass } from "./live-pass"
+import { MediaPass } from "./media-pass"
+import { ParticleGridPass } from "./particle-grid-pass"
+import type { PassNode } from "./pass-node"
+import { PatternPass } from "./pattern-pass"
+import { PixelSortingPass } from "./pixel-sorting-pass"
+import { TextPass } from "./text-pass"
+import type { ShaderLabCompositeMode, ShaderLabLayerConfig } from "../types"
+
+type LayerPassNode =
+  | AsciiPass
+  | CrtPass
+  | CustomShaderPass
+  | DitheringPass
+  | GradientPass
+  | HalftonePass
+  | InkPass
+  | LivePass
+  | MediaPass
+  | ParticleGridPass
+  | PassNode
+  | PatternPass
+  | PixelSortingPass
+  | TextPass
+
+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 parameterValuesSignature(params: ShaderLabLayerConfig["params"]): string {
+  return JSON.stringify(
+    Object.entries(params)
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([key, value]) => [key, value]),
+  )
+}
+
+function createLayerSignature(layer: ShaderLabLayerConfig): string {
+  if (layer.type === "custom-shader") {
+    return [
+      layer.id,
+      layer.kind,
+      layer.type,
+      layer.visible ? "1" : "0",
+      layer.opacity.toFixed(4),
+      layer.hue.toFixed(4),
+      layer.saturation.toFixed(4),
+      layer.blendMode,
+      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.id,
+    layer.kind,
+    layer.type,
+    layer.asset?.kind ?? "no-asset",
+    layer.asset?.src ?? "no-src",
+    layer.visible ? "1" : "0",
+    layer.opacity.toFixed(4),
+    layer.hue.toFixed(4),
+    layer.saturation.toFixed(4),
+    layer.blendMode,
+    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 readonly onRuntimeError: ((message: string | null) => void) | undefined
+
+  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: { height: number; width: number },
+    onRuntimeError?: (message: string | null) => void,
+  ) {
+    this.renderer = renderer
+    this.onRuntimeError = onRuntimeError
+    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: ShaderLabLayerConfig[]): void {
+    const incomingIds = new Set(layers.map((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 layer of layers) {
+      const signature = createLayerSignature(layer)
+      let pass = this.passMap.get(layer.id)
+
+      if (!pass) {
+        pass = this.createPass(layer)
+        pass.resize(this.width, this.height)
+        pass.updateLogicalSize(this.logicalWidth, this.logicalHeight)
+        this.passMap.set(layer.id, pass)
+        this.dirty = true
+      }
+
+      if (this.layerSignatures.get(layer.id) !== signature) {
+        this.layerSignatures.set(layer.id, signature)
+        this.applyLayerState(pass, layer)
+        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: { height: number; width: number }): 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: { height: number; width: number }): 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, layer: ShaderLabLayerConfig): void {
+    pass.enabled = layer.visible
+    pass.updateOpacity(clampUnit(layer.opacity))
+    pass.updateBlendMode(layer.blendMode)
+    const compositeMode: ShaderLabCompositeMode =
+      layer.compositeMode === "mask" ? "mask" : "filter"
+    pass.updateCompositeMode(compositeMode)
+    pass.updateLayerColorAdjustments(layer.hue, layer.saturation)
+    pass.updateParams(layer.params)
+
+    if (pass instanceof MediaPass) {
+      const asset = layer.asset
+      if (asset?.kind === "image" || asset?.kind === "video") {
+        void pass
+          .setMedia(asset.src, asset.kind)
+          .then(() => {
+            this.dirty = true
+          })
+          .catch((error) => {
+            this.onRuntimeError?.(
+              error instanceof Error ? error.message : "Failed to load media asset.",
+            )
+            this.dirty = true
+          })
+      } else {
+        pass.clearMedia()
+      }
+    }
+
+    if (pass instanceof LivePass) {
+      const facingMode =
+        typeof layer.params.facingMode === "string" ? layer.params.facingMode : "user"
+
+      if (facingMode !== pass.getFacingMode() || !pass.needsContinuousRender()) {
+        void pass
+          .startCamera(facingMode)
+          .then(() => {
+            this.dirty = true
+          })
+          .catch((error) => {
+            this.onRuntimeError?.(
+              error instanceof Error ? error.message : "Failed to start live camera input.",
+            )
+            this.dirty = true
+          })
+      }
+    }
+  }
+
+  private createPass(layer: ShaderLabLayerConfig): LayerPassNode {
+    if (layer.kind === "effect") {
+      switch (layer.type) {
+        case "ascii":
+          return new AsciiPass(layer.id)
+        case "crt":
+          return new CrtPass(layer.id)
+        case "dithering":
+          return new DitheringPass(layer.id)
+        case "halftone":
+          return new HalftonePass(layer.id)
+        case "ink":
+          return new InkPass(layer.id)
+        case "particle-grid":
+          return new ParticleGridPass(layer.id)
+        case "pattern":
+          return new PatternPass(layer.id)
+        case "pixel-sorting":
+          return new PixelSortingPass(layer.id)
+      }
+    }
+
+    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, this.onRuntimeError)
+    }
+
+    if (layer.kind === "source" && layer.type === "live") {
+      return new LivePass(layer.id)
+    }
+
+    throw new Error(
+      `Layer "${layer.name}" of type "${layer.type}" is not supported by the package runtime yet.`,
+    )
+  }
+}

package/packages/shader-lab-react/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 "./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),
+    )
+  }
+}