@basementstudio/shader-lab 0.1.0

package/src/lib/editor/custom-shader/shared.ts

@@ -0,0 +1,28 @@
+export const CUSTOM_SHADER_INTERNAL_VISIBILITY = {
+  equals: "__never__",
+  key: "__customShaderInternal",
+} as const
+
+export const CUSTOM_SHADER_ENTRY_EXPORT = "sketch"
+
+export const CUSTOM_SHADER_INTERNAL_KEYS = new Set([
+  "entryExport",
+  "sourceCode",
+  "sourceFileName",
+  "sourceMode",
+  "sourceRevision",
+])
+
+export const CUSTOM_SHADER_STARTER = `export const sketch = Fn(() => {
+  const uv0 = screenAspectUV(screenSize)
+  const color = vec3(
+    uv0.x.add(0.5),
+    uv0.y.add(0.5),
+    sin(time).mul(0.5).add(0.5)
+  ).toVar()
+
+  color.assign(technicolorTonemap(color))
+
+  return color
+})
+`

package/src/lib/editor/export.ts

@@ -0,0 +1,420 @@
+"use client"
+
+import {
+  browserSupportsWebGPU,
+  createWebGPURenderer,
+} from "@/renderer/create-webgpu-renderer"
+import { buildRendererFrame } from "@/renderer/contracts"
+import type { EditorAsset, EditorLayer, Size, TimelineStateSnapshot } from "@/types/editor"
+
+export type ExportAspectPreset = "16:9" | "1:1" | "4:5" | "9:16" | "original"
+export type ExportQualityPreset = "draft" | "high" | "standard" | "ultra"
+export type VideoExportFormat = "mp4" | "webm"
+
+export const EXPORT_QUALITY_SCALE: Record<ExportQualityPreset, number> = {
+  draft: 0.5,
+  high: 2,
+  standard: 1,
+  ultra: 4,
+}
+
+export const ASPECT_PRESET_LABELS: Record<ExportAspectPreset, string> = {
+  "16:9": "16:9",
+  "1:1": "1:1",
+  "4:5": "4:5",
+  "9:16": "9:16",
+  original: "Original",
+}
+
+type RenderProjectState = {
+  assets: EditorAsset[]
+  compositionSize: Size
+  layers: EditorLayer[]
+  timeline: TimelineStateSnapshot
+}
+
+type StillExportOptions = {
+  aspectPreset: ExportAspectPreset
+  qualityPreset: ExportQualityPreset
+  time: number
+  type?: string
+  width: number
+  height: number
+}
+
+type VideoExportOptions = {
+  aspectPreset: ExportAspectPreset
+  duration: number
+  format: VideoExportFormat
+  fps: number
+  qualityPreset: ExportQualityPreset
+  startTime: number
+  width: number
+  height: number
+}
+
+function clampDimension(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 1
+  }
+
+  return Math.max(1, Math.round(value))
+}
+
+function getAspectRatio(compositionSize: Size, aspectPreset: ExportAspectPreset): number {
+  switch (aspectPreset) {
+    case "1:1":
+      return 1
+    case "4:5":
+      return 4 / 5
+    case "9:16":
+      return 9 / 16
+    case "16:9":
+      return 16 / 9
+    default:
+      return compositionSize.width / Math.max(compositionSize.height, 1)
+  }
+}
+
+export function getAspectRatioForPreset(
+  compositionSize: Size,
+  aspectPreset: ExportAspectPreset,
+): number {
+  return getAspectRatio(compositionSize, aspectPreset)
+}
+
+export function getDimensionsForPreset(
+  compositionSize: Size,
+  aspectPreset: ExportAspectPreset,
+  qualityPreset: ExportQualityPreset,
+): Size {
+  const ratio = getAspectRatio(compositionSize, aspectPreset)
+  const longEdge = Math.max(compositionSize.width, compositionSize.height)
+  const scaledLongEdge = clampDimension(longEdge * EXPORT_QUALITY_SCALE[qualityPreset])
+
+  if (ratio >= 1) {
+    return {
+      height: clampDimension(scaledLongEdge / ratio),
+      width: scaledLongEdge,
+    }
+  }
+
+  return {
+    height: scaledLongEdge,
+    width: clampDimension(scaledLongEdge * ratio),
+  }
+}
+
+export function getSupportedVideoMimeType(format: VideoExportFormat): string | null {
+  if (typeof MediaRecorder === "undefined") {
+    return null
+  }
+
+  const candidates =
+    format === "mp4"
+      ? ["video/mp4;codecs=h264", "video/mp4"]
+      : ["video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/webm"]
+
+  return candidates.find((candidate) => MediaRecorder.isTypeSupported(candidate)) ?? null
+}
+
+export async function exportStillImage(
+  projectState: RenderProjectState,
+  options: StillExportOptions,
+): Promise<Blob> {
+  const renderScale = EXPORT_QUALITY_SCALE[options.qualityPreset]
+  const sourceRenderSize = {
+    height: clampDimension(projectState.compositionSize.height * renderScale),
+    width: clampDimension(projectState.compositionSize.width * renderScale),
+  }
+
+  const renderCanvas = createHiddenRenderCanvas()
+  const outputCanvas = document.createElement("canvas")
+  outputCanvas.width = clampDimension(options.width)
+  outputCanvas.height = clampDimension(options.height)
+
+  const renderer = await createExportRenderer(renderCanvas)
+
+  try {
+    await prewarmExportFrame(renderer, renderCanvas, projectState, {
+      logicalSize: projectState.compositionSize,
+      renderSize: sourceRenderSize,
+      time: options.time,
+    })
+
+    await renderFrameToCanvas(renderer, renderCanvas, projectState, {
+      logicalSize: projectState.compositionSize,
+      renderSize: sourceRenderSize,
+      time: options.time,
+    })
+    cropCanvasToAspect(renderCanvas, outputCanvas, options.aspectPreset, projectState.compositionSize)
+
+    const blob = await canvasToBlob(outputCanvas, options.type ?? "image/png")
+
+    if (!blob) {
+      throw new Error("Could not build the export image.")
+    }
+
+    return blob
+  } finally {
+    renderer.dispose()
+    destroyHiddenRenderCanvas(renderCanvas)
+  }
+}
+
+export async function exportVideo(
+  projectState: RenderProjectState,
+  options: VideoExportOptions,
+): Promise<Blob> {
+  const mimeType = getSupportedVideoMimeType(options.format)
+
+  if (!mimeType) {
+    throw new Error(`${options.format.toUpperCase()} export is not supported in this browser.`)
+  }
+
+  const renderScale = EXPORT_QUALITY_SCALE[options.qualityPreset]
+  const sourceRenderSize = {
+    height: clampDimension(projectState.compositionSize.height * renderScale),
+    width: clampDimension(projectState.compositionSize.width * renderScale),
+  }
+
+  const renderCanvas = createHiddenRenderCanvas()
+  const outputCanvas = document.createElement("canvas")
+  outputCanvas.width = clampDimension(options.width)
+  outputCanvas.height = clampDimension(options.height)
+
+  const renderer = await createExportRenderer(renderCanvas)
+  const stream = outputCanvas.captureStream(options.fps)
+  const recorder = new MediaRecorder(stream, {
+    mimeType,
+    videoBitsPerSecond: getVideoBitrate(options.qualityPreset),
+  })
+  const chunks: BlobPart[] = []
+
+  recorder.ondataavailable = (event) => {
+    if (event.data.size > 0) {
+      chunks.push(event.data)
+    }
+  }
+
+  const stopPromise = new Promise<Blob>((resolve, reject) => {
+    recorder.onerror = () => {
+      reject(new Error("The browser failed while encoding the export video."))
+    }
+    recorder.onstop = () => {
+      resolve(new Blob(chunks, { type: mimeType }))
+    }
+  })
+
+  try {
+    await prewarmExportFrame(renderer, renderCanvas, projectState, {
+      logicalSize: projectState.compositionSize,
+      renderSize: sourceRenderSize,
+      time: options.startTime,
+    })
+
+    recorder.start()
+
+    const totalFrames = Math.max(1, Math.ceil(options.duration * options.fps))
+
+    for (let frameIndex = 0; frameIndex < totalFrames; frameIndex += 1) {
+      const time = resolveExportTime(
+        options.startTime + frameIndex / options.fps,
+        projectState.timeline.duration,
+        projectState.timeline.loop,
+      )
+
+      await renderFrameToCanvas(renderer, renderCanvas, projectState, {
+        logicalSize: projectState.compositionSize,
+        renderSize: sourceRenderSize,
+        time,
+      })
+
+      cropCanvasToAspect(renderCanvas, outputCanvas, options.aspectPreset, projectState.compositionSize)
+      await wait(Math.max(4, 1000 / options.fps))
+    }
+
+    recorder.stop()
+    stream.getTracks().forEach((track) => {
+      track.stop()
+    })
+
+    return await stopPromise
+  } finally {
+    renderer.dispose()
+    destroyHiddenRenderCanvas(renderCanvas)
+  }
+}
+
+async function createExportRenderer(canvas: HTMLCanvasElement) {
+  if (!browserSupportsWebGPU()) {
+    throw new Error("WebGPU export is not available in this browser.")
+  }
+
+  const renderer = await createWebGPURenderer(canvas)
+  await renderer.initialize()
+  return renderer
+}
+
+async function renderFrameToCanvas(
+  renderer: Awaited<ReturnType<typeof createExportRenderer>>,
+  canvas: HTMLCanvasElement,
+  projectState: RenderProjectState,
+  options: {
+    logicalSize: Size
+    renderSize: Size
+    time: number
+  },
+): Promise<void> {
+  const timelineState = structuredClone(projectState.timeline)
+  timelineState.currentTime = resolveExportTime(
+    options.time,
+    timelineState.duration,
+    timelineState.loop,
+  )
+  timelineState.isPlaying = false
+
+  canvas.width = options.renderSize.width
+  canvas.height = options.renderSize.height
+  renderer.resize(options.renderSize, 1)
+  renderer.render(
+    buildRendererFrame({
+      assets: projectState.assets,
+      clockTime: timelineState.currentTime,
+      delta: 0,
+      layers: projectState.layers,
+      logicalSize: options.logicalSize,
+      outputSize: options.renderSize,
+      pixelRatio: 1,
+      timeline: timelineState,
+      viewportSize: options.renderSize,
+    }),
+  )
+
+  await waitForRenderedFrame()
+}
+
+async function prewarmExportFrame(
+  renderer: Awaited<ReturnType<typeof createExportRenderer>>,
+  canvas: HTMLCanvasElement,
+  projectState: RenderProjectState,
+  options: {
+    logicalSize: Size
+    renderSize: Size
+    time: number
+  },
+): Promise<void> {
+  await renderFrameToCanvas(renderer, canvas, projectState, options)
+  await wait(48)
+}
+
+function cropCanvasToAspect(
+  sourceCanvas: HTMLCanvasElement,
+  outputCanvas: HTMLCanvasElement,
+  aspectPreset: ExportAspectPreset,
+  compositionSize: Size,
+): void {
+  const context = outputCanvas.getContext("2d")
+
+  if (!context) {
+    throw new Error("Could not prepare the export canvas.")
+  }
+
+  const targetRatio = getAspectRatio(compositionSize, aspectPreset)
+  const sourceRatio = sourceCanvas.width / Math.max(sourceCanvas.height, 1)
+  let cropWidth = sourceCanvas.width
+  let cropHeight = sourceCanvas.height
+  let cropX = 0
+  let cropY = 0
+
+  if (Math.abs(targetRatio - sourceRatio) > 0.0001) {
+    if (targetRatio > sourceRatio) {
+      cropHeight = Math.round(sourceCanvas.width / targetRatio)
+      cropY = Math.round((sourceCanvas.height - cropHeight) / 2)
+    } else {
+      cropWidth = Math.round(sourceCanvas.height * targetRatio)
+      cropX = Math.round((sourceCanvas.width - cropWidth) / 2)
+    }
+  }
+
+  context.clearRect(0, 0, outputCanvas.width, outputCanvas.height)
+  context.drawImage(
+    sourceCanvas,
+    cropX,
+    cropY,
+    cropWidth,
+    cropHeight,
+    0,
+    0,
+    outputCanvas.width,
+    outputCanvas.height,
+  )
+}
+
+function canvasToBlob(canvas: HTMLCanvasElement, type: string): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => resolve(blob), type)
+  })
+}
+
+function getVideoBitrate(qualityPreset: ExportQualityPreset): number {
+  switch (qualityPreset) {
+    case "draft":
+      return 6_000_000
+    case "high":
+      return 16_000_000
+    case "ultra":
+      return 28_000_000
+    default:
+      return 10_000_000
+  }
+}
+
+function resolveExportTime(time: number, duration: number, loop: boolean): number {
+  if (!(Number.isFinite(time) && Number.isFinite(duration) && duration > 0)) {
+    return 0
+  }
+
+  if (loop) {
+    const remainder = time % duration
+    return remainder >= 0 ? remainder : duration + remainder
+  }
+
+  return Math.max(0, Math.min(duration, time))
+}
+
+function wait(durationMs: number): Promise<void> {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, durationMs)
+  })
+}
+
+function waitForRenderedFrame(): Promise<void> {
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        resolve()
+      })
+    })
+  })
+}
+
+function createHiddenRenderCanvas(): HTMLCanvasElement {
+  const canvas = document.createElement("canvas")
+  canvas.setAttribute("aria-hidden", "true")
+  Object.assign(canvas.style, {
+    height: "1px",
+    left: "-99999px",
+    opacity: "0",
+    pointerEvents: "none",
+    position: "fixed",
+    top: "0",
+    width: "1px",
+  })
+  document.body.append(canvas)
+  return canvas
+}
+
+function destroyHiddenRenderCanvas(canvas: HTMLCanvasElement): void {
+  canvas.remove()
+}

