@basementstudio/shader-lab 0.1.0

package/src/lib/editor/timeline/evaluate.ts

@@ -0,0 +1,252 @@
+import { easings } from "@/lib/easings"
+import type {
+  AnimatedPropertyBinding,
+  EditorLayer,
+  LayerAnimatableProperty,
+  LayerParameterValues,
+  ParameterValue,
+  TimelineInterpolation,
+  TimelineTrack,
+} from "@/types/editor"
+import { cloneParameterValue } from "@/lib/editor/parameter-schema"
+
+export interface EvaluatedLayerState {
+  layerId: string
+  params: LayerParameterValues
+  properties: Partial<Record<LayerAnimatableProperty, boolean | number>>
+}
+
+type NumericTuple = [number, number] | [number, number, number]
+
+function isNumericTuple(value: ParameterValue): 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 === 3 || hex.length === 4) {
+    const first = hex[0]
+    const second = hex[1]
+    const third = hex[2]
+
+    if (!(first && second && third)) {
+      return null
+    }
+
+    const r = Number.parseInt(first + first, 16)
+    const g = Number.parseInt(second + second, 16)
+    const b = Number.parseInt(third + third, 16)
+
+    if ([r, g, b].some(Number.isNaN)) {
+      return null
+    }
+
+    return [r, g, b]
+  }
+
+  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: TimelineInterpolation): number {
+  if (interpolation === "step") {
+    return 0
+  }
+
+  if (interpolation === "smooth") {
+    return easings.easeInOutCubic(progress)
+  }
+
+  return progress
+}
+
+function interpolateValue(
+  from: ParameterValue,
+  to: ParameterValue,
+  progress: number,
+  interpolation: TimelineInterpolation,
+): ParameterValue {
+  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 ParameterValue
+  }
+
+  return eased < 0.5 ? cloneParameterValue(from) : cloneParameterValue(to)
+}
+
+function evaluateTrackAtTime(track: TimelineTrack, time: number): ParameterValue | 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: AnimatedPropertyBinding,
+  value: ParameterValue,
+): 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: EditorLayer[],
+  tracks: TimelineTrack[],
+  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()]
+}

package/src/lib/editor/view-transform.ts

@@ -0,0 +1,58 @@
+import type { Vector2 } from "@/types/editor"
+
+export const ZOOM_MIN = 0.125
+export const ZOOM_MAX = 6
+export const ZOOM_PRESET_STEPS = [0.125, 0.25, 0.5, 1, 2, 4, 6] as const
+
+export function clampZoom(zoom: number): number {
+  if (!Number.isFinite(zoom)) {
+    return 1
+  }
+
+  return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, zoom))
+}
+
+export function getNextZoomStep(currentZoom: number, direction: "in" | "out"): number {
+  const normalizedCurrent = clampZoom(currentZoom)
+
+  if (direction === "in") {
+    return (
+      ZOOM_PRESET_STEPS.find((step) => step > normalizedCurrent + 0.001) ?? ZOOM_MAX
+    )
+  }
+
+  const reversedSteps = [...ZOOM_PRESET_STEPS].reverse()
+  return reversedSteps.find((step) => step < normalizedCurrent - 0.001) ?? ZOOM_MIN
+}
+
+export function getWheelZoomFactor(deltaY: number): number {
+  return Math.exp(-deltaY * 0.0015)
+}
+
+export function applyZoomAtPoint(
+  zoom: number,
+  panOffset: Vector2,
+  pointer: Vector2,
+  nextZoomInput: number,
+): { panOffset: Vector2; zoom: number } {
+  const currentZoom = clampZoom(zoom)
+  const nextZoom = clampZoom(nextZoomInput)
+
+  if (Math.abs(nextZoom - currentZoom) < 0.0001) {
+    return {
+      panOffset,
+      zoom: currentZoom,
+    }
+  }
+
+  const contentX = (pointer.x - panOffset.x) / currentZoom
+  const contentY = (pointer.y - panOffset.y) / currentZoom
+
+  return {
+    panOffset: {
+      x: pointer.x - contentX * nextZoom,
+      y: pointer.y - contentY * nextZoom,
+    },
+    zoom: nextZoom,
+  }
+}

