@basementstudio/shader-lab 0.1.0

package/packages/shader-lab-react/src/shader-lab-composition.tsx

@@ -0,0 +1,163 @@
+import { type CSSProperties, useEffect, useRef, useState } from "react"
+import { buildRendererFrame, type RendererSize } from "./renderer/contracts"
+import {
+  browserSupportsWebGPU,
+  createWebGPURenderer,
+} from "./renderer/create-webgpu-renderer"
+import type { ShaderLabConfig } from "./types"
+
+export interface ShaderLabCompositionProps {
+  className?: string
+  config: ShaderLabConfig
+  onRuntimeError?: (message: string | null) => void
+  style?: CSSProperties
+}
+
+export function ShaderLabComposition({
+  className,
+  config,
+  onRuntimeError,
+  style,
+}: ShaderLabCompositionProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null)
+  const frameRef = useRef<number | null>(null)
+  const lastTimeRef = useRef<number | null>(null)
+  const [runtimeError, setRuntimeError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+
+    if (!canvas) {
+      return
+    }
+
+    if (!browserSupportsWebGPU()) {
+      const message = "WebGPU is not available in this browser."
+      setRuntimeError(message)
+      onRuntimeError?.(message)
+      return
+    }
+
+    let cancelled = false
+    let rendererPromise: Promise<
+      Awaited<ReturnType<typeof createWebGPURenderer>>
+    > | null = null
+    let runtimeRenderer: Awaited<
+      ReturnType<typeof createWebGPURenderer>
+    > | null = null
+
+    const handleRuntimeError = (message: string | null) => {
+      setRuntimeError(message)
+      onRuntimeError?.(message)
+    }
+
+    const getViewportSize = (): RendererSize => {
+      const bounds = canvas.getBoundingClientRect()
+
+      return {
+        height: Math.max(1, Math.round(bounds.height)),
+        width: Math.max(1, Math.round(bounds.width)),
+      }
+    }
+
+    const renderFrame = (now: number) => {
+      if (cancelled || !runtimeRenderer) {
+        return
+      }
+
+      const previousTime = lastTimeRef.current ?? now
+      const delta = Math.max(0, (now - previousTime) / 1000)
+      lastTimeRef.current = now
+
+      const devicePixelRatio = window.devicePixelRatio || 1
+      const viewportSize = getViewportSize()
+
+      runtimeRenderer.resize(viewportSize, devicePixelRatio)
+      runtimeRenderer.render(
+        buildRendererFrame(
+          config,
+          now / 1000,
+          delta,
+          devicePixelRatio,
+          viewportSize
+        )
+      )
+
+      frameRef.current = window.requestAnimationFrame(renderFrame)
+    }
+
+    rendererPromise = createWebGPURenderer(canvas, handleRuntimeError)
+
+    void rendererPromise
+      .then(async (renderer) => {
+        if (cancelled) {
+          renderer.dispose()
+          return
+        }
+
+        runtimeRenderer = renderer
+        await renderer.initialize()
+        handleRuntimeError(null)
+        frameRef.current = window.requestAnimationFrame(renderFrame)
+      })
+      .catch((error) => {
+        handleRuntimeError(
+          error instanceof Error
+            ? error.message
+            : "Failed to initialize the Shader Lab runtime renderer."
+        )
+      })
+
+    return () => {
+      cancelled = true
+      lastTimeRef.current = null
+
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current)
+        frameRef.current = null
+      }
+
+      void rendererPromise?.then((renderer) => {
+        renderer.dispose()
+      })
+    }
+  }, [config, onRuntimeError])
+
+  return (
+    <div
+      className={className}
+      data-shader-lab-composition="true"
+      style={{
+        aspectRatio: `${config.composition.width} / ${config.composition.height}`,
+        overflow: "hidden",
+        position: "relative",
+        width: "100%",
+        ...style,
+      }}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{ display: "block", height: "100%", width: "100%" }}
+      />
+      {runtimeError ? (
+        <div
+          style={{
+            alignItems: "center",
+            background: "rgba(10, 13, 16, 0.82)",
+            color: "rgba(255,255,255,0.92)",
+            display: "flex",
+            fontFamily: "monospace",
+            fontSize: 12,
+            inset: 0,
+            justifyContent: "center",
+            padding: 16,
+            position: "absolute",
+            textAlign: "center",
+          }}
+        >
+          {runtimeError}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/packages/shader-lab-react/src/timeline.ts

@@ -0,0 +1,283 @@
+import { easings } from "./easings"
+import type {
+  ShaderLabAnimatedPropertyBinding,
+  ShaderLabLayerConfig,
+  ShaderLabParameterValue,
+  ShaderLabTimelineInterpolation,
+  ShaderLabTimelineTrack,
+} from "./types"
+
+export interface EvaluatedLayerState {
+  layerId: string
+  params: Record<string, ShaderLabParameterValue>
+  properties: Partial<Record<"hue" | "opacity" | "saturation" | "visible", boolean | number>>
+}
+
+type NumericTuple = [number, number] | [number, number, number]
+
+function cloneParameterValue(value: ShaderLabParameterValue): ShaderLabParameterValue {
+  if (Array.isArray(value)) {
+    return [...value] as ShaderLabParameterValue
+  }
+
+  return value
+}
+
+function isNumericTuple(value: ShaderLabParameterValue): value is NumericTuple {
+  return (
+    Array.isArray(value) &&
+    (value.length === 2 || value.length === 3) &&
+    value.every((entry) => typeof entry === "number")
+  )
+}
+
+function parseHexColor(value: string): [number, number, number] | null {
+  const normalized = value.trim().toLowerCase()
+
+  if (!normalized.startsWith("#")) {
+    return null
+  }
+
+  const hex = normalized.slice(1)
+
+  if (hex.length === 6 || hex.length === 8) {
+    const r = Number.parseInt(hex.slice(0, 2), 16)
+    const g = Number.parseInt(hex.slice(2, 4), 16)
+    const b = Number.parseInt(hex.slice(4, 6), 16)
+
+    if ([r, g, b].some(Number.isNaN)) {
+      return null
+    }
+
+    return [r, g, b]
+  }
+
+  return null
+}
+
+function toHex(channel: number): string {
+  return Math.round(Math.min(255, Math.max(0, channel)))
+    .toString(16)
+    .padStart(2, "0")
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+function lerp(a: number, b: number, progress: number): number {
+  return a + (b - a) * progress
+}
+
+function resolveProgress(progress: number, interpolation: ShaderLabTimelineInterpolation): number {
+  if (interpolation === "step") {
+    return 0
+  }
+
+  if (interpolation === "smooth") {
+    return easings.easeInOutCubic(progress)
+  }
+
+  return progress
+}
+
+function interpolateValue(
+  from: ShaderLabParameterValue,
+  to: ShaderLabParameterValue,
+  progress: number,
+  interpolation: ShaderLabTimelineInterpolation,
+): ShaderLabParameterValue {
+  if (interpolation === "step") {
+    return cloneParameterValue(from)
+  }
+
+  const eased = resolveProgress(progress, interpolation)
+
+  if (typeof from === "number" && typeof to === "number") {
+    return lerp(from, to, eased)
+  }
+
+  if (typeof from === "boolean" && typeof to === "boolean") {
+    return eased < 0.5 ? from : to
+  }
+
+  if (typeof from === "string" && typeof to === "string") {
+    const leftColor = parseHexColor(from)
+    const rightColor = parseHexColor(to)
+
+    if (!(leftColor && rightColor)) {
+      return eased < 0.5 ? from : to
+    }
+
+    return rgbToHex(
+      lerp(leftColor[0], rightColor[0], eased),
+      lerp(leftColor[1], rightColor[1], eased),
+      lerp(leftColor[2], rightColor[2], eased),
+    )
+  }
+
+  if (isNumericTuple(from) && isNumericTuple(to) && from.length === to.length) {
+    return from.map((entry, index) => lerp(entry, to[index] ?? entry, eased)) as ShaderLabParameterValue
+  }
+
+  return eased < 0.5 ? cloneParameterValue(from) : cloneParameterValue(to)
+}
+
+function evaluateTrackAtTime(
+  track: ShaderLabTimelineTrack,
+  time: number,
+): ShaderLabParameterValue | null {
+  if (!track.enabled || track.keyframes.length === 0) {
+    return null
+  }
+
+  if (track.keyframes.length === 1) {
+    const onlyKeyframe = track.keyframes[0]
+    return onlyKeyframe ? cloneParameterValue(onlyKeyframe.value) : null
+  }
+
+  const firstKeyframe = track.keyframes[0]
+  const lastKeyframe = track.keyframes[track.keyframes.length - 1]
+
+  if (!(firstKeyframe && lastKeyframe)) {
+    return null
+  }
+
+  if (time <= firstKeyframe.time) {
+    return cloneParameterValue(firstKeyframe.value)
+  }
+
+  if (time >= lastKeyframe.time) {
+    return cloneParameterValue(lastKeyframe.value)
+  }
+
+  for (let index = 1; index < track.keyframes.length; index += 1) {
+    const nextKeyframe = track.keyframes[index]
+    const previousKeyframe = track.keyframes[index - 1]
+
+    if (!(nextKeyframe && previousKeyframe) || time > nextKeyframe.time) {
+      continue
+    }
+
+    const span = Math.max(nextKeyframe.time - previousKeyframe.time, 1e-6)
+    const progress = Math.max(0, Math.min(1, (time - previousKeyframe.time) / span))
+
+    return interpolateValue(
+      previousKeyframe.value,
+      nextKeyframe.value,
+      progress,
+      track.interpolation,
+    )
+  }
+
+  return cloneParameterValue(lastKeyframe.value)
+}
+
+function applyBindingOverride(
+  state: EvaluatedLayerState,
+  binding: ShaderLabAnimatedPropertyBinding,
+  value: ShaderLabParameterValue,
+): void {
+  if (binding.kind === "param") {
+    state.params[binding.key] = cloneParameterValue(value)
+    return
+  }
+
+  if (binding.property === "visible" && typeof value === "boolean") {
+    state.properties.visible = value
+    return
+  }
+
+  if (
+    (binding.property === "opacity" ||
+      binding.property === "hue" ||
+      binding.property === "saturation") &&
+    typeof value === "number"
+  ) {
+    state.properties[binding.property] = value
+  }
+}
+
+export function evaluateTimelineForLayers(
+  layers: ShaderLabLayerConfig[],
+  tracks: ShaderLabTimelineTrack[],
+  time: number,
+): EvaluatedLayerState[] {
+  if (tracks.length === 0) {
+    return []
+  }
+
+  const layerStates = new Map<string, EvaluatedLayerState>()
+  const layerIds = new Set(layers.map((layer) => layer.id))
+
+  for (const track of tracks) {
+    if (!layerIds.has(track.layerId)) {
+      continue
+    }
+
+    const value = evaluateTrackAtTime(track, time)
+
+    if (value === null) {
+      continue
+    }
+
+    let state = layerStates.get(track.layerId)
+
+    if (!state) {
+      state = {
+        layerId: track.layerId,
+        params: {},
+        properties: {},
+      }
+      layerStates.set(track.layerId, state)
+    }
+
+    applyBindingOverride(state, track.binding, value)
+  }
+
+  return [...layerStates.values()]
+}
+
+export function resolveEvaluatedLayers(
+  layers: ShaderLabLayerConfig[],
+  tracks: ShaderLabTimelineTrack[],
+  time: number,
+): ShaderLabLayerConfig[] {
+  const evaluatedStates = evaluateTimelineForLayers(layers, tracks, time)
+  const evaluatedById = new Map(evaluatedStates.map((state) => [state.layerId, state]))
+
+  return layers.map((layer) => {
+    const evaluated = evaluatedById.get(layer.id)
+
+    if (!evaluated) {
+      return {
+        ...layer,
+        params: { ...layer.params },
+      }
+    }
+
+    return {
+      ...layer,
+      hue:
+        typeof evaluated.properties.hue === "number"
+          ? evaluated.properties.hue
+          : layer.hue,
+      opacity:
+        typeof evaluated.properties.opacity === "number"
+          ? evaluated.properties.opacity
+          : layer.opacity,
+      params: {
+        ...layer.params,
+        ...evaluated.params,
+      },
+      saturation:
+        typeof evaluated.properties.saturation === "number"
+          ? evaluated.properties.saturation
+          : layer.saturation,
+      visible:
+        typeof evaluated.properties.visible === "boolean"
+          ? evaluated.properties.visible
+          : layer.visible,
+    }
+  })
+}

package/packages/shader-lab-react/src/types/editor.ts

@@ -0,0 +1,5 @@
+import type { ShaderLabParameterValue } from "../types"
+
+export type LayerParameterValues = Record<string, ShaderLabParameterValue>
+export type LayerCompositeMode = "filter" | "mask"
+

package/packages/shader-lab-react/src/types.ts

@@ -0,0 +1,141 @@
+export type ShaderLabParameterValue =
+  | number
+  | string
+  | boolean
+  | [number, number]
+  | [number, number, number]
+
+export type ShaderLabLayerKind = "effect" | "source"
+
+export type ShaderLabSourceLayerType =
+  | "custom-shader"
+  | "gradient"
+  | "image"
+  | "live"
+  | "text"
+  | "video"
+
+export type ShaderLabEffectLayerType =
+  | "ascii"
+  | "crt"
+  | "dithering"
+  | "halftone"
+  | "ink"
+  | "particle-grid"
+  | "pattern"
+  | "pixel-sorting"
+
+export type ShaderLabLayerType =
+  | ShaderLabEffectLayerType
+  | ShaderLabSourceLayerType
+
+export type ShaderLabBlendMode =
+  | "normal"
+  | "multiply"
+  | "screen"
+  | "overlay"
+  | "darken"
+  | "lighten"
+  | "color-dodge"
+  | "color-burn"
+  | "hard-light"
+  | "soft-light"
+  | "difference"
+  | "exclusion"
+  | "hue"
+  | "saturation"
+  | "color"
+  | "luminosity"
+
+export type ShaderLabCompositeMode = "filter" | "mask"
+
+export type ShaderLabAssetSource =
+  | {
+      fileName?: string
+      kind: "image"
+      src: string
+    }
+  | {
+      fileName?: string
+      kind: "video"
+      src: string
+    }
+
+export type ShaderLabInlineSketchSource = {
+  code: string
+  entryExport: string
+  fileName?: string
+  mode: "inline"
+}
+
+export type ShaderLabModuleSketchSource = {
+  entryExport?: string
+  mode: "module"
+  sketch: unknown
+}
+
+export type ShaderLabSketchSource =
+  | ShaderLabInlineSketchSource
+  | ShaderLabModuleSketchSource
+
+export type ShaderLabTimelineInterpolation = "linear" | "smooth" | "step"
+
+export type ShaderLabAnimatedPropertyBinding =
+  | {
+      kind: "layer"
+      label: string
+      property: "hue" | "opacity" | "saturation" | "visible"
+      valueType: "boolean" | "number"
+    }
+  | {
+      key: string
+      kind: "param"
+      label: string
+      valueType: "boolean" | "color" | "number" | "select" | "vec2" | "vec3"
+    }
+
+export interface ShaderLabTimelineKeyframe {
+  id: string
+  time: number
+  value: ShaderLabParameterValue
+}
+
+export interface ShaderLabTimelineTrack {
+  binding: ShaderLabAnimatedPropertyBinding
+  enabled: boolean
+  id: string
+  interpolation: ShaderLabTimelineInterpolation
+  keyframes: ShaderLabTimelineKeyframe[]
+  layerId: string
+}
+
+export interface ShaderLabTimelineConfig {
+  duration: number
+  loop: boolean
+  tracks: ShaderLabTimelineTrack[]
+}
+
+export interface ShaderLabLayerConfig {
+  asset?: ShaderLabAssetSource
+  blendMode: ShaderLabBlendMode
+  compositeMode: ShaderLabCompositeMode
+  hue: number
+  id: string
+  kind: ShaderLabLayerKind
+  name: string
+  opacity: number
+  params: Record<string, ShaderLabParameterValue>
+  saturation: number
+  sketch?: ShaderLabSketchSource
+  type: ShaderLabLayerType
+  visible: boolean
+}
+
+export interface ShaderLabConfig {
+  composition: {
+    height: number
+    width: number
+  }
+  layers: ShaderLabLayerConfig[]
+  timeline: ShaderLabTimelineConfig
+}

package/packages/shader-lab-react/tsconfig.build.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDeclarationOnly": false,
+    "noEmit": false,
+    "tsBuildInfoFile": "./tsconfig.build.tsbuildinfo"
+  }
+}

package/packages/shader-lab-react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "composite": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "jsx": "react-jsx",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "outDir": "./dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [],
+    "tsBuildInfoFile": "./tsconfig.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"]
+}

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}