@basementstudio/shader-lab 0.1.0

package/src/renderer/contracts.ts

@@ -0,0 +1,161 @@
+import { getLayerDefinition } from "@/lib/editor/config/layer-registry"
+import {
+  buildParameterValues,
+  cloneParameterValues,
+} from "@/lib/editor/parameter-schema"
+import { evaluateTimelineForLayers } from "@/lib/editor/timeline/evaluate"
+import { createProjectClock } from "@/renderer/project-clock"
+import type {
+  EditorAsset,
+  EditorLayer,
+  LayerDefinition,
+  LayerParameterValues,
+  Size,
+  TimelineStateSnapshot,
+} from "@/types/editor"
+
+export interface ProjectClock {
+  delta: number
+  duration: number
+  isPlaying: boolean
+  loop: boolean
+  time: number
+}
+
+export interface RenderableLayerPass {
+  asset: EditorAsset | null
+  layer: EditorLayer
+  params: LayerParameterValues
+}
+
+export interface RendererFrame {
+  clock: ProjectClock
+  layers: RenderableLayerPass[]
+  logicalSize: Size
+  outputSize: Size
+  pixelRatio: number
+  viewportSize: Size
+}
+
+export interface EditorRenderer {
+  dispose(): void
+  initialize(): Promise<void>
+  render(frame: RendererFrame): void
+  resize(size: Size, pixelRatio: number): void
+}
+
+type BuildRendererFrameInput = {
+  assets: EditorAsset[]
+  clockTime?: number
+  delta: number
+  layers: EditorLayer[]
+  logicalSize?: Size
+  outputSize: Size
+  pixelRatio: number
+  startupPreviewDismissed?: boolean
+  timeline: TimelineStateSnapshot
+  viewportSize: Size
+}
+
+const STARTUP_PREVIEW_TEXT_LAYER_ID = "__startup-preview-text__"
+const STARTUP_PREVIEW_INK_LAYER_ID = "__startup-preview-ink__"
+
+function buildStartupPreviewLayer(
+  definition: LayerDefinition,
+  id: string
+): EditorLayer {
+  return {
+    assetId: null,
+    blendMode: "normal",
+    compositeMode: "filter",
+    expanded: true,
+    hue: 0,
+    id,
+    kind: definition.kind,
+    locked: false,
+    name: definition.defaultName,
+    opacity: 1,
+    params: buildParameterValues(definition.params),
+    runtimeError: null,
+    saturation: 1,
+    type: definition.type,
+    visible: true,
+  } as EditorLayer
+}
+
+function getStartupPreviewLayers(): EditorLayer[] {
+  return [
+    buildStartupPreviewLayer(
+      getLayerDefinition("ink"),
+      STARTUP_PREVIEW_INK_LAYER_ID
+    ),
+    buildStartupPreviewLayer(
+      getLayerDefinition("text"),
+      STARTUP_PREVIEW_TEXT_LAYER_ID
+    ),
+  ]
+}
+
+export function buildRendererFrame(
+  input: BuildRendererFrameInput
+): RendererFrame {
+  const hasVisibleRealLayers = input.layers.some((layer) => layer.visible)
+  const sourceLayers =
+    !hasVisibleRealLayers && input.startupPreviewDismissed !== true
+      ? getStartupPreviewLayers()
+      : input.layers
+  const assetById = new Map(input.assets.map((asset) => [asset.id, asset]))
+  const evaluatedLayers = evaluateTimelineForLayers(
+    sourceLayers,
+    input.timeline.tracks,
+    input.timeline.currentTime
+  )
+  const evaluatedById = new Map(
+    evaluatedLayers.map((state) => [state.layerId, state])
+  )
+
+  const layers = sourceLayers
+    .filter((layer) => layer.visible)
+    .map((layer) => {
+      const evaluation = evaluatedById.get(layer.id)
+      const params = cloneParameterValues(layer.params)
+
+      if (evaluation) {
+        Object.assign(params, evaluation.params)
+      }
+
+      return {
+        asset: layer.assetId ? (assetById.get(layer.assetId) ?? null) : null,
+        layer: {
+          ...layer,
+          hue:
+            typeof evaluation?.properties.hue === "number"
+              ? evaluation.properties.hue
+              : layer.hue,
+          opacity:
+            typeof evaluation?.properties.opacity === "number"
+              ? evaluation.properties.opacity
+              : layer.opacity,
+          saturation:
+            typeof evaluation?.properties.saturation === "number"
+              ? evaluation.properties.saturation
+              : layer.saturation,
+          visible:
+            typeof evaluation?.properties.visible === "boolean"
+              ? evaluation.properties.visible
+              : layer.visible,
+        },
+        params,
+      }
+    })
+    .filter((entry) => entry.layer.visible)
+
+  return {
+    clock: createProjectClock(input.timeline, input.delta, input.clockTime),
+    layers,
+    logicalSize: input.logicalSize ?? input.viewportSize,
+    outputSize: input.outputSize,
+    pixelRatio: input.pixelRatio,
+    viewportSize: input.viewportSize,
+  }
+}

package/src/renderer/create-webgpu-renderer.ts

@@ -0,0 +1,48 @@
+import * as THREE from "three/webgpu"
+import { PipelineManager } from "@/renderer/pipeline-manager"
+import type { EditorRenderer, RendererFrame } from "@/renderer/contracts"
+import type { Size } from "@/types/editor"
+
+export function browserSupportsWebGPU(): boolean {
+  return typeof navigator !== "undefined" && "gpu" in navigator
+}
+
+export async function createWebGPURenderer(
+  canvas: HTMLCanvasElement,
+): Promise<EditorRenderer> {
+  const renderer = new THREE.WebGPURenderer({
+    alpha: false,
+    antialias: true,
+    canvas,
+  })
+  let pipeline: PipelineManager | null = null
+
+  return {
+    async initialize() {
+      await renderer.init()
+      renderer.setClearColor("#0a0d10", 1)
+    },
+
+    resize(size: Size, pixelRatio: number) {
+      renderer.setPixelRatio(pixelRatio)
+      renderer.setSize(size.width, size.height, false)
+      pipeline?.resize(size)
+    },
+
+    render(frame: RendererFrame) {
+      if (!pipeline) {
+        pipeline = new PipelineManager(renderer, frame.viewportSize)
+      }
+
+      pipeline.updateLogicalSize(frame.logicalSize)
+      pipeline.syncLayers([...frame.layers].reverse())
+      pipeline.render(frame.clock.time, frame.clock.delta)
+    },
+
+    dispose() {
+      renderer.setAnimationLoop(null)
+      pipeline?.dispose()
+      renderer.dispose()
+    },
+  }
+}