package/src/lib/editor/history.ts

@@ -0,0 +1,71 @@
+import type {
+  EditorHistorySnapshot,
+  TimelineStateSnapshot,
+} from "@/types/editor"
+import { useLayerStore } from "@/store/layer-store"
+import { useTimelineStore } from "@/store/timeline-store"
+
+type HistoryTimelineSnapshot = EditorHistorySnapshot["timeline"]
+
+function cloneHistoryTimeline(
+  timeline: Pick<
+    TimelineStateSnapshot,
+    "currentTime" | "duration" | "loop" | "selectedKeyframeId" | "selectedTrackId" | "tracks"
+  >,
+): HistoryTimelineSnapshot {
+  return structuredClone({
+    currentTime: timeline.currentTime,
+    duration: timeline.duration,
+    loop: timeline.loop,
+    selectedKeyframeId: timeline.selectedKeyframeId,
+    selectedTrackId: timeline.selectedTrackId,
+    tracks: timeline.tracks,
+  })
+}
+
+export function buildEditorHistorySnapshotFromState(
+  layerState: Pick<
+    ReturnType<typeof useLayerStore.getState>,
+    "hoveredLayerId" | "layers" | "selectedLayerId"
+  >,
+  timelineState: Pick<
+    TimelineStateSnapshot,
+    "currentTime" | "duration" | "loop" | "selectedKeyframeId" | "selectedTrackId" | "tracks"
+  >,
+): EditorHistorySnapshot {
+  return {
+    hoveredLayerId: layerState.hoveredLayerId,
+    layers: structuredClone(layerState.layers),
+    selectedLayerId: layerState.selectedLayerId,
+    timeline: cloneHistoryTimeline(timelineState),
+  }
+}
+
+export function buildEditorHistorySnapshot(): EditorHistorySnapshot {
+  return buildEditorHistorySnapshotFromState(
+    useLayerStore.getState(),
+    useTimelineStore.getState(),
+  )
+}
+
+export function applyEditorHistorySnapshot(snapshot: EditorHistorySnapshot): void {
+  useLayerStore
+    .getState()
+    .replaceState(snapshot.layers, snapshot.selectedLayerId, snapshot.hoveredLayerId)
+  useTimelineStore.getState().replaceState({
+    currentTime: snapshot.timeline.currentTime,
+    duration: snapshot.timeline.duration,
+    isPlaying: false,
+    loop: snapshot.timeline.loop,
+    selectedKeyframeId: snapshot.timeline.selectedKeyframeId,
+    selectedTrackId: snapshot.timeline.selectedTrackId,
+    tracks: snapshot.timeline.tracks,
+  })
+}
+
+export function getHistorySnapshotSignature(snapshot: EditorHistorySnapshot): string {
+  return JSON.stringify({
+    layers: snapshot.layers,
+    timeline: snapshot.timeline,
+  })
+}

