@basementstudio/shader-lab 0.1.0 → 1.0.2

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

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

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

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

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