package/src/lib/fonts.ts

@@ -0,0 +1,28 @@
+import localFont from "next/font/local"
+
+const mono = localFont({
+  src: [
+    {
+      path: "../../public/fonts/geist/Geist-Mono.woff2",
+      weight: "400",
+      style: "normal",
+    },
+  ],
+  display: "swap",
+  variable: "--geist-mono",
+  preload: true,
+  adjustFontFallback: "Arial",
+  fallback: [
+    "ui-monospace",
+    "SFMono-Regular",
+    "Consolas",
+    "Liberation Mono",
+    "Menlo",
+    "monospace",
+  ],
+})
+
+const fonts = [mono]
+const fontsVariable = fonts.map((font) => font.variable).join(" ")
+
+export { fontsVariable }

package/src/renderer/ascii-atlas.ts

@@ -0,0 +1,83 @@
+import * as THREE from "three/webgpu"
+
+export const ASCII_CHARSETS: Record<string, string> = {
+  binary: "01",
+  blocks: " ░▒▓█",
+  dense: " .',:;!|({#@",
+  hatching: " ╱╲╳░▒",
+  light: " .:-=+*#%@",
+}
+
+export type AsciiFontWeight = "thin" | "regular" | "bold"
+export const DEFAULT_ASCII_CHARS = " .:-=+*#%@"
+
+function normalizeChars(chars: string): string {
+  return chars.length > 0 ? chars : " "
+}
+
+export function buildAsciiAtlas(
+  chars: string,
+  fontWeight: AsciiFontWeight = "regular",
+  cellPx = 16,
+): THREE.CanvasTexture {
+  const normalizedChars = normalizeChars(chars)
+  const cellSize = Math.max(4, Math.round(cellPx))
+  const fontSize = Math.max(4, Math.floor(cellSize * 0.9))
+  const canvas = document.createElement("canvas")
+  canvas.width = normalizedChars.length * cellSize
+  canvas.height = cellSize
+
+  const context = canvas.getContext("2d")
+
+  if (!context) {
+    throw new Error("Unable to create 2D context for ASCII atlas")
+  }
+
+  context.imageSmoothingEnabled = false
+  context.fillStyle = "#000"
+  context.fillRect(0, 0, canvas.width, canvas.height)
+
+  const weightMap: Record<AsciiFontWeight, string> = {
+    bold: "700",
+    regular: "400",
+    thin: "100",
+  }
+
+  context.fillStyle = "#fff"
+  context.font = `${weightMap[fontWeight]} ${fontSize}px "Geist Mono", monospace`
+  context.textAlign = "center"
+  context.textBaseline = "alphabetic"
+
+  for (const [index, char] of [...normalizedChars].entries()) {
+    const metrics = context.measureText(char)
+    const x = Math.round((index + 0.5) * cellSize)
+    const y = Math.round(
+      (cellSize + metrics.actualBoundingBoxAscent - metrics.actualBoundingBoxDescent) * 0.5,
+    )
+    context.fillText(char, x, y)
+  }
+
+  const image = context.getImageData(0, 0, canvas.width, canvas.height)
+  const { data } = image
+
+  for (let index = 0; index < data.length; index += 4) {
+    const mask = (data[index] ?? 0) > 96 ? 255 : 0
+    data[index] = mask
+    data[index + 1] = mask
+    data[index + 2] = mask
+    data[index + 3] = 255
+  }
+
+  context.putImageData(image, 0, 0)
+
+  const texture = new THREE.CanvasTexture(canvas)
+  texture.flipY = false
+  texture.generateMipmaps = false
+  texture.magFilter = THREE.NearestFilter
+  texture.minFilter = THREE.NearestFilter
+  texture.wrapS = THREE.ClampToEdgeWrapping
+  texture.wrapT = THREE.ClampToEdgeWrapping
+  texture.needsUpdate = true
+
+  return texture
+}