package/src/lib/editor/layers.ts

@@ -0,0 +1,76 @@
+import { getLayerDefinition } from "@/lib/editor/config/layer-registry"
+import type {
+  EditorLayer,
+  LayerKind,
+  LayerParameterValues,
+  LayerType,
+  Size,
+} from "@/types/editor"
+import { buildParameterValues, cloneParameterValues } from "@/lib/editor/parameter-schema"
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+export const DEFAULT_CANVAS_SIZE: Size = {
+  height: 1080,
+  width: 1920,
+}
+
+export function getLayerKind(type: LayerType): LayerKind {
+  return getLayerDefinition(type).kind
+}
+
+export function getDefaultLayerName(type: LayerType, existingCount: number): string {
+  const definition = getLayerDefinition(type)
+
+  return existingCount > 0
+    ? `${definition.defaultName} ${existingCount + 1}`
+    : definition.defaultName
+}
+
+export function createLayer(type: LayerType, existingCount = 0): EditorLayer {
+  const definition = getLayerDefinition(type)
+
+  return {
+    assetId: null,
+    blendMode: "normal",
+    compositeMode: "filter",
+    expanded: true,
+    hue: 0,
+    id: crypto.randomUUID(),
+    kind: definition.kind,
+    locked: false,
+    name: getDefaultLayerName(type, existingCount),
+    opacity: 1,
+    params: buildParameterValues(definition.params),
+    runtimeError: null,
+    saturation: 1,
+    type,
+    visible: true,
+  } as EditorLayer
+}
+
+export function cloneLayer(layer: EditorLayer): EditorLayer {
+  return {
+    ...layer,
+    id: crypto.randomUUID(),
+    name: `${layer.name} Copy`,
+    params: cloneParameterValues(layer.params),
+    runtimeError: null,
+  }
+}
+
+export function clampLayerAdjustments(
+  params: Pick<EditorLayer, "hue" | "opacity" | "saturation">,
+): Pick<EditorLayer, "hue" | "opacity" | "saturation"> {
+  return {
+    hue: clamp(params.hue, -180, 180),
+    opacity: clamp(params.opacity, 0, 1),
+    saturation: clamp(params.saturation, 0, 2),
+  }
+}
+
+export function resetLayerParameters(type: LayerType): LayerParameterValues {
+  return buildParameterValues(getLayerDefinition(type).params)
+}

