@basementstudio/shader-lab 0.1.0 → 1.0.2

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-{
-  "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

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