package/src/lib/editor/parameter-schema.ts

@@ -0,0 +1,75 @@
+import type {
+  LayerParameterValues,
+  ParameterDefinition,
+  ParameterDefinitions,
+  ParameterValue,
+} from "@/types/editor"
+
+export function cloneParameterValue(value: ParameterValue): ParameterValue {
+  if (Array.isArray(value)) {
+    return [...value] as ParameterValue
+  }
+
+  return value
+}
+
+export function cloneParameterValues(values: LayerParameterValues): LayerParameterValues {
+  const next: LayerParameterValues = {}
+
+  for (const [key, value] of Object.entries(values)) {
+    next[key] = cloneParameterValue(value)
+  }
+
+  return next
+}
+
+export function buildParameterValues(definitions: ParameterDefinitions): LayerParameterValues {
+  const values: LayerParameterValues = {}
+
+  for (const definition of definitions) {
+    values[definition.key] = cloneParameterValue(definition.defaultValue)
+  }
+
+  return values
+}
+
+export function getParameterDefinition(
+  definitions: ParameterDefinitions,
+  key: string,
+): ParameterDefinition | null {
+  return definitions.find((definition) => definition.key === key) ?? null
+}
+
+export function isParameterAnimatable(definition: ParameterDefinition): boolean {
+  if (definition.type === "text") {
+    return false
+  }
+
+  return definition.animatable ?? true
+}
+
+export function isParameterValueEqual(left: ParameterValue, right: ParameterValue): boolean {
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return (
+      left.length === right.length &&
+      left.every((entry, index) => entry === right[index])
+    )
+  }
+
+  return left === right
+}
+
+export function valueSignature(value: ParameterValue): string {
+  if (Array.isArray(value)) {
+    return `[${value.join(",")}]`
+  }
+
+  return String(value)
+}
+
+export function parameterValuesSignature(values: LayerParameterValues): string {
+  return Object.entries(values)
+    .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey))
+    .map(([key, value]) => `${key}:${valueSignature(value)}`)
+    .join("|")
+}