@plasius/gpu-renderer 0.2.44 → 0.2.46

package/dist/index.js

@@ -1,1861 +1,2536 @@
-// src/animated-scene-renderer.js
-import { resolveCameraRigFrame } from "@plasius/gpu-camera";
+// src/renderer-constants.js
+var DEFAULT_CLEAR_COLOR = Object.freeze([0.07, 0.11, 0.18, 1]);
+var DEFAULT_CANVAS_SELECTOR = "canvas[data-plasius-gpu-renderer]";
+var rendererDebugOwner = "renderer";
+var rendererWorkerQueueClass = "render";
+var defaultRendererWorkerProfile = "realtime";
+var rendererRepresentationBands = Object.freeze([
+  "near",
+  "mid",
+  "far",
+  "horizon"
+]);
+var rendererAccelerationStructureUpdateClasses = Object.freeze([
+  "static",
+  "rigid-dynamic",
+  "deforming",
+  "proxy"
+]);
+var rendererRayTracingStageOrder = Object.freeze([
+  "primaryVisibility",
+  "shadowAssist",
+  "opaqueFoundation",
+  "rtDirectLighting",
+  "rtReflections",
+  "rtGlobalIllumination",
+  "denoiseTemporal",
+  "transparents",
+  "composition",
+  "present"
+]);
+var rendererWavefrontBufferSchemaVersion = 1;
+var rendererWavefrontQueuePairStrategy = "ping-pong-active-next";
+var rendererWavefrontHitTypes = Object.freeze([
+  "surface",
+  "emissive",
+  "environment",
+  "transparent",
+  "miss"
+]);
+var rendererWavefrontPassOrder = Object.freeze([
+  "generatePrimaryRays",
+  "intersectActiveQueue",
+  "resolveSurfaceRecords",
+  "accumulateTerminalRadiance",
+  "scatterContinuations",
+  "compactAndSwapQueues"
+]);
 
-// src/animated-gltf-model.js
-var GLB_MAGIC = 1179937895;
-var GLB_VERSION = 2;
-var GLB_JSON_CHUNK = 1313821514;
-var GLB_BIN_CHUNK = 5130562;
-var COMPONENT_READERS = Object.freeze({
-  5120: { size: 1, read: (view, offset) => view.getInt8(offset), normalizedDivisor: 127 },
-  5121: { size: 1, read: (view, offset) => view.getUint8(offset), normalizedDivisor: 255 },
-  5122: { size: 2, read: (view, offset) => view.getInt16(offset, true), normalizedDivisor: 32767 },
-  5123: { size: 2, read: (view, offset) => view.getUint16(offset, true), normalizedDivisor: 65535 },
-  5125: { size: 4, read: (view, offset) => view.getUint32(offset, true), normalizedDivisor: 4294967295 },
-  5126: { size: 4, read: (view, offset) => view.getFloat32(offset, true), normalizedDivisor: 1 }
-});
-var ACCESSOR_COMPONENTS = Object.freeze({
-  SCALAR: 1,
-  VEC2: 2,
-  VEC3: 3,
-  VEC4: 4,
-  MAT4: 16
-});
-function identityMatrix() {
-  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-}
-function multiplyMatrix(a, b) {
-  const out = new Array(16).fill(0);
-  for (let column = 0; column < 4; column += 1) {
-    for (let row = 0; row < 4; row += 1) {
-      out[column * 4 + row] = a[0 * 4 + row] * b[column * 4 + 0] + a[1 * 4 + row] * b[column * 4 + 1] + a[2 * 4 + row] * b[column * 4 + 2] + a[3 * 4 + row] * b[column * 4 + 3];
-    }
+// src/renderer-validation.js
+function readPositiveNumber(name, value) {
+  if (value === void 0) {
+    return void 0;
   }
-  return out;
-}
-function transformPoint(matrix, point) {
-  const [x, y, z] = point;
-  return [
-    matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12],
-    matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13],
-    matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14]
-  ];
+  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+    throw new Error(`${name} must be a finite number greater than zero.`);
+  }
+  return value;
 }
-function composeMatrix(translation = [0, 0, 0], rotation = [0, 0, 0, 1], scale2 = [1, 1, 1]) {
-  const [x, y, z, w] = normalizeQuaternion(rotation);
-  const [sx, sy, sz] = scale2;
-  const x2 = x + x;
-  const y2 = y + y;
-  const z2 = z + z;
-  const xx = x * x2;
-  const xy = x * y2;
-  const xz = x * z2;
-  const yy = y * y2;
-  const yz = y * z2;
-  const zz = z * z2;
-  const wx = w * x2;
-  const wy = w * y2;
-  const wz = w * z2;
-  return [
-    (1 - (yy + zz)) * sx,
-    (xy + wz) * sx,
-    (xz - wy) * sx,
-    0,
-    (xy - wz) * sy,
-    (1 - (xx + zz)) * sy,
-    (yz + wx) * sy,
-    0,
-    (xz + wy) * sz,
-    (yz - wx) * sz,
-    (1 - (xx + yy)) * sz,
-    0,
-    translation[0] ?? 0,
-    translation[1] ?? 0,
-    translation[2] ?? 0,
-    1
-  ];
+function readPositiveInteger(name, value) {
+  if (!Number.isInteger(value) || value <= 0) {
+    throw new Error(`${name} must be a positive integer.`);
+  }
+  return value;
 }
-function normalizeQuaternion(quaternion = [0, 0, 0, 1]) {
-  const length = Math.hypot(quaternion[0] ?? 0, quaternion[1] ?? 0, quaternion[2] ?? 0, quaternion[3] ?? 1) || 1;
-  return [
-    (quaternion[0] ?? 0) / length,
-    (quaternion[1] ?? 0) / length,
-    (quaternion[2] ?? 0) / length,
-    (quaternion[3] ?? 1) / length
-  ];
+function readNonNegativeInteger(name, value) {
+  if (!Number.isInteger(value) || value < 0) {
+    throw new Error(`${name} must be a non-negative integer.`);
+  }
+  return value;
 }
-function lerp(a, b, t) {
-  return a + (b - a) * t;
+function assertRendererIdentifier(name, value) {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    throw new Error(`${name} must be a non-empty string.`);
+  }
+  return value.trim();
 }
-function lerpArray(a, b, t) {
-  return a.map((value, index) => lerp(value, b[index] ?? value, t));
+
+// src/renderer-webgpu-runtime.js
+function clamp01(value) {
+  return Math.min(1, Math.max(0, value));
 }
-function nlerpQuaternion(a, b, t) {
-  let end = b;
-  const dot2 = a.reduce((total, value, index) => total + value * (b[index] ?? 0), 0);
-  if (dot2 < 0) {
-    end = b.map((value) => -value);
-  }
-  return normalizeQuaternion(lerpArray(a, end, t));
+function parseHexChannel(channel) {
+  return parseInt(channel, 16) / 255;
 }
-function parseGlb(buffer) {
-  if (!(buffer instanceof ArrayBuffer)) {
-    return null;
-  }
-  const view = new DataView(buffer);
-  if (view.byteLength < 20 || view.getUint32(0, true) !== GLB_MAGIC || view.getUint32(4, true) !== GLB_VERSION) {
-    return null;
+function normalizeColor(value) {
+  if (Array.isArray(value)) {
+    const [r = 0, g = 0, b = 0, a = 1] = value;
+    return [clamp01(Number(r) || 0), clamp01(Number(g) || 0), clamp01(Number(b) || 0), clamp01(Number(a) || 0)];
   }
-  let offset = 12;
-  let json = null;
-  let binary = null;
-  while (offset + 8 <= view.byteLength) {
-    const length = view.getUint32(offset, true);
-    const type = view.getUint32(offset + 4, true);
-    const start = offset + 8;
-    const end = start + length;
-    if (end > view.byteLength) {
-      return null;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
+      const r = trimmed[1];
+      const g = trimmed[2];
+      const b = trimmed[3];
+      return [
+        parseHexChannel(r + r),
+        parseHexChannel(g + g),
+        parseHexChannel(b + b),
+        1
+      ];
     }
-    if (type === GLB_JSON_CHUNK) {
-      const text = new TextDecoder().decode(new Uint8Array(buffer, start, length)).trim();
-      json = JSON.parse(text);
-    } else if (type === GLB_BIN_CHUNK) {
-      binary = new Uint8Array(buffer, start, length);
+    if (/^#[0-9a-f]{6}$/i.test(trimmed)) {
+      return [
+        parseHexChannel(trimmed.slice(1, 3)),
+        parseHexChannel(trimmed.slice(3, 5)),
+        parseHexChannel(trimmed.slice(5, 7)),
+        1
+      ];
     }
-    offset = end;
-  }
-  if (!json || !binary) {
-    return null;
   }
-  return { json, binary };
+  return [...DEFAULT_CLEAR_COLOR];
 }
-function readAccessor(document, accessorIndex) {
-  const accessor = document.json.accessors?.[accessorIndex];
-  if (!accessor) {
-    return [];
-  }
-  const bufferView = document.json.bufferViews?.[accessor.bufferView];
-  const component = COMPONENT_READERS[accessor.componentType];
-  const componentCount = ACCESSOR_COMPONENTS[accessor.type] ?? 1;
-  if (!bufferView || !component) {
-    return [];
-  }
-  const view = new DataView(
-    document.binary.buffer,
-    document.binary.byteOffset + (bufferView.byteOffset ?? 0) + (accessor.byteOffset ?? 0),
-    bufferView.byteLength ?? 0
-  );
-  const stride = bufferView.byteStride ?? component.size * componentCount;
-  const values = [];
-  for (let index = 0; index < accessor.count; index += 1) {
-    const item = [];
-    const baseOffset = index * stride;
-    for (let componentIndex = 0; componentIndex < componentCount; componentIndex += 1) {
-      const raw = component.read(view, baseOffset + componentIndex * component.size);
-      item.push(accessor.normalized && accessor.componentType !== 5126 ? raw / component.normalizedDivisor : raw);
-    }
-    values.push(componentCount === 1 ? item[0] : item);
+function now() {
+  if (typeof performance !== "undefined" && typeof performance.now === "function") {
+    return performance.now();
   }
-  return values;
+  return Date.now();
 }
-function readMatrices(document, accessorIndex) {
-  return readAccessor(document, accessorIndex).map((matrix) => Array.from(matrix));
+function normalizeFrameId(value) {
+  if (typeof value !== "string" || value.trim().length === 0) {
+    throw new Error("frameIdFactory must return a non-empty string.");
+  }
+  return value.trim();
 }
-function textureImage(document, textureIndex) {
-  if (typeof textureIndex !== "number") {
-    return null;
+function resolveTargetFrameTimeMs(options, event) {
+  const {
+    targetFrameTimeMs: fixedTargetFrameTimeMs,
+    targetFrameRate,
+    getTargetFrameTimeMs
+  } = options;
+  if (typeof getTargetFrameTimeMs === "function") {
+    const resolved = getTargetFrameTimeMs(event);
+    return readPositiveNumber("getTargetFrameTimeMs()", resolved);
   }
-  const texture = document.json.textures?.[textureIndex];
-  return typeof texture?.source === "number" ? document.json.images?.[texture.source] ?? null : null;
-}
-function imageHasBuffer(document, image) {
-  if (!image) {
-    return false;
+  if (fixedTargetFrameTimeMs !== void 0) {
+    return fixedTargetFrameTimeMs;
   }
-  if (typeof image.uri === "string" && image.uri.trim().length > 0) {
-    return true;
+  if (targetFrameRate !== void 0) {
+    return 1e3 / targetFrameRate;
   }
-  return typeof image.bufferView === "number" && Boolean(document.json.bufferViews?.[image.bufferView]);
+  return void 0;
 }
-function extractMaterialTextureMetadata(document, primitive) {
-  const material = document.json.materials?.[primitive?.material];
-  const baseColorTextureIndex = material?.pbrMetallicRoughness?.baseColorTexture?.index;
-  const normalTextureIndex = material?.normalTexture?.index;
-  const missingTextureReferences = [];
-  if (typeof baseColorTextureIndex === "number" && !imageHasBuffer(document, textureImage(document, baseColorTextureIndex))) {
-    missingTextureReferences.push("baseColorTexture");
+function createRendererDebugHooks(options = {}) {
+  const {
+    debugSession,
+    targetFrameTimeMs,
+    targetFrameRate,
+    getTargetFrameTimeMs,
+    onFrameStart,
+    onFrameComplete
+  } = options;
+  if (!debugSession || typeof debugSession.recordFrame !== "function") {
+    throw new Error(
+      "debugSession must expose recordFrame(sample). Use @plasius/gpu-debug createGpuDebugSession()."
+    );
   }
-  if (typeof normalTextureIndex === "number" && !imageHasBuffer(document, textureImage(document, normalTextureIndex))) {
-    missingTextureReferences.push("normalTexture");
+  const fixedTargetFrameTimeMs = readPositiveNumber(
+    "targetFrameTimeMs",
+    targetFrameTimeMs
+  );
+  const fixedTargetFrameRate = readPositiveNumber(
+    "targetFrameRate",
+    targetFrameRate
+  );
+  if (fixedTargetFrameTimeMs !== void 0 && fixedTargetFrameRate !== void 0) {
+    throw new Error(
+      "Provide either targetFrameTimeMs or targetFrameRate, not both."
+    );
   }
-  return Object.freeze({
-    materialCount: document.json.materials?.length ?? 0,
-    textureCount: document.json.textures?.length ?? 0,
-    imageCount: document.json.images?.length ?? 0,
-    embeddedImageCount: (document.json.images ?? []).filter((image) => typeof image.bufferView === "number").length,
-    baseColorTextureCount: typeof baseColorTextureIndex === "number" ? 1 : 0,
-    normalTextureCount: typeof normalTextureIndex === "number" ? 1 : 0,
-    hasBaseColorTexture: typeof baseColorTextureIndex === "number",
-    hasNormalTexture: typeof normalTextureIndex === "number",
-    missingTextureReferences: Object.freeze(missingTextureReferences),
-    materialName: material?.name ?? ""
-  });
+  if (getTargetFrameTimeMs !== void 0 && typeof getTargetFrameTimeMs !== "function") {
+    throw new Error("getTargetFrameTimeMs must be a function when provided.");
+  }
+  const resolvedOptions = {
+    targetFrameTimeMs: fixedTargetFrameTimeMs,
+    targetFrameRate: fixedTargetFrameRate,
+    getTargetFrameTimeMs
+  };
+  return {
+    onFrameStart(event) {
+      if (typeof onFrameStart === "function") {
+        onFrameStart({
+          ...event,
+          owner: rendererDebugOwner
+        });
+      }
+    },
+    onFrameComplete(event) {
+      const resolvedTargetFrameTimeMs = resolveTargetFrameTimeMs(
+        resolvedOptions,
+        event
+      );
+      if (typeof event.frameTimeMs === "number" && Number.isFinite(event.frameTimeMs) && event.frameTimeMs > 0) {
+        debugSession.recordFrame({
+          frameId: event.frameId,
+          frameTimeMs: event.frameTimeMs,
+          targetFrameTimeMs: resolvedTargetFrameTimeMs
+        });
+      }
+      if (typeof onFrameComplete === "function") {
+        onFrameComplete({
+          ...event,
+          owner: rendererDebugOwner,
+          targetFrameTimeMs: resolvedTargetFrameTimeMs
+        });
+      }
+    }
+  };
 }
-function nodeLocalMatrix(node, override = {}) {
-  if (node.matrix && !override.translation && !override.rotation && !override.scale) {
-    return [...node.matrix];
+function readNavigator(navigatorOverride) {
+  const currentNavigator = navigatorOverride ?? globalThis.navigator;
+  if (!currentNavigator || typeof currentNavigator !== "object") {
+    throw new Error("Navigator unavailable. Provide a browser-like navigator object.");
   }
-  return composeMatrix(
-    override.translation ?? node.translation ?? [0, 0, 0],
-    override.rotation ?? node.rotation ?? [0, 0, 0, 1],
-    override.scale ?? node.scale ?? [1, 1, 1]
-  );
+  return currentNavigator;
 }
-function computeWorldMatrices(nodes, overridesByName = /* @__PURE__ */ new Map()) {
-  const parents = /* @__PURE__ */ new Set();
-  for (const node of nodes) {
-    for (const child of node.children ?? []) {
-      parents.add(child);
-    }
+function readDocument(documentOverride) {
+  const doc = documentOverride ?? globalThis.document;
+  if (!doc || typeof doc !== "object") {
+    throw new Error("Document unavailable. Provide a browser-like document object.");
   }
-  const roots = nodes.map((_, index) => index).filter((index) => !parents.has(index));
-  const worldMatrices = nodes.map(() => identityMatrix());
-  function visit(nodeIndex, parentMatrix) {
-    const node = nodes[nodeIndex];
-    if (!node) {
-      return;
-    }
-    const worldMatrix = multiplyMatrix(parentMatrix, nodeLocalMatrix(node, overridesByName.get(node.name) ?? {}));
-    worldMatrices[nodeIndex] = worldMatrix;
-    for (const child of node.children ?? []) {
-      visit(child, worldMatrix);
-    }
+  return doc;
+}
+function resolveCanvas(canvasOrSelector, documentOverride) {
+  if (canvasOrSelector && typeof canvasOrSelector === "object") {
+    return canvasOrSelector;
   }
-  for (const root of roots) {
-    visit(root, identityMatrix());
+  const doc = readDocument(documentOverride);
+  const selector = typeof canvasOrSelector === "string" && canvasOrSelector.trim().length > 0 ? canvasOrSelector : DEFAULT_CANVAS_SELECTOR;
+  const resolved = doc.querySelector(selector);
+  if (!resolved) {
+    throw new Error(`Unable to find canvas for selector "${selector}".`);
   }
-  return worldMatrices;
+  return resolved;
 }
-function normalizeWeights(weights) {
-  const total = weights.reduce((sum, value) => sum + Math.max(0, value), 0);
-  if (total <= 0) {
-    return [1, 0, 0, 0];
+function readGpu(navigatorOverride) {
+  const currentNavigator = readNavigator(navigatorOverride);
+  const gpu = currentNavigator.gpu;
+  if (!gpu || typeof gpu.requestAdapter !== "function") {
+    throw new Error("WebGPU runtime unavailable. navigator.gpu is missing.");
   }
-  return weights.map((value) => Math.max(0, value) / total);
+  return gpu;
 }
-function deriveBounds(vertices) {
-  const min = [Infinity, Infinity, Infinity];
-  const max = [-Infinity, -Infinity, -Infinity];
-  for (const vertex of vertices) {
-    for (let axis = 0; axis < 3; axis += 1) {
-      min[axis] = Math.min(min[axis], vertex[axis]);
-      max[axis] = Math.max(max[axis], vertex[axis]);
-    }
-  }
-  if (!Number.isFinite(min[0])) {
-    return { min: [0, 0, 0], max: [0, 1, 0], size: [1, 1, 1] };
+function configureContext(context, device, format, alphaMode) {
+  if (typeof context.configure !== "function") {
+    throw new Error("Canvas WebGPU context does not support configure().");
   }
+  context.configure({
+    device,
+    format,
+    alphaMode
+  });
+}
+function createRenderPassDescriptor(view, clearColor) {
   return {
-    min,
-    max,
-    size: [max[0] - min[0], max[1] - min[1], max[2] - min[2]]
+    colorAttachments: [
+      {
+        view,
+        loadOp: "clear",
+        clearValue: {
+          r: clearColor[0],
+          g: clearColor[1],
+          b: clearColor[2],
+          a: clearColor[3]
+        },
+        storeOp: "store"
+      }
+    ]
   };
 }
-function sampleChannel(channel, sampler, document, timeSeconds) {
-  const input = readAccessor(document, sampler.input);
-  const output = readAccessor(document, sampler.output);
-  if (!input.length || !output.length) {
-    return null;
-  }
-  const duration = input.at(-1) || 0;
-  const sampleTime = duration > 0 ? timeSeconds % duration : 0;
-  let frame = 0;
-  while (frame < input.length - 2 && sampleTime > input[frame + 1]) {
-    frame += 1;
+function supportsWebGpu(options = {}) {
+  try {
+    const gpu = readGpu(options.navigator);
+    return Boolean(gpu);
+  } catch {
+    return false;
   }
-  const start = input[frame] ?? 0;
-  const end = input[frame + 1] ?? start;
-  const t = end > start ? (sampleTime - start) / (end - start) : 0;
-  const startValue = Array.isArray(output[frame]) ? output[frame] : [output[frame] ?? 0];
-  const endValue = Array.isArray(output[frame + 1]) ? output[frame + 1] : startValue;
-  return channel.target.path === "rotation" ? nlerpQuaternion(startValue, endValue, t) : lerpArray(startValue, endValue, t);
 }
-function rootTranslationDistance(clipPayload) {
-  if (!clipPayload) {
-    return 0;
+async function createGpuRenderer(options = {}) {
+  const {
+    canvas,
+    navigator: navigatorOverride,
+    document: documentOverride,
+    powerPreference = "high-performance",
+    alpha = true,
+    format,
+    clearColor = DEFAULT_CLEAR_COLOR,
+    requestAnimationFrame = globalThis.requestAnimationFrame?.bind(globalThis),
+    cancelAnimationFrame = globalThis.cancelAnimationFrame?.bind(globalThis),
+    frameIdFactory,
+    onFrameStart,
+    encodeFrame,
+    onBeforeEncode,
+    onAfterSubmit,
+    onFrameComplete
+  } = options;
+  const gpu = readGpu(navigatorOverride);
+  const adapter = await gpu.requestAdapter({ powerPreference });
+  if (!adapter) {
+    throw new Error("Unable to obtain GPU adapter.");
   }
-  let distance = 0;
-  for (const channel of clipPayload.animation.channels ?? []) {
-    if (channel.target?.path !== "translation") {
-      continue;
+  const device = await adapter.requestDevice();
+  const targetCanvas = resolveCanvas(canvas, documentOverride);
+  const context = targetCanvas.getContext?.("webgpu");
+  if (!context) {
+    throw new Error("Unable to obtain WebGPU canvas context.");
+  }
+  const resolvedFormat = format || (typeof gpu.getPreferredCanvasFormat === "function" ? gpu.getPreferredCanvasFormat() : "bgra8unorm");
+  configureContext(context, device, resolvedFormat, alpha ? "premultiplied" : "opaque");
+  let running = false;
+  let destroyed = false;
+  let frame = 0;
+  let lastTimestamp = 0;
+  let rafId = null;
+  let clear = normalizeColor(clearColor);
+  let xrActive = false;
+  let detachXrBinding = null;
+  const renderOnce = (timestamp = now()) => {
+    if (destroyed) {
+      throw new Error("Renderer was destroyed.");
     }
-    const nodeName = clipPayload.document.json.nodes?.[channel.target.node]?.name ?? "";
-    if (!/(^|:)Hips$/u.test(nodeName) && nodeName !== "mixamorigHips") {
-      continue;
+    const frameNumber = frame + 1;
+    const frameId = normalizeFrameId(
+      typeof frameIdFactory === "function" ? frameIdFactory({
+        frame: frameNumber,
+        timestamp,
+        canvas: targetCanvas,
+        xrActive
+      }) : `renderer.frame.${frameNumber}`
+    );
+    const frameTimeMs = lastTimestamp > 0 ? Math.max(0, timestamp - lastTimestamp) : void 0;
+    if (typeof onFrameStart === "function") {
+      onFrameStart({
+        frame: frameNumber,
+        frameId,
+        frameTimeMs,
+        timestamp,
+        device,
+        context,
+        canvas: targetCanvas,
+        xrActive
+      });
     }
-    const sampler = clipPayload.animation.samplers?.[channel.sampler];
-    const output = sampler ? readAccessor(clipPayload.document, sampler.output) : [];
-    if (output.length < 2) {
-      continue;
+    const texture = context.getCurrentTexture?.();
+    if (!texture || typeof texture.createView !== "function") {
+      throw new Error("WebGPU context returned an invalid current texture.");
     }
-    const start = Array.isArray(output[0]) ? output[0] : [0, 0, 0];
-    const end = Array.isArray(output.at(-1)) ? output.at(-1) : start;
-    distance = Math.max(distance, Math.hypot((end[0] ?? 0) - (start[0] ?? 0), (end[2] ?? 0) - (start[2] ?? 0)));
-  }
-  return distance;
-}
-function createClipPayload(clipRef) {
-  const document = parseGlb(clipRef?.asset);
-  const animation = document?.json.animations?.[0];
-  if (!document || !animation) {
-    return null;
-  }
-  const nodeNames = /* @__PURE__ */ new Set();
-  let durationSeconds = 0;
-  for (const channel of animation.channels ?? []) {
-    const nodeName = document.json.nodes?.[channel.target?.node]?.name;
-    if (nodeName) {
-      nodeNames.add(nodeName);
+    const encoder = device.createCommandEncoder({
+      label: `plasius.gpu-renderer.frame.${frame}`
+    });
+    const view = texture.createView();
+    if (typeof encodeFrame === "function") {
+      encodeFrame({ device, context, encoder, view, canvas: targetCanvas, timestamp });
+    } else {
+      const pass = encoder.beginRenderPass(createRenderPassDescriptor(view, clear));
+      if (typeof onBeforeEncode === "function") {
+        onBeforeEncode({
+          frame,
+          frameNumber,
+          frameId,
+          frameTimeMs,
+          timestamp,
+          device,
+          context,
+          encoder,
+          pass,
+          canvas: targetCanvas,
+          xrActive
+        });
+      }
+      if (typeof pass.end === "function") {
+        pass.end();
+      }
     }
-    const sampler = animation.samplers?.[channel.sampler];
-    const input = sampler ? readAccessor(document, sampler.input) : [];
-    durationSeconds = Math.max(durationSeconds, input.at(-1) ?? 0);
-  }
-  return {
-    id: clipRef.id,
-    document,
-    animation,
-    durationSeconds,
-    nodeNames
+    const commandBuffer = encoder.finish();
+    device.queue.submit([commandBuffer]);
+    frame = frameNumber;
+    lastTimestamp = timestamp;
+    if (typeof onAfterSubmit === "function") {
+      onAfterSubmit({
+        frame: frameNumber,
+        frameNumber,
+        frameId,
+        frameTimeMs,
+        timestamp,
+        device,
+        context,
+        canvas: targetCanvas,
+        xrActive
+      });
+    }
+    if (typeof onFrameComplete === "function") {
+      onFrameComplete({
+        frame: frameNumber,
+        frameId,
+        frameTimeMs,
+        timestamp,
+        device,
+        context,
+        canvas: targetCanvas,
+        xrActive
+      });
+    }
+    return {
+      frame: frameNumber,
+      frameId,
+      frameTimeMs,
+      timestamp
+    };
   };
-}
-function sampleClipOverrides(clipPayload, timeSeconds) {
-  const overrides = /* @__PURE__ */ new Map();
-  if (!clipPayload) {
-    return overrides;
-  }
-  for (const channel of clipPayload.animation.channels ?? []) {
-    const targetNode = clipPayload.document.json.nodes?.[channel.target?.node];
-    const sampler = clipPayload.animation.samplers?.[channel.sampler];
-    if (!targetNode?.name || !sampler) {
-      continue;
+  const tick = (timestamp) => {
+    if (!running || destroyed) {
+      return;
     }
-    const value = sampleChannel(channel, sampler, clipPayload.document, timeSeconds);
-    if (!value) {
-      continue;
+    renderOnce(timestamp);
+    if (typeof requestAnimationFrame === "function") {
+      rafId = requestAnimationFrame(tick);
     }
-    const existing = overrides.get(targetNode.name) ?? {};
-    overrides.set(targetNode.name, {
-      ...existing,
-      [channel.target.path]: value
-    });
-  }
-  return overrides;
-}
-function createAnimatedGltfModel(modelAsset, clipRefs = []) {
-  const document = parseGlb(modelAsset);
-  if (!document) {
-    return null;
-  }
-  const nodes = document.json.nodes ?? [];
-  const meshNodeIndex = nodes.findIndex((node) => node.mesh !== void 0 && node.skin !== void 0);
-  const meshNode = nodes[meshNodeIndex];
-  const mesh = document.json.meshes?.[meshNode?.mesh];
-  const primitive = mesh?.primitives?.find((candidate) => candidate.attributes?.POSITION !== void 0);
-  const skin = document.json.skins?.[meshNode?.skin];
-  if (!meshNode || !primitive || !skin) {
-    return null;
-  }
-  const positions = readAccessor(document, primitive.attributes.POSITION);
-  const normals = primitive.attributes.NORMAL === void 0 ? [] : readAccessor(document, primitive.attributes.NORMAL);
-  const texcoords = primitive.attributes.TEXCOORD_0 === void 0 ? [] : readAccessor(document, primitive.attributes.TEXCOORD_0);
-  const joints = primitive.attributes.JOINTS_0 === void 0 ? positions.map(() => [0, 0, 0, 0]) : readAccessor(document, primitive.attributes.JOINTS_0);
-  const weights = primitive.attributes.WEIGHTS_0 === void 0 ? positions.map(() => [1, 0, 0, 0]) : readAccessor(document, primitive.attributes.WEIGHTS_0).map(normalizeWeights);
-  const indices = primitive.indices === void 0 ? positions.map((_, index) => index) : readAccessor(document, primitive.indices);
-  const inverseBindMatrices = skin.inverseBindMatrices === void 0 ? skin.joints.map(() => identityMatrix()) : readMatrices(document, skin.inverseBindMatrices);
-  const clips = clipRefs.map(createClipPayload).filter(Boolean);
-  const bindWorldMatrices = computeWorldMatrices(nodes);
-  const bindVertices = skinVertices({
-    positions,
-    joints,
-    weights,
-    skin,
-    inverseBindMatrices,
-    worldMatrices: bindWorldMatrices
-  });
-  const bounds = deriveBounds(bindVertices);
-  const materialTextureMetadata = extractMaterialTextureMetadata(document, primitive);
-  const clipRootMotionDistances = new Map(clips.map((clip) => [clip.id, rootTranslationDistance(clip)]));
-  return {
-    name: mesh.name ?? meshNode.name ?? "skinned-gltf-model",
-    vertexCount: positions.length,
-    triangleCount: Math.floor(indices.length / 3),
-    jointCount: skin.joints.length,
-    animatedNodeCount: new Set(clips.flatMap((clip) => [...clip.nodeNames])).size,
-    clipCount: clips.length,
-    materialTextureMetadata,
-    textureCount: materialTextureMetadata.textureCount,
-    materialCount: materialTextureMetadata.materialCount,
-    hasBaseColorTexture: materialTextureMetadata.hasBaseColorTexture,
-    hasNormalTexture: materialTextureMetadata.hasNormalTexture,
-    hasUv: texcoords.length === positions.length,
-    hasNormals: normals.length === positions.length,
-    professionalRenderable: materialTextureMetadata.hasBaseColorTexture && materialTextureMetadata.hasNormalTexture && materialTextureMetadata.missingTextureReferences.length === 0 && texcoords.length === positions.length && normals.length === positions.length && skin.joints.length > 0,
-    clips,
-    sample(activeClipId, clipTimeMs) {
-      const clip = clips.find((candidate) => candidate.id === activeClipId) ?? clips[0] ?? null;
-      const overrides = sampleClipOverrides(clip, Math.max(0, clipTimeMs) / 1e3);
-      const worldMatrices = computeWorldMatrices(nodes, overrides);
-      const vertices = skinVertices({
-        positions,
-        joints,
-        weights,
-        skin,
-        inverseBindMatrices,
-        worldMatrices
-      });
-      return {
-        vertices,
-        indices,
-        bounds: deriveBounds(vertices),
-        bindBounds: bounds,
-        activeClipRenderable: Boolean(clip),
-        activeClipDurationSeconds: clip?.durationSeconds ?? 0,
-        activeClipRootTranslationDistance: clipRootMotionDistances.get(clip?.id) ?? 0
-      };
+  };
+  const start = () => {
+    if (destroyed) {
+      throw new Error("Renderer was destroyed.");
+    }
+    if (running) {
+      return false;
+    }
+    running = true;
+    if (typeof requestAnimationFrame === "function") {
+      rafId = requestAnimationFrame(tick);
+    } else {
+      renderOnce();
     }
+    return true;
   };
-}
-function skinVertices({ positions, joints, weights, skin, inverseBindMatrices, worldMatrices }) {
-  return positions.map((position, vertexIndex) => {
-    const jointIndices = joints[vertexIndex] ?? [0, 0, 0, 0];
-    const jointWeights = weights[vertexIndex] ?? [1, 0, 0, 0];
-    const skinned = [0, 0, 0];
-    for (let influence = 0; influence < 4; influence += 1) {
-      const weight = jointWeights[influence] ?? 0;
-      if (weight <= 0) {
-        continue;
-      }
-      const jointNodeIndex = skin.joints[jointIndices[influence] ?? 0] ?? skin.joints[0];
-      const jointMatrix = multiplyMatrix(worldMatrices[jointNodeIndex] ?? identityMatrix(), inverseBindMatrices[jointIndices[influence] ?? 0] ?? identityMatrix());
-      const transformed = transformPoint(jointMatrix, position);
-      skinned[0] += transformed[0] * weight;
-      skinned[1] += transformed[1] * weight;
-      skinned[2] += transformed[2] * weight;
+  const stop = () => {
+    if (!running) {
+      return false;
     }
-    return skinned;
-  });
-}
-
-// src/animated-scene-renderer.js
-var DEFAULT_CAMERA = Object.freeze({
-  mode: "lagged-follow",
-  viewMode: "spectator",
-  cubicBezier: [0.22, 0.61, 0.36, 1],
-  lagMs: 240,
-  lookAheadMs: 320,
-  offset: [0, 2.4, 5.5],
-  constraints: Object.freeze({
-    maxDistance: 10,
-    firstPersonHeadOffset: 0.05
-  }),
-  headLook: Object.freeze({
-    enabled: true,
-    returnMs: 240
-  })
-});
-function nowMs() {
-  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
-}
-function clamp01(value) {
-  return Math.min(1, Math.max(0, value));
-}
-function lerp2(a, b, t) {
-  return a + (b - a) * t;
-}
-function lerp3(a, b, t) {
-  return [
-    lerp2(a[0] ?? 0, b[0] ?? 0, t),
-    lerp2(a[1] ?? 0, b[1] ?? 0, t),
-    lerp2(a[2] ?? 0, b[2] ?? 0, t)
-  ];
+    running = false;
+    if (rafId !== null && typeof cancelAnimationFrame === "function") {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = null;
+    return true;
+  };
+  const resize = (cssWidth, cssHeight, devicePixelRatio = globalThis.devicePixelRatio ?? 1) => {
+    const width = Math.max(1, Math.floor(cssWidth * devicePixelRatio));
+    const height = Math.max(1, Math.floor(cssHeight * devicePixelRatio));
+    targetCanvas.width = width;
+    targetCanvas.height = height;
+    if (targetCanvas.style) {
+      targetCanvas.style.width = `${Math.max(1, Math.floor(cssWidth))}px`;
+      targetCanvas.style.height = `${Math.max(1, Math.floor(cssHeight))}px`;
+    }
+    return { width, height };
+  };
+  const setClearColor = (value) => {
+    clear = normalizeColor(value);
+    return [...clear];
+  };
+  const setXrActive = (active) => {
+    xrActive = Boolean(active);
+  };
+  const getSnapshot = () => {
+    const width = Number(targetCanvas.width) || 0;
+    const height = Number(targetCanvas.height) || 0;
+    return {
+      running,
+      frame,
+      lastTimestamp,
+      format: resolvedFormat,
+      width,
+      height,
+      xrActive
+    };
+  };
+  const renderer = {
+    canvas: targetCanvas,
+    context,
+    device,
+    format: resolvedFormat,
+    renderOnce,
+    start,
+    stop,
+    resize,
+    setClearColor,
+    setXrActive,
+    getSnapshot,
+    bindXrManager(xrManager, bindOptions = {}) {
+      if (detachXrBinding) {
+        detachXrBinding();
+      }
+      detachXrBinding = bindRendererToXrManager(renderer, xrManager, bindOptions);
+      return detachXrBinding;
+    },
+    destroy() {
+      stop();
+      destroyed = true;
+      if (detachXrBinding) {
+        detachXrBinding();
+        detachXrBinding = null;
+      }
+      if (typeof context.unconfigure === "function") {
+        context.unconfigure();
+      }
+    }
+  };
+  return renderer;
 }
-function normalize3(value, fallback = [0, 0, -1]) {
-  if (!Array.isArray(value) || value.length < 3) {
-    return [...fallback];
+function snapshotFromXrManager(xrManager) {
+  if (xrManager && typeof xrManager.getState === "function") {
+    return xrManager.getState();
   }
-  const vector = [
-    Number.isFinite(Number(value[0])) ? Number(value[0]) : fallback[0],
-    Number.isFinite(Number(value[1])) ? Number(value[1]) : fallback[1],
-    Number.isFinite(Number(value[2])) ? Number(value[2]) : fallback[2]
-  ];
-  const length = Math.hypot(vector[0], vector[1], vector[2]);
-  if (length <= 1e-6) {
-    return [...fallback];
+  if (xrManager?.store && typeof xrManager.store.getSnapshot === "function") {
+    return xrManager.store.getSnapshot();
   }
-  return [vector[0] / length, vector[1] / length, vector[2] / length];
-}
-function clamp(value, min, max) {
-  return Math.min(max, Math.max(min, value));
-}
-function bezierY([, y1, , y2], t) {
-  const u = 1 - t;
-  return 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t;
-}
-function durationFromBeats(beats) {
-  return beats.reduce((total, beat) => total + Math.max(0, beat.durationMs ?? 0), 0);
+  return null;
 }
-function definedCameraOverrides(camera) {
-  if (!camera || typeof camera !== "object") {
-    return {};
+function bindRendererToXrManager(renderer, xrManager, options = {}) {
+  if (!xrManager || typeof xrManager.subscribe !== "function") {
+    throw new Error("XR manager must expose subscribe(listener). Use @plasius/gpu-xr createXrManager().");
   }
-  return Object.fromEntries(Object.entries(camera).filter(([, value]) => value !== void 0));
-}
-function resolveBeat(beats, loopTimeMs) {
-  let cursor = 0;
-  for (const beat of beats) {
-    const durationMs = Math.max(1, beat.durationMs ?? 1);
-    if (loopTimeMs < cursor + durationMs) {
-      return { beat, beatTimeMs: loopTimeMs - cursor, durationMs };
+  const { onSessionStart, onSessionEnd } = options;
+  let previousSession = null;
+  const applyState = (state) => {
+    const session = state?.activeSession ?? null;
+    if (session === previousSession) {
+      return;
     }
-    cursor += durationMs;
-  }
-  const fallback = beats.at(-1);
-  return { beat: fallback, beatTimeMs: fallback?.durationMs ?? 0, durationMs: fallback?.durationMs ?? 1 };
-}
-function resolveRoutePosition(route, timeMs) {
-  if (!route.length) {
-    return [0, 0, 0];
-  }
-  if (route.length === 1 || timeMs <= (route[0].arriveMs ?? 0)) {
-    return [...route[0].position];
-  }
-  for (let index = 1; index < route.length; index += 1) {
-    const previous = route[index - 1];
-    const next = route[index];
-    const start = previous.arriveMs ?? 0;
-    const end = next.arriveMs ?? start + 1;
-    if (timeMs <= end) {
-      return lerp3(previous.position, next.position, clamp01((timeMs - start) / Math.max(1, end - start)));
+    previousSession = session;
+    if (typeof renderer.setXrActive === "function") {
+      renderer.setXrActive(Boolean(session));
     }
-  }
-  return [...route.at(-1).position];
-}
-function resolveRouteForward(route, timeMs) {
-  if (route.length < 2) {
-    return [0, 0, -1];
-  }
-  let previous = route[0];
-  let next = route[1];
-  for (let index = 1; index < route.length; index += 1) {
-    next = route[index];
-    if (timeMs <= (next.arriveMs ?? 0)) {
-      previous = route[index - 1];
-      break;
+    if (session && typeof onSessionStart === "function") {
+      onSessionStart(session, renderer);
     }
-  }
-  return normalize3([
-    (next.position?.[0] ?? 0) - (previous.position?.[0] ?? 0),
-    (next.position?.[1] ?? 0) - (previous.position?.[1] ?? 0),
-    (next.position?.[2] ?? 0) - (previous.position?.[2] ?? 0)
-  ]);
-}
-function distance3(a = [0, 0, 0], b = [0, 0, 0]) {
-  return Math.hypot(
-    (b[0] ?? 0) - (a[0] ?? 0),
-    (b[1] ?? 0) - (a[1] ?? 0),
-    (b[2] ?? 0) - (a[2] ?? 0)
-  );
+    if (!session && typeof onSessionEnd === "function") {
+      onSessionEnd(renderer);
+    }
+  };
+  applyState(snapshotFromXrManager(xrManager));
+  return xrManager.subscribe(applyState);
 }
-function movementRequirementType(requirement, beat) {
-  if (requirement?.type) {
-    return requirement.type;
-  }
-  if (beat?.kind === "locomotion") {
-    return beat?.rootMotion === "in-place" ? "stationary" : "travel";
-  }
-  if (beat?.kind === "action" || beat?.kind === "idle") {
-    return "stationary";
-  }
-  const clipId = String(beat?.clipId ?? "").toLowerCase();
-  if (/(idle|gesture|dig|plant|water|pick|serve|swing|fire|block|hoe)/iu.test(clipId)) {
-    return "stationary";
-  }
-  if (/(walk|run|jump|climb|crawl|locomotion)/iu.test(clipId)) {
-    return clipId.includes("jump") ? "jump" : "travel";
+var defaultRendererClearColor = DEFAULT_CLEAR_COLOR;
+
+// src/native-scene-shader.js
+var nativeSceneShader = (
+  /* wgsl */
+  `
+struct Frame {
+  eye: vec4f, right: vec4f, up: vec4f, forward: vec4f,
+  settings: vec4f, sun: vec4f,
+  lightRight: vec4f, lightUp: vec4f, lightForward: vec4f, lightOrigin: vec4f,
+  viewport: vec4f, wakes: array<vec4f, 4>, info: vec4f,
+};
+@group(0) @binding(0) var<uniform> frame: Frame;
+@group(1) @binding(0) var shadowMap: texture_depth_2d;
+@group(1) @binding(1) var shadowSampler: sampler_comparison;
+@group(2) @binding(0) var reflectionMap: texture_2d<f32>;
+@group(2) @binding(1) var reflectionSampler: sampler;
+struct Surface {
+  @builtin(position) clip: vec4f,
+  @location(0) world: vec3f, @location(1) normal: vec3f,
+  @location(2) colour: vec3f, @location(3) material: vec3f,
+};
+fn project(p: vec3f) -> vec4f {
+  let d = p - frame.eye.xyz;
+  let z = dot(d, frame.forward.xyz);
+  return vec4f(dot(d, frame.right.xyz) / (frame.settings.x * frame.settings.y),
+    dot(d, frame.up.xyz) / frame.settings.x, (z - 0.08) * 500.0 / 499.92, z);
+}
+fn lightProject(p: vec3f) -> vec4f {
+  let d = p - frame.lightOrigin.xyz;
+  return vec4f(dot(d, frame.lightRight.xyz) / 34.0,
+    dot(d, frame.lightUp.xyz) / 34.0, dot(d, frame.lightForward.xyz) / 100.0, 1.0);
+}
+@vertex fn surfaceVertex(@location(0) p: vec3f, @location(1) n: vec3f,
+  @location(2) c: vec3f, @location(3) m: vec3f) -> Surface {
+  return Surface(project(p), p, n, c, m);
+}
+@vertex fn shadowVertex(@location(0) p: vec3f) -> @builtin(position) vec4f {
+  return lightProject(p);
+}
+@vertex fn fullscreenVertex(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+  let positions = array<vec2f, 3>(vec2f(-1, -1), vec2f(3, -1), vec2f(-1, 3));
+  return vec4f(positions[i], 1, 1);
+}
+fn cameraRay(pixel: vec2f) -> vec3f {
+  let uv = pixel / frame.viewport.xy * 2.0 - 1.0;
+  return normalize(frame.forward.xyz + frame.right.xyz * uv.x * frame.settings.x * frame.settings.y
+    - frame.up.xyz * uv.y * frame.settings.x);
+}
+fn display(c: vec3f) -> vec3f {
+  let x = max(c * frame.settings.w, vec3f(0));
+  let mapped = clamp((x * (2.51 * x + 0.03)) / (x * (2.43 * x + 0.59) + 0.14), vec3f(0), vec3f(1));
+  return pow(mapped, vec3f(1.0 / 2.2));
+}
+fn hash(p: vec3f) -> f32 { return fract(sin(dot(p, vec3f(127.1, 311.7, 74.7))) * 43758.5453); }
+fn noise(p: vec3f) -> f32 {
+  let i = floor(p); let f = fract(p); let u = f * f * (3.0 - 2.0 * f);
+  return mix(mix(mix(hash(i), hash(i + vec3f(1,0,0)), u.x),
+    mix(hash(i + vec3f(0,1,0)), hash(i + vec3f(1,1,0)), u.x), u.y),
+    mix(mix(hash(i + vec3f(0,0,1)), hash(i + vec3f(1,0,1)), u.x),
+    mix(hash(i + vec3f(0,1,1)), hash(i + vec3f(1,1,1)), u.x), u.y), u.z);
+}
+fn sky(ray: vec3f) -> vec3f {
+  let elevation = pow(clamp(ray.y * 0.7 + 0.16, 0.0, 1.0), 0.6);
+  var c = mix(vec3f(0.42, 0.53, 0.61), vec3f(0.07, 0.19, 0.37), elevation);
+  let sunAngle = dot(ray, frame.sun.xyz);
+  c += vec3f(1.0, 0.73, 0.43) * pow(max(sunAngle, 0.0), 64.0) * 0.35;
+  c += vec3f(4.0, 3.2, 2.1) * smoothstep(0.99965, 0.99985, sunAngle);
+  let cloudPoint = ray / max(0.12, ray.y) * 2.1 + vec3f(0, 0, 8);
+  let cloud = smoothstep(0.49, 0.77, noise(cloudPoint) * 0.65 + noise(cloudPoint * 2.1) * 0.35);
+  c = mix(c, vec3f(0.85, 0.86, 0.82), cloud * smoothstep(0.03, 0.35, ray.y) * 0.65);
+  return c;
+}
+@fragment fn skyFragment(@builtin(position) pixel: vec4f) -> @location(0) vec4f {
+  return vec4f(display(sky(cameraRay(pixel.xy))), 1);
+}
+fn visibility(p: vec3f, n: vec3f) -> f32 {
+  let q = lightProject(p + n * 0.035).xyz;
+  let uv = vec2f(q.x * 0.5 + 0.5, 0.5 - q.y * 0.5);
+  if (any(uv < vec2f(0.005)) || any(uv > vec2f(0.995)) || q.z < 0.0 || q.z > 1.0) { return 1.0; }
+  var result = 0.0;
+  for (var y = -1; y <= 1; y++) {
+    for (var x = -1; x <= 1; x++) {
+      result += textureSampleCompareLevel(shadowMap, shadowSampler, uv + vec2f(f32(x), f32(y)) / 2048.0, q.z - 0.0006);
+    }
+  }
+  return result / 9.0;
+}
+fn brdf(c: vec3f, n: vec3f, v: vec3f, roughness: f32, metal: f32) -> vec3f {
+  let l = frame.sun.xyz; let h = normalize(l + v);
+  let nl = max(dot(n,l),0.0); let nv = max(dot(n,v),0.001);
+  let nh = max(dot(n,h),0.0); let vh = max(dot(v,h),0.0);
+  let a = max(0.035, roughness * roughness); let a2 = a * a;
+  let d = a2 / max(0.00001, 3.14159265 * pow(nh * nh * (a2 - 1.0) + 1.0, 2.0));
+  let k = pow(roughness + 1.0, 2.0) / 8.0;
+  let g = (nl / (nl * (1.0-k) + k)) * (nv / (nv * (1.0-k) + k));
+  let f0 = mix(vec3f(0.04), c, metal);
+  let f = f0 + (1.0-f0) * pow(1.0-vh, 5.0);
+  return ((1.0-f) * (1.0-metal) * c / 3.14159265 + d * g * f / max(0.001, 4.0*nl*nv)) * nl;
+}
+fn fog(c: vec3f, p: vec3f) -> vec3f {
+  let amount = 1.0 - exp(-distance(frame.eye.xyz, p) * 0.0018);
+  return mix(c, vec3f(0.32, 0.44, 0.55), amount);
+}
+fn surfaceRadiance(s: Surface, front: bool) -> vec3f {
+  let facing = select(select(-1.0,1.0,front),select(1.0,-1.0,front),frame.info.y>0.5);
+  var n = normalize(s.normal) * facing;
+  let v = normalize(frame.eye.xyz - s.world);
+  var c = s.colour;
+  if (s.material.z > 2.5) {
+    let rock = smoothstep(0.45,0.68,noise(s.world*0.27));
+    c = mix(c,vec3f(0.16,0.145,0.11),rock*0.7);
+    c *= 0.75+0.45*noise(s.world*2.4);
+    n = normalize(n+vec3f(noise(s.world*4.0)-0.5,0,noise(s.world*4.0+vec3f(13))-0.5)*0.28);
+  } else if (s.material.z > 0.5 && s.material.z < 1.5) {
+    let grain = noise(s.world * vec3f(18, 3, 1.6));
+    c *= 0.82 + 0.30 * grain;
+  } else if (s.material.z > 1.5) { c *= 0.88 + 0.18 * noise(s.world * 12.0); }
+  let hemi = mix(vec3f(0.06,0.05,0.035), vec3f(0.16,0.22,0.29), n.y * 0.5 + 0.5);
+  let direct = brdf(c, n, v, s.material.x, s.material.y) * vec3f(3.0, 2.65, 2.15) * visibility(s.world, n);
+  let ambient = c * hemi * (1.0 - s.material.y * 0.7);
+  let env = sky(reflect(-v,n)) * mix(vec3f(0.04), c, s.material.y) * (1.0-s.material.x) * 0.30;
+  return fog(direct + ambient + env, s.world);
+}
+@fragment fn surfaceFragment(s: Surface, @builtin(front_facing) front: bool) -> @location(0) vec4f {
+  return vec4f(display(surfaceRadiance(s,front)),1);
+}
+fn wave(p: vec2f) -> f32 {
+  let t = frame.settings.z;
+  return sin(dot(p,vec2f(0.35,0.23))-t*0.85)*0.13
+    + sin(dot(p,vec2f(-0.61,0.42))+t*1.12)*0.065
+    + sin(dot(p,vec2f(1.2,0.83))-t*1.4)*0.025
+    + sin(dot(p,vec2f(3.1,-2.1))+t*1.8)*0.009;
+}
+struct WaterResult { @location(0) colour: vec4f, @builtin(frag_depth) depth: f32 };
+@fragment fn waterFragment(@builtin(position) pixel: vec4f) -> WaterResult {
+  let ray = cameraRay(pixel.xy);
+  if (ray.y > -0.001) { discard; }
+  var dist = (frame.viewport.z - frame.eye.y) / ray.y;
+  var p = frame.eye.xyz + ray * dist;
+  for (var i=0; i<3; i++) {
+    dist = (frame.viewport.z + wave(p.xz) - frame.eye.y) / ray.y;
+    p = frame.eye.xyz + ray * dist;
+  }
+  if (dist < 0.08 || dist > 499.0) { discard; }
+  let eps = 0.03;
+  let waveNormal = normalize(vec3f((wave(p.xz-vec2f(eps,0))-wave(p.xz+vec2f(eps,0)))/(2.0*eps),
+    1.0, (wave(p.xz-vec2f(0,eps))-wave(p.xz+vec2f(0,eps)))/(2.0*eps)));
+  let n = normalize(mix(waveNormal,vec3f(0,1,0),smoothstep(35.0,150.0,dist)));
+  let v = -ray;
+  let fresnel = 0.02 + 0.98 * pow(1.0-max(dot(n,v),0.0),5.0);
+  let uv = clamp(pixel.xy / frame.viewport.xy + n.xz * 0.018, vec2f(0.002), vec2f(0.998));
+  // Reflection target is HDR linear; tone mapping happens once after mixing.
+  let reflected = textureSampleLevel(reflectionMap, reflectionSampler, uv, 0).rgb;
+  let shadow = visibility(p, n);
+  var c = mix(vec3f(0.008,0.05,0.065) * (0.5+0.5*shadow), reflected, fresnel);
+  c += brdf(vec3f(0.01),n,v,0.14,0.0) * vec3f(2.5,2.15,1.7) * shadow;
+  var foam = 0.0;
+  for (var i=0u; i<4u; i++) {
+    if (f32(i) >= frame.info.x) { break; }
+    let w = frame.wakes[i]; let delta = p.xz - w.xy;
+    let along = dot(delta, vec2f(sin(w.z), cos(w.z)));
+    let across = abs(dot(delta,vec2f(cos(w.z),-sin(w.z))));
+    let ribbon = exp(-pow((across - max(0.0,-along)*0.28 - 0.65)*4.0,2.0));
+    foam += ribbon * (1.0-smoothstep(-1.0,0.5,along)) * exp(min(0.0,along)*0.25) * (0.4+0.6*noise(vec3f(p.x*5.0,p.z*5.0,frame.settings.z*0.5)));
+  }
+  c = mix(c,vec3f(0.48,0.61,0.62),clamp(foam*0.42,0.0,0.55));
+  let clip = project(p);
+  return WaterResult(vec4f(display(fog(c,p)),1),clip.z/clip.w);
+}
+// Keep reflection radiance linear, including sky. Reusing the lighting calculation
+// rather than sampling a screenshot avoids double tone mapping on the water.
+@fragment fn reflectionSky(@builtin(position) pixel: vec4f) -> @location(0) vec4f {
+  return vec4f(sky(cameraRay(pixel.xy)),1);
+}
+@fragment fn reflectionSurface(s: Surface, @builtin(front_facing) front: bool) -> @location(0) vec4f {
+  if (s.world.y < frame.viewport.z) { discard; }
+  return vec4f(surfaceRadiance(s,front),1);
+}
+`
+);
+
+// src/native-scene-renderer.js
+var STRIDE = 12;
+var UNIFORM_BYTES = 256;
+var SHADOW_SIZE = 2048;
+var sub = (a, b) => a.map((v, i) => v - b[i]);
+var cross = (a, b) => [
+  a[1] * b[2] - a[2] * b[1],
+  a[2] * b[0] - a[0] * b[2],
+  a[0] * b[1] - a[1] * b[0]
+];
+var unit = (a) => {
+  const length = Math.hypot(...a);
+  return a.map((v) => v / length);
+};
+var finiteVector = (a) => Array.isArray(a) && a.length === 3 && a.every(Number.isFinite);
+function validateFrame(frame, maxVertices) {
+  const { vertices, camera, time = 0 } = frame ?? {};
+  if (!(vertices instanceof Float32Array) || vertices.length % (STRIDE * 3) !== 0 || vertices.length > maxVertices * STRIDE || !vertices.every(Number.isFinite)) {
+    throw new Error(
+      `vertices must contain bounded, finite interleaved triangles (12 floats per vertex); received ${vertices?.length ?? 0} floats; first nonfinite component ${vertices instanceof Float32Array ? vertices.findIndex((v) => !Number.isFinite(v)) : "unknown"}.`
+    );
   }
-  return beat?.pathPointId ? "travel" : "stationary";
-}
-function movementDistancePerLoop(profile = {}) {
-  profile ??= {};
-  const rootDistance = Number(profile.rootTranslationDistance ?? profile.rootTranslation?.distance ?? 0);
-  if (Number.isFinite(rootDistance) && rootDistance > 0) {
-    return rootDistance;
+  if (!finiteVector(camera?.eye) || !finiteVector(camera?.target) || Math.hypot(...sub(camera.eye, camera.target)) < 1e-3 || !Number.isFinite(camera.fov ?? 54) || (camera.fov ?? 54) < 10 || (camera.fov ?? 54) > 120) {
+    throw new Error(
+      "camera must provide distinct finite eye/target vectors and a 10\u2013120 degree fov."
+    );
   }
-  const strideLength = Number(profile.strideLength ?? profile.strideLengthMeters ?? 0);
-  if (Number.isFinite(strideLength) && strideLength > 0) {
-    return strideLength;
+  if (!Number.isFinite(time)) throw new Error("time must be finite.");
+  if (!Number.isFinite(frame.waterLevel ?? 0))
+    throw new Error("waterLevel must be finite.");
+  if (frame.wakes !== void 0 && (!Array.isArray(frame.wakes) || frame.wakes.length > 4 || frame.wakes.some(
+    (w) => !Array.isArray(w) || w.length !== 3 || !w.every(Number.isFinite)
+  ))) {
+    throw new Error(
+      "wakes must contain at most four finite [x, z, heading] entries."
+    );
   }
-  return 0;
-}
-function clipDurationMs(profile = {}, fallbackMs = 1) {
-  profile ??= {};
-  const duration = Number(profile.durationMs ?? 0);
-  return Number.isFinite(duration) && duration > 0 ? duration : Math.max(1, fallbackMs);
-}
-function profileAllowsDisplacement(profile = {}, movementType) {
-  profile ??= {};
-  if (movementType === "stationary") {
-    return profile.worldDisplacementAllowed !== true;
+  return { ...frame, time };
+}
+function frameUniforms(frame, width, height, reflected = false) {
+  const eye = [...frame.camera.eye];
+  let forward = unit(sub(frame.camera.target, eye));
+  const referenceUp = Math.abs(forward[1]) > 0.999 ? [0, 0, 1] : [0, 1, 0];
+  const right = unit(cross(forward, referenceUp));
+  const up = unit(cross(right, forward));
+  const waterLevel = frame.waterLevel ?? 0;
+  if (reflected) {
+    eye[1] = 2 * waterLevel - eye[1];
+    forward = [forward[0], -forward[1], forward[2]];
+    right[1] *= -1;
+    up[1] *= -1;
+  }
+  const sun = unit([-0.62, 0.48, 0.62]);
+  const lightForward = sun.map((x) => -x);
+  const lightRight = unit(cross(lightForward, [0, 1, 0]));
+  const lightUp = unit(cross(lightRight, lightForward));
+  const uniforms = new Float32Array(64);
+  uniforms.set(eye, 0);
+  uniforms.set(right, 4);
+  uniforms.set(up, 8);
+  uniforms.set(forward, 12);
+  uniforms.set(
+    [
+      Math.tan((frame.camera.fov ?? 54) * Math.PI / 360),
+      width / height,
+      frame.time,
+      0.86
+    ],
+    16
+  );
+  uniforms.set(sun, 20);
+  uniforms.set(lightRight, 24);
+  uniforms.set(lightUp, 28);
+  uniforms.set(lightForward, 32);
+  uniforms.set([sun[0] * 45, sun[1] * 45, sun[2] * 45 + 4], 36);
+  uniforms.set([width, height, waterLevel, 0], 40);
+  (frame.wakes ?? []).forEach(
+    (wake, index) => uniforms.set([...wake, 0], 44 + index * 4)
+  );
+  uniforms.set([(frame.wakes ?? []).length, reflected ? 1 : 0, 0, 0], 60);
+  return uniforms;
+}
+async function createNativeSceneRenderer(options = {}) {
+  const maxVertices = options.maxVertices ?? 3e5;
+  if (!Number.isInteger(maxVertices) || maxVertices < 3 || maxVertices > 6e5) {
+    throw new Error("maxVertices must be an integer between 3 and 600000.");
+  }
+  let base;
+  let destroyed = false;
+  let available = true;
+  let targets = null;
+  let vertexBuffer = null;
+  let vertexCapacity = 0;
+  let pendingFrame = null;
+  let submittedFrames = 0;
+  let vertexCount = 0;
+  const owned = /* @__PURE__ */ new Set();
+  const own = (resource) => {
+    owned.add(resource);
+    return resource;
+  };
+  const release = (resource) => {
+    resource.destroy();
+    owned.delete(resource);
+  };
+  const destroy = () => {
+    if (destroyed) return;
+    destroyed = true;
+    base?.destroy();
+    for (const resource of owned) resource.destroy();
+    owned.clear();
+    base?.device.destroy?.();
+  };
+  try {
+    let ensureTargets = function() {
+      const limit = Math.min(device.limits.maxTextureDimension2D, 3840);
+      const requestedWidth = Math.max(1, Number(base.canvas.width) || 1);
+      const requestedHeight = Math.max(1, Number(base.canvas.height) || 1);
+      const scale2 = Math.min(
+        1,
+        limit / requestedWidth,
+        limit / requestedHeight,
+        Math.sqrt(1920 * 1080 / (requestedWidth * requestedHeight))
+      );
+      const width = Math.max(1, Math.floor(requestedWidth * scale2));
+      const height = Math.max(1, Math.floor(requestedHeight * scale2));
+      base.canvas.width = width;
+      base.canvas.height = height;
+      if (targets?.width === width && targets?.height === height) return;
+      if (targets) for (const texture2 of targets.textures) release(texture2);
+      const reflectionWidth = Math.min(1280, Math.max(1, Math.ceil(width / 2)));
+      const reflectionHeight = Math.max(
+        1,
+        Math.round(height * reflectionWidth / width)
+      );
+      const texture = (label, w, h, pixelFormat, sampleCount = 1, usage = 16) => own(
+        device.createTexture({
+          label,
+          size: [w, h],
+          format: pixelFormat,
+          sampleCount,
+          usage
+        })
+      );
+      const colour = texture("native.msaa-colour", width, height, format, 4);
+      const depth = texture(
+        "native.msaa-depth",
+        width,
+        height,
+        "depth32float",
+        4
+      );
+      const reflection = texture(
+        "native.reflection",
+        reflectionWidth,
+        reflectionHeight,
+        "rgba16float",
+        1,
+        20
+      );
+      const reflectionDepth = texture(
+        "native.reflection-depth",
+        reflectionWidth,
+        reflectionHeight,
+        "depth32float"
+      );
+      const reflectionView = reflection.createView();
+      targets = {
+        width,
+        height,
+        reflectionWidth,
+        reflectionHeight,
+        colour: colour.createView(),
+        depth: depth.createView(),
+        reflection: reflectionView,
+        reflectionDepth: reflectionDepth.createView(),
+        textures: [colour, depth, reflection, reflectionDepth],
+        reflectionGroup: device.createBindGroup({
+          layout: reflectionLayout,
+          entries: [
+            { binding: 0, resource: reflectionView },
+            { binding: 1, resource: reflectionSampler }
+          ]
+        })
+      };
+    }, encode = function({ encoder, view }) {
+      const depthAttachment = (depthView) => ({
+        view: depthView,
+        depthLoadOp: "clear",
+        depthClearValue: 1,
+        depthStoreOp: "store"
+      });
+      const drawGeometry = (pass2, p, uniforms) => {
+        pass2.setPipeline(p);
+        pass2.setBindGroup(0, uniforms);
+        if (p !== shadowPipeline) pass2.setBindGroup(1, shadowGroup);
+        if (vertexCount > 0) {
+          pass2.setVertexBuffer(0, vertexBuffer);
+          pass2.draw(vertexCount);
+        }
+      };
+      const shadowPass = encoder.beginRenderPass({
+        label: "native.shadow",
+        colorAttachments: [],
+        depthStencilAttachment: depthAttachment(shadowView)
+      });
+      drawGeometry(shadowPass, shadowPipeline, mainGroup);
+      shadowPass.end();
+      const reflectedPass = encoder.beginRenderPass({
+        label: "native.reflection",
+        colorAttachments: [
+          {
+            view: targets.reflection,
+            loadOp: "clear",
+            storeOp: "store",
+            clearValue: [0, 0, 0, 1]
+          }
+        ],
+        depthStencilAttachment: depthAttachment(targets.reflectionDepth)
+      });
+      reflectedPass.setPipeline(reflectedSkyPipeline);
+      reflectedPass.setBindGroup(0, reflectedGroup);
+      reflectedPass.draw(3);
+      drawGeometry(reflectedPass, reflectedSurfacePipeline, reflectedGroup);
+      reflectedPass.end();
+      const pass = encoder.beginRenderPass({
+        label: "native.scene",
+        colorAttachments: [
+          {
+            view: targets.colour,
+            resolveTarget: view,
+            loadOp: "clear",
+            storeOp: "discard",
+            clearValue: [0, 0, 0, 1]
+          }
+        ],
+        depthStencilAttachment: depthAttachment(targets.depth)
+      });
+      pass.setPipeline(skyPipeline);
+      pass.setBindGroup(0, mainGroup);
+      pass.draw(3);
+      if (pendingFrame.water !== false) {
+        pass.setPipeline(waterPipeline);
+        pass.setBindGroup(1, shadowGroup);
+        pass.setBindGroup(2, targets.reflectionGroup);
+        pass.draw(3);
+      }
+      drawGeometry(pass, surfacePipeline, mainGroup);
+      pass.end();
+    };
+    base = await createGpuRenderer({
+      ...options,
+      alpha: false,
+      encodeFrame: encode
+    });
+    const { device, format } = base;
+    device.lost?.then(() => {
+      available = false;
+      if (!destroyed)
+        options.onUnavailable?.(
+          "WebGPU device lost. Reload the demo to reconnect."
+        );
+    });
+    const module = device.createShaderModule({
+      label: "plasius.native-scene",
+      code: nativeSceneShader
+    });
+    const compilation = await module.getCompilationInfo?.();
+    const shaderErrors = compilation?.messages.filter((m) => m.type === "error") ?? [];
+    if (shaderErrors.length)
+      throw new Error(
+        `Native scene shader compilation failed: ${shaderErrors.map((m) => `${m.lineNum}: ${m.message}`).join("; ")}`
+      );
+    const uniformLayout = device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: 3,
+          buffer: { type: "uniform", minBindingSize: UNIFORM_BYTES }
+        }
+      ]
+    });
+    const shadowLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: 2, texture: { sampleType: "depth" } },
+        { binding: 1, visibility: 2, sampler: { type: "comparison" } }
+      ]
+    });
+    const reflectionLayout = device.createBindGroupLayout({
+      entries: [
+        { binding: 0, visibility: 2, texture: { sampleType: "float" } },
+        { binding: 1, visibility: 2, sampler: { type: "filtering" } }
+      ]
+    });
+    const uniformBuffer = own(
+      device.createBuffer({
+        label: "native.frame",
+        size: UNIFORM_BYTES,
+        usage: 72
+      })
+    );
+    const reflectionBuffer = own(
+      device.createBuffer({
+        label: "native.reflected-frame",
+        size: UNIFORM_BYTES,
+        usage: 72
+      })
+    );
+    const bindUniform = (buffer) => device.createBindGroup({
+      layout: uniformLayout,
+      entries: [{ binding: 0, resource: { buffer } }]
+    });
+    const mainGroup = bindUniform(uniformBuffer);
+    const reflectedGroup = bindUniform(reflectionBuffer);
+    const shadowTexture = own(
+      device.createTexture({
+        label: "native.shadow",
+        size: [SHADOW_SIZE, SHADOW_SIZE],
+        format: "depth32float",
+        usage: 20
+      })
+    );
+    const shadowView = shadowTexture.createView();
+    const shadowGroup = device.createBindGroup({
+      layout: shadowLayout,
+      entries: [
+        { binding: 0, resource: shadowView },
+        {
+          binding: 1,
+          resource: device.createSampler({
+            compare: "less-equal",
+            minFilter: "linear",
+            magFilter: "linear"
+          })
+        }
+      ]
+    });
+    const reflectionSampler = device.createSampler({
+      minFilter: "linear",
+      magFilter: "linear"
+    });
+    const attributes = [0, 1, 2, 3].map((i) => ({
+      shaderLocation: i,
+      offset: i * 12,
+      format: "float32x3"
+    }));
+    const createPipeline = device.createRenderPipelineAsync?.bind(device) ?? device.createRenderPipeline.bind(device);
+    const pipeline = (label, vertex, fragment, colourFormat, samples, layouts, geometry = false) => createPipeline({
+      label: `native.${label}`,
+      layout: device.createPipelineLayout({ bindGroupLayouts: layouts }),
+      vertex: {
+        module,
+        entryPoint: vertex,
+        ...geometry ? {
+          buffers: [
+            {
+              arrayStride: STRIDE * 4,
+              attributes: vertex === "shadowVertex" ? attributes.slice(0, 1) : attributes
+            }
+          ]
+        } : {}
+      },
+      ...fragment ? {
+        fragment: {
+          module,
+          entryPoint: fragment,
+          targets: [{ format: colourFormat }]
+        }
+      } : {},
+      primitive: { topology: "triangle-list", cullMode: "none" },
+      depthStencil: {
+        format: "depth32float",
+        depthWriteEnabled: label !== "sky" && label !== "reflection-sky",
+        depthCompare: "less-equal"
+      },
+      multisample: { count: samples }
+    });
+    const shadowPipeline = await pipeline(
+      "shadow",
+      "shadowVertex",
+      null,
+      null,
+      1,
+      [uniformLayout],
+      true
+    );
+    const surfacePipeline = await pipeline(
+      "surface",
+      "surfaceVertex",
+      "surfaceFragment",
+      format,
+      4,
+      [uniformLayout, shadowLayout],
+      true
+    );
+    const skyPipeline = await pipeline(
+      "sky",
+      "fullscreenVertex",
+      "skyFragment",
+      format,
+      4,
+      [uniformLayout]
+    );
+    const waterPipeline = await pipeline(
+      "water",
+      "fullscreenVertex",
+      "waterFragment",
+      format,
+      4,
+      [uniformLayout, shadowLayout, reflectionLayout]
+    );
+    const reflectedSurfacePipeline = await pipeline(
+      "reflection-surface",
+      "surfaceVertex",
+      "reflectionSurface",
+      "rgba16float",
+      1,
+      [uniformLayout, shadowLayout],
+      true
+    );
+    const reflectedSkyPipeline = await pipeline(
+      "reflection-sky",
+      "fullscreenVertex",
+      "reflectionSky",
+      "rgba16float",
+      1,
+      [uniformLayout]
+    );
+    return {
+      render(input) {
+        if (destroyed) throw new Error("Native scene renderer was destroyed.");
+        if (!available) throw new Error("WebGPU device was lost.");
+        pendingFrame = validateFrame(input, maxVertices);
+        const data = pendingFrame.vertices;
+        ensureTargets();
+        if (data.byteLength > vertexCapacity) {
+          if (vertexBuffer) release(vertexBuffer);
+          vertexCapacity = Math.min(
+            maxVertices * STRIDE * 4,
+            Math.max(4096, 2 ** Math.ceil(Math.log2(data.byteLength)))
+          );
+          vertexBuffer = own(
+            device.createBuffer({
+              label: "native.surface-vertices",
+              size: vertexCapacity,
+              usage: 40
+            })
+          );
+        }
+        vertexCount = data.length / STRIDE;
+        if (data.byteLength) device.queue.writeBuffer(vertexBuffer, 0, data);
+        device.queue.writeBuffer(
+          uniformBuffer,
+          0,
+          frameUniforms(pendingFrame, targets.width, targets.height)
+        );
+        device.queue.writeBuffer(
+          reflectionBuffer,
+          0,
+          frameUniforms(
+            pendingFrame,
+            targets.reflectionWidth,
+            targets.reflectionHeight,
+            true
+          )
+        );
+        base.renderOnce(pendingFrame.time * 1e3);
+        submittedFrames++;
+        return this.getSnapshot();
+      },
+      getSnapshot() {
+        return {
+          backend: "webgpu-raster",
+          available: available && !destroyed,
+          submittedFrames,
+          vertexCount,
+          shadowMapSize: SHADOW_SIZE,
+          samples: 4,
+          width: targets?.width ?? 0,
+          height: targets?.height ?? 0
+        };
+      },
+      destroy
+    };
+  } catch (error) {
+    destroy();
+    throw error;
   }
-  return profile.worldDisplacementAllowed === true || profile.motionMode === "root-authored" || profile.motionMode === "calibrated-in-place" || profile.motionMode === "jump";
 }
-function resolveClipProfiles(clipAssets = []) {
-  return new Map(clipAssets.map((clip) => [clip.id, clip.movementProfile ?? clip.profile ?? null]));
+
+// src/animated-scene-renderer.js
+import { resolveCameraRigFrame } from "@plasius/gpu-camera";
+
+// src/animated-gltf-model.js
+var GLB_MAGIC = 1179937895;
+var GLB_VERSION = 2;
+var GLB_JSON_CHUNK = 1313821514;
+var GLB_BIN_CHUNK = 5130562;
+var COMPONENT_READERS = Object.freeze({
+  5120: { size: 1, read: (view, offset) => view.getInt8(offset), normalizedDivisor: 127 },
+  5121: { size: 1, read: (view, offset) => view.getUint8(offset), normalizedDivisor: 255 },
+  5122: { size: 2, read: (view, offset) => view.getInt16(offset, true), normalizedDivisor: 32767 },
+  5123: { size: 2, read: (view, offset) => view.getUint16(offset, true), normalizedDivisor: 65535 },
+  5125: { size: 4, read: (view, offset) => view.getUint32(offset, true), normalizedDivisor: 4294967295 },
+  5126: { size: 4, read: (view, offset) => view.getFloat32(offset, true), normalizedDivisor: 1 }
+});
+var ACCESSOR_COMPONENTS = Object.freeze({
+  SCALAR: 1,
+  VEC2: 2,
+  VEC3: 3,
+  VEC4: 4,
+  MAT4: 16
+});
+function identityMatrix() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 }
-function buildBeatTimeline(beats, route, clipProfiles) {
-  const routePoints = new Map(route.map((point) => [point.id, point]));
-  let cursorMs = 0;
-  let routeCursor = 0;
-  let currentPosition = route[0]?.position ? [...route[0].position] : [0, 0, 0];
-  return beats.map((beat) => {
-    const requirement = beat.movementRequirement ?? beat.movement ?? null;
-    const movementType = movementRequirementType(requirement, beat);
-    const movesThroughWorld = movementType === "travel" || movementType === "jump" || movementType === "root-authored";
-    const explicitTargetPoint = beat.pathPointId ? routePoints.get(beat.pathPointId) : null;
-    const inferredTargetPoint = movesThroughWorld ? route[Math.min(route.length - 1, routeCursor + 1)] : null;
-    const targetPoint = explicitTargetPoint ?? inferredTargetPoint ?? null;
-    const targetPosition = targetPoint?.position ? [...targetPoint.position] : [...currentPosition];
-    const startPosition = [...currentPosition];
-    const endPosition = movesThroughWorld ? targetPosition : [...currentPosition];
-    const segmentDistance = Number(requirement?.distance ?? distance3(startPosition, endPosition));
-    const profile = clipProfiles.get(beat.clipId) ?? null;
-    const distancePerLoop = movementDistancePerLoop(profile);
-    const loopCount = movesThroughWorld && distancePerLoop > 0 ? Math.max(1, Math.ceil(segmentDistance / distancePerLoop)) : 1;
-    const derivedDurationMs = movesThroughWorld && distancePerLoop > 0 ? loopCount * clipDurationMs(profile, beat.durationMs) : Math.max(1, beat.durationMs ?? 1);
-    const durationMs = Math.max(1, beat.validatedDurationMs ?? requirement?.validatedDurationMs ?? derivedDurationMs);
-    const expectedSpeed = Number(profile?.expectedSpeed ?? (durationMs > 0 ? segmentDistance / (durationMs / 1e3) : 0));
-    const actualSpeed = durationMs > 0 ? segmentDistance / (durationMs / 1e3) : 0;
-    const warnings = [];
-    if (movesThroughWorld && !profileAllowsDisplacement(profile, movementType)) {
-      warnings.push(`clip '${beat.clipId}' does not allow ${movementType} displacement`);
-    }
-    if (movesThroughWorld && distancePerLoop <= 0 && profile?.motionMode !== "root-authored") {
-      warnings.push(`clip '${beat.clipId}' has no root or calibrated stride distance`);
-    }
-    if (movementType === "stationary" && profile?.worldDisplacementAllowed === true) {
-      warnings.push(`stationary beat '${beat.id}' uses a displacement-capable clip`);
-    }
-    const entry = {
-      beat,
-      startMs: cursorMs,
-      endMs: cursorMs + durationMs,
-      durationMs,
-      startPosition,
-      endPosition,
-      movementType,
-      movementProfile: profile,
-      movementDistance: segmentDistance,
-      distancePerLoop,
-      loopCount,
-      expectedSpeed,
-      actualSpeed,
-      footSlideWarning: Number(profile?.footSlideTolerance ?? 0) < 0 ? "invalid-foot-slide-tolerance" : null,
-      warnings
-    };
-    cursorMs = entry.endMs;
-    currentPosition = [...endPosition];
-    if (targetPoint) {
-      const nextRouteIndex = route.findIndex((point) => point.id === targetPoint.id);
-      if (nextRouteIndex >= 0) {
-        routeCursor = nextRouteIndex;
-      }
+function multiplyMatrix(a, b) {
+  const out = new Array(16).fill(0);
+  for (let column = 0; column < 4; column += 1) {
+    for (let row = 0; row < 4; row += 1) {
+      out[column * 4 + row] = a[0 * 4 + row] * b[column * 4 + 0] + a[1 * 4 + row] * b[column * 4 + 1] + a[2 * 4 + row] * b[column * 4 + 2] + a[3 * 4 + row] * b[column * 4 + 3];
     }
-    return entry;
-  });
-}
-function resolveTimelineBeat(timeline, loopTimeMs) {
-  if (!timeline.length) {
-    return null;
   }
-  return timeline.find((entry) => loopTimeMs < entry.endMs) ?? timeline.at(-1);
+  return out;
 }
-function resolveTimelinePosition(entry, beatTimeMs) {
-  if (!entry) {
-    return [0, 0, 0];
-  }
-  if (entry.movementType !== "travel" && entry.movementType !== "jump" && entry.movementType !== "root-authored") {
-    return [...entry.startPosition];
-  }
-  return lerp3(entry.startPosition, entry.endPosition, clamp01(beatTimeMs / Math.max(1, entry.durationMs)));
+function transformPoint(matrix, point) {
+  const [x, y, z] = point;
+  return [
+    matrix[0] * x + matrix[4] * y + matrix[8] * z + matrix[12],
+    matrix[1] * x + matrix[5] * y + matrix[9] * z + matrix[13],
+    matrix[2] * x + matrix[6] * y + matrix[10] * z + matrix[14]
+  ];
 }
-function resolveTimelineForward(entry) {
-  if (!entry) {
-    return [0, 0, -1];
-  }
-  return normalize3([
-    (entry.endPosition[0] ?? 0) - (entry.startPosition[0] ?? 0),
-    (entry.endPosition[1] ?? 0) - (entry.startPosition[1] ?? 0),
-    (entry.endPosition[2] ?? 0) - (entry.startPosition[2] ?? 0)
-  ]);
+function composeMatrix(translation = [0, 0, 0], rotation = [0, 0, 0, 1], scale2 = [1, 1, 1]) {
+  const [x, y, z, w] = normalizeQuaternion(rotation);
+  const [sx, sy, sz] = scale2;
+  const x2 = x + x;
+  const y2 = y + y;
+  const z2 = z + z;
+  const xx = x * x2;
+  const xy = x * y2;
+  const xz = x * z2;
+  const yy = y * y2;
+  const yz = y * z2;
+  const zz = z * z2;
+  const wx = w * x2;
+  const wy = w * y2;
+  const wz = w * z2;
+  return [
+    (1 - (yy + zz)) * sx,
+    (xy + wz) * sx,
+    (xz - wy) * sx,
+    0,
+    (xy - wz) * sy,
+    (1 - (xx + zz)) * sy,
+    (yz + wx) * sy,
+    0,
+    (xz + wy) * sz,
+    (yz - wx) * sz,
+    (1 - (xx + yy)) * sz,
+    0,
+    translation[0] ?? 0,
+    translation[1] ?? 0,
+    translation[2] ?? 0,
+    1
+  ];
 }
-function resolveCameraViewMode(camera) {
-  if (camera?.mode === "lagged-follow") {
-    return camera.viewMode ?? "spectator";
-  }
-  return camera?.viewMode ?? camera?.mode ?? "spectator";
+function normalizeQuaternion(quaternion = [0, 0, 0, 1]) {
+  const length = Math.hypot(quaternion[0] ?? 0, quaternion[1] ?? 0, quaternion[2] ?? 0, quaternion[3] ?? 1) || 1;
+  return [
+    (quaternion[0] ?? 0) / length,
+    (quaternion[1] ?? 0) / length,
+    (quaternion[2] ?? 0) / length,
+    (quaternion[3] ?? 1) / length
+  ];
 }
-function resolveCanvas(canvas) {
-  if (typeof canvas === "string") {
-    const found = globalThis.document?.querySelector?.(canvas);
-    if (!found) {
-      throw new Error(`Animated scene canvas '${canvas}' was not found.`);
-    }
-    return found;
-  }
-  if (!canvas) {
-    throw new Error("Animated scene renderer requires a canvas.");
-  }
-  return canvas;
-}
-function project(position, cameraPosition, width, height) {
-  const x = position[0] - cameraPosition[0];
-  const depth = Math.max(0.2, cameraPosition[2] - (position[2] ?? 0));
-  const scale2 = clamp(34 + 150 / (depth + 1.2), 34, 104);
-  const groundY = height * 0.82 - depth * height * 0.045 - (position[1] ?? 0) * scale2;
-  return {
-    x: width * 0.5 + x * scale2,
-    y: groundY,
-    groundY,
-    scale: scale2,
-    depth,
-    visible: groundY > -height * 0.2 && groundY < height * 1.18
-  };
+function lerp(a, b, t) {
+  return a + (b - a) * t;
 }
-function propIdentity(prop, index) {
-  return prop.id ?? `${prop.kind}-${index}`;
+function lerpArray(a, b, t) {
+  return a.map((value, index) => lerp(value, b[index] ?? value, t));
 }
-function drawGroundShadow(ctx, scale2) {
-  ctx.fillStyle = "rgba(44, 38, 28, 0.18)";
-  ctx.fillRect(-scale2 * 0.36, -scale2 * 0.035, scale2 * 0.72, scale2 * 0.07);
+function nlerpQuaternion(a, b, t) {
+  let end = b;
+  const dot2 = a.reduce((total, value, index) => total + value * (b[index] ?? 0), 0);
+  if (dot2 < 0) {
+    end = b.map((value) => -value);
+  }
+  return normalizeQuaternion(lerpArray(a, end, t));
 }
-function drawProp(ctx, prop, cameraPosition, width, height) {
-  const projected = project(prop.position, cameraPosition, width, height);
-  const { x, y, scale: scale2 } = projected;
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.lineWidth = Math.max(1, scale2 * 0.04);
-  if (prop.kind === "crop-row") {
-    ctx.fillStyle = "#8b633f";
-    ctx.fillRect(-scale2 * 1.05, -scale2 * 0.08, scale2 * 2.1, scale2 * 0.16);
-    ctx.fillStyle = "#6f4a30";
-    ctx.fillRect(-scale2 * 0.92, -scale2 * 0.035, scale2 * 1.84, scale2 * 0.07);
-    ctx.strokeStyle = "#4f6f32";
-    ctx.beginPath();
-    ctx.moveTo(-scale2 * 0.8, 0);
-    ctx.lineTo(scale2 * 0.8, 0);
-    ctx.stroke();
-    ctx.fillStyle = "#6f9f43";
-    for (let i = -3; i <= 3; i += 1) {
-      ctx.fillRect(i * scale2 * 0.22, -scale2 * 0.18, scale2 * 0.06, scale2 * 0.2);
+function parseGlb(buffer) {
+  if (!(buffer instanceof ArrayBuffer)) {
+    return null;
+  }
+  const view = new DataView(buffer);
+  if (view.byteLength < 20 || view.getUint32(0, true) !== GLB_MAGIC || view.getUint32(4, true) !== GLB_VERSION) {
+    return null;
+  }
+  let offset = 12;
+  let json = null;
+  let binary = null;
+  while (offset + 8 <= view.byteLength) {
+    const length = view.getUint32(offset, true);
+    const type = view.getUint32(offset + 4, true);
+    const start = offset + 8;
+    const end = start + length;
+    if (end > view.byteLength) {
+      return null;
     }
-  } else if (prop.kind === "fence-segment") {
-    ctx.strokeStyle = "#896b4d";
-    ctx.beginPath();
-    ctx.moveTo(-scale2 * 0.5, 0);
-    ctx.lineTo(scale2 * 0.5, 0);
-    ctx.moveTo(-scale2 * 0.35, -scale2 * 0.25);
-    ctx.lineTo(-scale2 * 0.35, scale2 * 0.1);
-    ctx.moveTo(scale2 * 0.35, -scale2 * 0.25);
-    ctx.lineTo(scale2 * 0.35, scale2 * 0.1);
-    ctx.stroke();
-  } else if (prop.kind === "cart") {
-    drawGroundShadow(ctx, scale2);
-    ctx.fillStyle = "#7b5238";
-    ctx.fillRect(-scale2 * 0.52, -scale2 * 0.38, scale2 * 1.04, scale2 * 0.36);
-    ctx.fillStyle = "#a4774c";
-    ctx.fillRect(-scale2 * 0.44, -scale2 * 0.32, scale2 * 0.88, scale2 * 0.08);
-    ctx.fillStyle = "#25201c";
-    ctx.beginPath();
-    ctx.arc(-scale2 * 0.32, scale2 * 0.02, scale2 * 0.1, 0, Math.PI * 2);
-    ctx.arc(scale2 * 0.32, scale2 * 0.02, scale2 * 0.1, 0, Math.PI * 2);
-    ctx.fill();
-  } else if (prop.kind === "small-tree") {
-    drawGroundShadow(ctx, scale2);
-    ctx.fillStyle = "#5b3b24";
-    ctx.fillRect(-scale2 * 0.07, -scale2 * 0.56, scale2 * 0.14, scale2 * 0.56);
-    ctx.fillStyle = "#2f6d3b";
-    ctx.beginPath();
-    ctx.arc(-scale2 * 0.16, -scale2 * 0.72, scale2 * 0.25, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillStyle = "#3f8746";
-    ctx.beginPath();
-    ctx.arc(scale2 * 0.13, -scale2 * 0.76, scale2 * 0.28, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.fillStyle = "#4f9a50";
-    ctx.beginPath();
-    ctx.arc(0, -scale2 * 0.98, scale2 * 0.26, 0, Math.PI * 2);
-    ctx.fill();
-  } else {
-    drawGroundShadow(ctx, scale2);
-    ctx.fillStyle = prop.kind === "crate" ? "#9a6a3d" : "#d0c39f";
-    ctx.fillRect(-scale2 * 0.2, -scale2 * 0.32, scale2 * 0.4, scale2 * 0.32);
-    if (prop.kind === "crate") {
-      ctx.strokeStyle = "#6e4829";
-      ctx.beginPath();
-      ctx.moveTo(-scale2 * 0.2, -scale2 * 0.16);
-      ctx.lineTo(scale2 * 0.2, -scale2 * 0.16);
-      ctx.moveTo(0, -scale2 * 0.32);
-      ctx.lineTo(0, 0);
-      ctx.stroke();
+    if (type === GLB_JSON_CHUNK) {
+      const text = new TextDecoder().decode(new Uint8Array(buffer, start, length)).trim();
+      json = JSON.parse(text);
+    } else if (type === GLB_BIN_CHUNK) {
+      binary = new Uint8Array(buffer, start, length);
     }
+    offset = end;
   }
-  ctx.restore();
-  return projected;
+  if (!json || !binary) {
+    return null;
+  }
+  return { json, binary };
 }
-function drawCharacter(ctx, characterPosition, cameraPosition, width, height, gaitPhase, headLook) {
-  const projected = project(characterPosition, cameraPosition, width, height);
-  const { x, y, scale: scale2 } = projected;
-  const stride = Math.sin(gaitPhase * Math.PI * 2);
-  const headYaw = (headLook?.yaw ?? 0) * (headLook?.weight ?? 0);
-  ctx.save();
-  ctx.translate(x, y);
-  ctx.lineWidth = Math.max(2, scale2 * 0.05);
-  ctx.lineCap = "round";
-  drawGroundShadow(ctx, scale2);
-  ctx.strokeStyle = "#4c2f25";
-  ctx.beginPath();
-  ctx.moveTo(-scale2 * 0.12, -scale2 * 0.34);
-  ctx.lineTo(-scale2 * (0.18 + stride * 0.04), -scale2 * 0.02);
-  ctx.moveTo(scale2 * 0.12, -scale2 * 0.34);
-  ctx.lineTo(scale2 * (0.18 - stride * 0.04), -scale2 * 0.02);
-  ctx.stroke();
-  ctx.fillStyle = "#6f8f62";
-  ctx.beginPath();
-  ctx.moveTo(-scale2 * 0.3, -scale2 * 0.86);
-  ctx.lineTo(scale2 * 0.3, -scale2 * 0.86);
-  ctx.lineTo(scale2 * 0.42, -scale2 * 0.24);
-  ctx.lineTo(-scale2 * 0.42, -scale2 * 0.24);
-  ctx.lineTo(-scale2 * 0.3, -scale2 * 0.86);
-  ctx.fill();
-  ctx.fillStyle = "#d8b18c";
-  ctx.beginPath();
-  ctx.arc(0, -scale2 * 1.16, scale2 * 0.18, 0, Math.PI * 2);
-  ctx.fill();
-  ctx.fillStyle = "#5a3a2b";
-  ctx.fillRect(-scale2 * 0.2, -scale2 * 1.28, scale2 * 0.4, scale2 * 0.16);
-  ctx.fillRect(-scale2 * 0.23, -scale2 * 1.14, scale2 * 0.1, scale2 * 0.28);
-  ctx.fillRect(scale2 * 0.13, -scale2 * 1.14, scale2 * 0.1, scale2 * 0.28);
-  if (headLook?.status === "active" || headLook?.status === "returning") {
-    ctx.strokeStyle = "rgba(255, 246, 210, 0.74)";
-    ctx.lineWidth = Math.max(1, scale2 * 0.025);
-    ctx.beginPath();
-    ctx.moveTo(0, -scale2 * 1.16);
-    ctx.lineTo(Math.sin(headYaw) * scale2 * 0.32, -scale2 * 1.16 - scale2 * 0.08);
-    ctx.stroke();
+function readAccessor(document, accessorIndex) {
+  const accessor = document.json.accessors?.[accessorIndex];
+  if (!accessor) {
+    return [];
   }
-  ctx.strokeStyle = "#6b4935";
-  ctx.beginPath();
-  ctx.moveTo(-scale2 * 0.24, -scale2 * 0.76);
-  ctx.lineTo(-scale2 * (0.46 + stride * 0.04), -scale2 * (0.5 + stride * 0.06));
-  ctx.moveTo(scale2 * 0.24, -scale2 * 0.76);
-  ctx.lineTo(scale2 * (0.46 - stride * 0.04), -scale2 * (0.5 - stride * 0.06));
-  ctx.stroke();
-  ctx.fillStyle = "#d6c09a";
-  ctx.fillRect(-scale2 * 0.16, -scale2 * 0.86, scale2 * 0.32, scale2 * 0.18);
-  ctx.restore();
-  return projected;
+  const bufferView = document.json.bufferViews?.[accessor.bufferView];
+  const component = COMPONENT_READERS[accessor.componentType];
+  const componentCount = ACCESSOR_COMPONENTS[accessor.type] ?? 1;
+  if (!bufferView || !component) {
+    return [];
+  }
+  const view = new DataView(
+    document.binary.buffer,
+    document.binary.byteOffset + (bufferView.byteOffset ?? 0) + (accessor.byteOffset ?? 0),
+    bufferView.byteLength ?? 0
+  );
+  const stride = bufferView.byteStride ?? component.size * componentCount;
+  const values = [];
+  for (let index = 0; index < accessor.count; index += 1) {
+    const item = [];
+    const baseOffset = index * stride;
+    for (let componentIndex = 0; componentIndex < componentCount; componentIndex += 1) {
+      const raw = component.read(view, baseOffset + componentIndex * component.size);
+      item.push(accessor.normalized && accessor.componentType !== 5126 ? raw / component.normalizedDivisor : raw);
+    }
+    values.push(componentCount === 1 ? item[0] : item);
+  }
+  return values;
 }
-function pointForModelVertex(vertex, projection, sample) {
-  const bounds = sample.bounds;
-  const height = Math.max(0.1, bounds.size[1] || sample.bindBounds.size[1] || 1);
-  const modelScale = projection.scale * 1.3 / height;
-  const centerX = (bounds.min[0] + bounds.max[0]) * 0.5;
-  const centerZ = (bounds.min[2] + bounds.max[2]) * 0.5;
-  return [
-    projection.x + (vertex[0] - centerX) * modelScale,
-    projection.groundY - (vertex[1] - bounds.min[1]) * modelScale + (vertex[2] - centerZ) * modelScale * 0.16
-  ];
+function readMatrices(document, accessorIndex) {
+  return readAccessor(document, accessorIndex).map((matrix) => Array.from(matrix));
 }
-function modelFillForHeight(vertex, sample) {
-  const height = Math.max(0.1, sample.bounds.size[1] || 1);
-  const t = (vertex[1] - sample.bounds.min[1]) / height;
-  if (t > 0.82) {
-    return "#6d4a36";
+function textureImage(document, textureIndex) {
+  if (typeof textureIndex !== "number") {
+    return null;
   }
-  if (t > 0.58) {
-    return "#d7b28f";
+  const texture = document.json.textures?.[textureIndex];
+  return typeof texture?.source === "number" ? document.json.images?.[texture.source] ?? null : null;
+}
+function imageHasBuffer(document, image) {
+  if (!image) {
+    return false;
   }
-  if (t > 0.25) {
-    return "#6f8f62";
+  if (typeof image.uri === "string" && image.uri.trim().length > 0) {
+    return true;
   }
-  return "#5e4636";
+  return typeof image.bufferView === "number" && Boolean(document.json.bufferViews?.[image.bufferView]);
 }
-function drawSkinnedGltfCharacter(ctx, model, snapshot, width, height) {
-  const projection = project(snapshot.characterPosition, snapshot.cameraPosition, width, height);
-  const sample = model.sample(snapshot.activeClipId, snapshot.clipTimeMs);
-  const maxTriangles = 12e3;
-  const triangleCount = Math.floor(sample.indices.length / 3);
-  const stride = Math.max(1, Math.ceil(triangleCount / maxTriangles));
-  const triangles = [];
-  for (let triangleIndex = 0; triangleIndex < triangleCount; triangleIndex += stride) {
-    const base = triangleIndex * 3;
-    const a = sample.vertices[sample.indices[base]];
-    const b = sample.vertices[sample.indices[base + 1]];
-    const c = sample.vertices[sample.indices[base + 2]];
-    if (!a || !b || !c) {
-      continue;
+function extractMaterialTextureMetadata(document, primitive) {
+  const material = document.json.materials?.[primitive?.material];
+  const baseColorTextureIndex = material?.pbrMetallicRoughness?.baseColorTexture?.index;
+  const normalTextureIndex = material?.normalTexture?.index;
+  const missingTextureReferences = [];
+  if (typeof baseColorTextureIndex === "number" && !imageHasBuffer(document, textureImage(document, baseColorTextureIndex))) {
+    missingTextureReferences.push("baseColorTexture");
+  }
+  if (typeof normalTextureIndex === "number" && !imageHasBuffer(document, textureImage(document, normalTextureIndex))) {
+    missingTextureReferences.push("normalTexture");
+  }
+  return Object.freeze({
+    materialCount: document.json.materials?.length ?? 0,
+    textureCount: document.json.textures?.length ?? 0,
+    imageCount: document.json.images?.length ?? 0,
+    embeddedImageCount: (document.json.images ?? []).filter((image) => typeof image.bufferView === "number").length,
+    baseColorTextureCount: typeof baseColorTextureIndex === "number" ? 1 : 0,
+    normalTextureCount: typeof normalTextureIndex === "number" ? 1 : 0,
+    hasBaseColorTexture: typeof baseColorTextureIndex === "number",
+    hasNormalTexture: typeof normalTextureIndex === "number",
+    missingTextureReferences: Object.freeze(missingTextureReferences),
+    materialName: material?.name ?? ""
+  });
+}
+function nodeLocalMatrix(node, override = {}) {
+  if (node.matrix && !override.translation && !override.rotation && !override.scale) {
+    return [...node.matrix];
+  }
+  return composeMatrix(
+    override.translation ?? node.translation ?? [0, 0, 0],
+    override.rotation ?? node.rotation ?? [0, 0, 0, 1],
+    override.scale ?? node.scale ?? [1, 1, 1]
+  );
+}
+function computeWorldMatrices(nodes, overridesByName = /* @__PURE__ */ new Map()) {
+  const parents = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    for (const child of node.children ?? []) {
+      parents.add(child);
     }
-    triangles.push({
-      a,
-      b,
-      c,
-      depth: (a[2] + b[2] + c[2]) / 3,
-      fill: modelFillForHeight(a, sample)
-    });
   }
-  triangles.sort((left, right) => left.depth - right.depth);
-  ctx.save();
-  drawGroundShadow(ctx, projection.scale);
-  for (const triangle of triangles) {
-    const [ax, ay] = pointForModelVertex(triangle.a, projection, sample);
-    const [bx, by] = pointForModelVertex(triangle.b, projection, sample);
-    const [cx, cy] = pointForModelVertex(triangle.c, projection, sample);
-    ctx.fillStyle = triangle.fill;
-    ctx.beginPath();
-    ctx.moveTo(ax, ay);
-    ctx.lineTo(bx, by);
-    ctx.lineTo(cx, cy);
-    ctx.closePath?.();
-    ctx.fill();
+  const roots = nodes.map((_, index) => index).filter((index) => !parents.has(index));
+  const worldMatrices = nodes.map(() => identityMatrix());
+  function visit(nodeIndex, parentMatrix) {
+    const node = nodes[nodeIndex];
+    if (!node) {
+      return;
+    }
+    const worldMatrix = multiplyMatrix(parentMatrix, nodeLocalMatrix(node, overridesByName.get(node.name) ?? {}));
+    worldMatrices[nodeIndex] = worldMatrix;
+    for (const child of node.children ?? []) {
+      visit(child, worldMatrix);
+    }
   }
-  ctx.restore();
-  return {
-    projection,
-    sample
-  };
+  for (const root of roots) {
+    visit(root, identityMatrix());
+  }
+  return worldMatrices;
 }
-function renderScene(canvas, ctx, snapshot, props, characterModel) {
-  const width = canvas.width || 1;
-  const height = canvas.height || 1;
-  ctx.clearRect(0, 0, width, height);
-  ctx.fillStyle = "#d8e8d0";
-  ctx.fillRect(0, 0, width, height);
-  ctx.fillStyle = "#9fc47a";
-  ctx.fillRect(0, height * 0.52, width, height * 0.48);
-  ctx.strokeStyle = "#caa66d";
-  ctx.lineWidth = Math.max(2, width * 6e-3);
-  ctx.beginPath();
-  ctx.moveTo(width * 0.35, height);
-  ctx.quadraticCurveTo(width * 0.53, height * 0.58, width * 0.62, 0);
-  ctx.stroke();
-  const projectedProps = props.map((prop, index) => ({
-    prop,
-    id: propIdentity(prop, index),
-    projected: project(prop.position, snapshot.cameraPosition, width, height)
-  })).sort((a, b) => b.projected.depth - a.projected.depth);
-  const propGroundAnchors = [];
-  for (const { prop, id } of projectedProps) {
-    const projected = drawProp(ctx, prop, snapshot.cameraPosition, width, height);
-    propGroundAnchors.push({
-      id,
-      kind: prop.kind,
-      groundY: projected.groundY,
-      depth: projected.depth,
-      visible: projected.visible
-    });
+function normalizeWeights(weights) {
+  const total = weights.reduce((sum, value) => sum + Math.max(0, value), 0);
+  if (total <= 0) {
+    return [1, 0, 0, 0];
   }
-  let characterProjection;
-  let modelRenderable = false;
-  let fallbackProxyActive = true;
-  let skinnedVertexCount = 0;
-  let skinnedTriangleCount = 0;
-  let skinnedJointCount = 0;
-  let skinnedAnimatedNodeCount = 0;
-  let skinnedClipCount = 0;
-  let activeClipRenderable = false;
-  if (characterModel) {
-    const drawn = drawSkinnedGltfCharacter(ctx, characterModel, snapshot, width, height);
-    characterProjection = drawn.projection;
-    modelRenderable = true;
-    fallbackProxyActive = false;
-    skinnedVertexCount = characterModel.vertexCount;
-    skinnedTriangleCount = characterModel.triangleCount;
-    skinnedJointCount = characterModel.jointCount;
-    skinnedAnimatedNodeCount = characterModel.animatedNodeCount;
-    skinnedClipCount = characterModel.clipCount;
-    activeClipRenderable = drawn.sample.activeClipRenderable;
-  } else {
-    characterProjection = drawCharacter(
-      ctx,
-      snapshot.characterPosition,
-      snapshot.cameraPosition,
-      width,
-      height,
-      snapshot.clipTimeMs / 900,
-      snapshot.headLook
-    );
+  return weights.map((value) => Math.max(0, value) / total);
+}
+function deriveBounds(vertices) {
+  const min = [Infinity, Infinity, Infinity];
+  const max = [-Infinity, -Infinity, -Infinity];
+  for (const vertex of vertices) {
+    for (let axis = 0; axis < 3; axis += 1) {
+      min[axis] = Math.min(min[axis], vertex[axis]);
+      max[axis] = Math.max(max[axis], vertex[axis]);
+    }
+  }
+  if (!Number.isFinite(min[0])) {
+    return { min: [0, 0, 0], max: [0, 1, 0], size: [1, 1, 1] };
   }
   return {
-    characterGroundY: characterProjection.groundY,
-    characterVisible: characterProjection.visible,
-    modelLoaded: Boolean(characterModel),
-    modelRenderable,
-    fallbackProxyActive,
-    skinnedVertexCount,
-    skinnedTriangleCount,
-    skinnedJointCount,
-    skinnedAnimatedNodeCount,
-    skinnedClipCount,
-    activeClipRenderable,
-    propGroundAnchors
+    min,
+    max,
+    size: [max[0] - min[0], max[1] - min[1], max[2] - min[2]]
   };
 }
-function resolveCharacterModel(options) {
-  try {
-    return createAnimatedGltfModel(
-      options.modelAsset ?? options.animationAdventure?.modelAsset,
-      options.clipAssets ?? options.animationAdventure?.clipAssets ?? []
-    );
-  } catch {
+function sampleChannel(channel, sampler, document, timeSeconds) {
+  const input = readAccessor(document, sampler.input);
+  const output = readAccessor(document, sampler.output);
+  if (!input.length || !output.length) {
     return null;
   }
+  const duration = input.at(-1) || 0;
+  const sampleTime = duration > 0 ? timeSeconds % duration : 0;
+  let frame = 0;
+  while (frame < input.length - 2 && sampleTime > input[frame + 1]) {
+    frame += 1;
+  }
+  const start = input[frame] ?? 0;
+  const end = input[frame + 1] ?? start;
+  const t = end > start ? (sampleTime - start) / (end - start) : 0;
+  const startValue = Array.isArray(output[frame]) ? output[frame] : [output[frame] ?? 0];
+  const endValue = Array.isArray(output[frame + 1]) ? output[frame + 1] : startValue;
+  return channel.target.path === "rotation" ? nlerpQuaternion(startValue, endValue, t) : lerpArray(startValue, endValue, t);
 }
-function createAnimatedSceneRenderer(options = {}) {
-  const canvas = resolveCanvas(options.canvas);
-  const ctx = canvas.getContext?.("2d");
-  if (!ctx) {
-    throw new Error("Animated scene renderer requires a 2D canvas context.");
+function rootTranslationDistance(clipPayload) {
+  if (!clipPayload) {
+    return 0;
   }
-  const route = [...options.route ?? options.animationAdventure?.route ?? []];
-  const beats = [...options.beats ?? options.animationAdventure?.beats ?? []].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
-  const props = [...options.props ?? options.animationAdventure?.props ?? []];
-  const clipAssets = options.clipAssets ?? options.animationAdventure?.clipAssets ?? [];
-  const clipProfiles = resolveClipProfiles(clipAssets);
-  const beatTimeline = buildBeatTimeline(beats, route, clipProfiles);
-  const characterModel = resolveCharacterModel(options);
-  let camera = {
-    ...DEFAULT_CAMERA,
-    ...definedCameraOverrides(options.camera ?? options.animationAdventure?.camera)
-  };
-  const loopDurationMs = Math.max(beatTimeline.at(-1)?.endMs ?? durationFromBeats(beats), 1);
-  const movementWarnings = beatTimeline.flatMap((entry) => entry.warnings);
-  const requestFrame = options.requestAnimationFrame ?? globalThis.requestAnimationFrame?.bind(globalThis);
-  const cancelFrame = options.cancelAnimationFrame ?? globalThis.cancelAnimationFrame?.bind(globalThis);
-  let frameHandle;
-  let running = false;
-  let frame = 0;
-  let startedAtMs;
-  let lastTimestamp;
-  let pendingCameraControl = null;
-  let activeCameraControl = false;
-  let headLookWeight = 0;
-  let cameraPosition = route[0] ? [
-    route[0].position[0] + (camera.offset?.[0] ?? 0),
-    route[0].position[1] + (camera.offset?.[1] ?? 0),
-    route[0].position[2] + (camera.offset?.[2] ?? 0)
-  ] : [0, 2.4, 5.5];
-  let cameraRigFrame = resolveCameraRigFrame({
-    viewMode: "editor",
-    anchors: {
-      target: route[0]?.position ? [...route[0].position] : [0, 0, 0],
-      head: route[0]?.position ? [route[0].position[0], route[0].position[1] + 1.65, route[0].position[2]] : [0, 1.65, 0],
-      forward: [0, 0, -1]
-    },
-    camera: {
-      id: "animation-adventure",
-      transform: {
-        position: [...cameraPosition],
-        target: route[0]?.position ? [...route[0].position] : [0, 0, 0]
-      }
-    },
-    constraints: camera.constraints
-  });
-  let snapshot = {
-    frame,
-    running,
-    activeClipId: beats[0]?.clipId ?? "",
-    activeBeatId: beats[0]?.id ?? "",
-    activeMovementMode: beatTimeline[0]?.movementType ?? "stationary",
-    blendProgress: 0,
-    clipTimeMs: 0,
-    characterPosition: route[0]?.position ? [...route[0].position] : [0, 0, 0],
-    cameraPosition: [...cameraPosition],
-    cameraViewMode: resolveCameraViewMode(camera),
-    cameraTransform: cameraRigFrame.transform,
-    targetDistance: cameraRigFrame.targetDistance,
-    headLook: cameraRigFrame.headLook,
-    characterGroundY: 0,
-    characterVisible: false,
-    modelLoaded: Boolean(characterModel),
-    modelRenderable: false,
-    fallbackProxyActive: true,
-    skinnedVertexCount: characterModel?.vertexCount ?? 0,
-    skinnedTriangleCount: characterModel?.triangleCount ?? 0,
-    skinnedJointCount: characterModel?.jointCount ?? 0,
-    skinnedAnimatedNodeCount: characterModel?.animatedNodeCount ?? 0,
-    skinnedClipCount: characterModel?.clipCount ?? 0,
-    activeClipRenderable: false,
-    propGroundAnchors: [],
-    movementValidation: {
-      status: movementWarnings.length ? "warning" : "passed",
-      warnings: movementWarnings,
-      activeBeatId: beats[0]?.id ?? "",
-      activeClipId: beats[0]?.clipId ?? "",
-      motionMode: beatTimeline[0]?.movementType ?? "stationary",
-      rootMotionSource: beatTimeline[0]?.movementProfile?.motionMode ?? "none",
-      expectedSpeed: beatTimeline[0]?.expectedSpeed ?? 0,
-      actualSpeed: beatTimeline[0]?.actualSpeed ?? 0,
-      movementDistance: beatTimeline[0]?.movementDistance ?? 0,
-      loopCount: beatTimeline[0]?.loopCount ?? 1,
-      footSlideWarning: beatTimeline[0]?.footSlideWarning ?? null
-    },
-    frameState: "initialized"
-  };
-  function renderOnce(timestamp = nowMs()) {
-    if (startedAtMs === void 0) {
-      startedAtMs = timestamp;
+  let distance = 0;
+  for (const channel of clipPayload.animation.channels ?? []) {
+    if (channel.target?.path !== "translation") {
+      continue;
     }
-    const elapsedMs = Math.max(0, timestamp - startedAtMs);
-    const loopTimeMs = elapsedMs % loopDurationMs;
-    const frameTimeMs = lastTimestamp === void 0 ? 16.67 : Math.max(0, timestamp - lastTimestamp);
-    lastTimestamp = timestamp;
-    frame += 1;
-    const timelineEntry = resolveTimelineBeat(beatTimeline, loopTimeMs);
-    const fallbackBeat = resolveBeat(beats, loopTimeMs);
-    const beat = timelineEntry?.beat ?? fallbackBeat.beat;
-    const beatTimeMs = timelineEntry ? loopTimeMs - timelineEntry.startMs : fallbackBeat.beatTimeMs;
-    const durationMs = timelineEntry?.durationMs ?? fallbackBeat.durationMs;
-    const blend = beat?.blend ?? { inMs: 0, outMs: 0 };
-    const blendIn = blend.inMs > 0 ? clamp01(beatTimeMs / blend.inMs) : 1;
-    const blendOut = blend.outMs > 0 ? clamp01((durationMs - beatTimeMs) / blend.outMs) : 1;
-    const blendProgress = clamp01(Math.min(blendIn, blendOut));
-    const characterPosition = timelineEntry ? resolveTimelinePosition(timelineEntry, beatTimeMs) : resolveRoutePosition(route, loopTimeMs);
-    const characterForward = timelineEntry ? resolveTimelineForward(timelineEntry) : resolveRouteForward(route, loopTimeMs);
-    const headAnchor = camera.headBoneAvailable === false ? void 0 : [
-      characterPosition[0],
-      characterPosition[1] + (camera.headHeight ?? 1.65),
-      characterPosition[2]
-    ];
-    const lookAheadTimeMs = (loopTimeMs + camera.lookAheadMs) % loopDurationMs;
-    const lookAheadEntry = resolveTimelineBeat(beatTimeline, lookAheadTimeMs);
-    const lookAheadPosition = lookAheadEntry ? resolveTimelinePosition(lookAheadEntry, lookAheadTimeMs - lookAheadEntry.startMs) : resolveRoutePosition(route, lookAheadTimeMs);
-    const desiredCamera = [
-      lookAheadPosition[0] + (camera.offset?.[0] ?? 0),
-      lookAheadPosition[1] + (camera.offset?.[1] ?? 0),
-      lookAheadPosition[2] + (camera.offset?.[2] ?? 0)
-    ];
-    const smoothing = bezierY(camera.cubicBezier, clamp01(frameTimeMs / Math.max(1, camera.lagMs)));
-    cameraPosition = lerp3(cameraPosition, desiredCamera, smoothing);
-    const cameraViewMode = resolveCameraViewMode(camera);
-    const rigViewMode = cameraViewMode === "spectator" ? "editor" : cameraViewMode;
-    cameraRigFrame = resolveCameraRigFrame({
-      viewMode: rigViewMode,
-      anchors: {
-        target: characterPosition,
-        ...headAnchor ? { head: headAnchor } : {},
-        forward: characterForward
-      },
-      camera: {
-        id: "animation-adventure",
-        transform: {
-          position: [...cameraPosition],
-          target: lookAheadPosition
-        }
-      },
-      constraints: camera.constraints,
-      control: pendingCameraControl,
-      activeControl: activeCameraControl
-    });
-    if (activeCameraControl && cameraRigFrame.headLook.status === "active") {
-      headLookWeight = cameraRigFrame.headLook.weight;
-    } else {
-      const returnMs = Math.max(1, camera.headLook?.returnMs ?? DEFAULT_CAMERA.headLook.returnMs);
-      headLookWeight = lerp2(headLookWeight, 0, clamp01(frameTimeMs / returnMs));
+    const nodeName = clipPayload.document.json.nodes?.[channel.target.node]?.name ?? "";
+    if (!/(^|:)Hips$/u.test(nodeName) && nodeName !== "mixamorigHips") {
+      continue;
     }
-    const headLook = {
-      ...cameraRigFrame.headLook,
-      status: cameraRigFrame.headLook.status === "unavailable" ? "unavailable" : headLookWeight > 1e-3 && !activeCameraControl ? "returning" : cameraRigFrame.headLook.status,
-      weight: headLookWeight
-    };
-    cameraPosition = [...cameraRigFrame.transform.position];
-    pendingCameraControl = null;
-    activeCameraControl = false;
-    snapshot = {
-      frame,
-      running,
-      activeClipId: beat?.clipId ?? "",
-      activeBeatId: beat?.id ?? "",
-      activeMovementMode: timelineEntry?.movementType ?? "stationary",
-      blendProgress,
-      clipTimeMs: beatTimeMs,
-      characterPosition,
-      cameraPosition: [...cameraPosition],
-      cameraViewMode,
-      cameraTransform: cameraRigFrame.transform,
-      targetDistance: cameraRigFrame.targetDistance,
-      headLook,
-      characterGroundY: 0,
-      characterVisible: false,
-      modelLoaded: Boolean(characterModel),
-      modelRenderable: false,
-      fallbackProxyActive: true,
-      skinnedVertexCount: characterModel?.vertexCount ?? 0,
-      skinnedTriangleCount: characterModel?.triangleCount ?? 0,
-      skinnedJointCount: characterModel?.jointCount ?? 0,
-      skinnedAnimatedNodeCount: characterModel?.animatedNodeCount ?? 0,
-      skinnedClipCount: characterModel?.clipCount ?? 0,
-      activeClipRenderable: false,
-      propGroundAnchors: [],
-      movementValidation: {
-        status: movementWarnings.length ? "warning" : "passed",
-        warnings: [...movementWarnings],
-        activeBeatId: beat?.id ?? "",
-        activeClipId: beat?.clipId ?? "",
-        motionMode: timelineEntry?.movementType ?? "stationary",
-        rootMotionSource: timelineEntry?.movementProfile?.motionMode ?? "none",
-        expectedSpeed: timelineEntry?.expectedSpeed ?? 0,
-        actualSpeed: timelineEntry?.actualSpeed ?? 0,
-        movementDistance: timelineEntry?.movementDistance ?? 0,
-        loopCount: timelineEntry?.loopCount ?? 1,
-        footSlideWarning: timelineEntry?.footSlideWarning ?? null
-      },
-      frameState: running ? "running" : "rendered-once"
-    };
-    const visibility = renderScene(canvas, ctx, snapshot, props, characterModel);
-    snapshot = {
-      ...snapshot,
-      ...visibility
-    };
-    return snapshot;
+    const sampler = clipPayload.animation.samplers?.[channel.sampler];
+    const output = sampler ? readAccessor(clipPayload.document, sampler.output) : [];
+    if (output.length < 2) {
+      continue;
+    }
+    const start = Array.isArray(output[0]) ? output[0] : [0, 0, 0];
+    const end = Array.isArray(output.at(-1)) ? output.at(-1) : start;
+    distance = Math.max(distance, Math.hypot((end[0] ?? 0) - (start[0] ?? 0), (end[2] ?? 0) - (start[2] ?? 0)));
   }
-  function tick(timestamp) {
-    if (!running) {
-      return;
+  return distance;
+}
+function createClipPayload(clipRef) {
+  const document = parseGlb(clipRef?.asset);
+  const animation = document?.json.animations?.[0];
+  if (!document || !animation) {
+    return null;
+  }
+  const nodeNames = /* @__PURE__ */ new Set();
+  let durationSeconds = 0;
+  for (const channel of animation.channels ?? []) {
+    const nodeName = document.json.nodes?.[channel.target?.node]?.name;
+    if (nodeName) {
+      nodeNames.add(nodeName);
     }
-    renderOnce(timestamp);
-    if (running && requestFrame) {
-      frameHandle = requestFrame(tick);
+    const sampler = animation.samplers?.[channel.sampler];
+    const input = sampler ? readAccessor(document, sampler.input) : [];
+    durationSeconds = Math.max(durationSeconds, input.at(-1) ?? 0);
+  }
+  return {
+    id: clipRef.id,
+    document,
+    animation,
+    durationSeconds,
+    nodeNames
+  };
+}
+function sampleClipOverrides(clipPayload, timeSeconds) {
+  const overrides = /* @__PURE__ */ new Map();
+  if (!clipPayload) {
+    return overrides;
+  }
+  for (const channel of clipPayload.animation.channels ?? []) {
+    const targetNode = clipPayload.document.json.nodes?.[channel.target?.node];
+    const sampler = clipPayload.animation.samplers?.[channel.sampler];
+    if (!targetNode?.name || !sampler) {
+      continue;
+    }
+    const value = sampleChannel(channel, sampler, clipPayload.document, timeSeconds);
+    if (!value) {
+      continue;
     }
+    const existing = overrides.get(targetNode.name) ?? {};
+    overrides.set(targetNode.name, {
+      ...existing,
+      [channel.target.path]: value
+    });
+  }
+  return overrides;
+}
+function createAnimatedGltfModel(modelAsset, clipRefs = []) {
+  const document = parseGlb(modelAsset);
+  if (!document) {
+    return null;
+  }
+  const nodes = document.json.nodes ?? [];
+  const meshNodeIndex = nodes.findIndex((node) => node.mesh !== void 0 && node.skin !== void 0);
+  const meshNode = nodes[meshNodeIndex];
+  const mesh = document.json.meshes?.[meshNode?.mesh];
+  const primitive = mesh?.primitives?.find((candidate) => candidate.attributes?.POSITION !== void 0);
+  const skin = document.json.skins?.[meshNode?.skin];
+  if (!meshNode || !primitive || !skin) {
+    return null;
   }
+  const positions = readAccessor(document, primitive.attributes.POSITION);
+  const normals = primitive.attributes.NORMAL === void 0 ? [] : readAccessor(document, primitive.attributes.NORMAL);
+  const texcoords = primitive.attributes.TEXCOORD_0 === void 0 ? [] : readAccessor(document, primitive.attributes.TEXCOORD_0);
+  const joints = primitive.attributes.JOINTS_0 === void 0 ? positions.map(() => [0, 0, 0, 0]) : readAccessor(document, primitive.attributes.JOINTS_0);
+  const weights = primitive.attributes.WEIGHTS_0 === void 0 ? positions.map(() => [1, 0, 0, 0]) : readAccessor(document, primitive.attributes.WEIGHTS_0).map(normalizeWeights);
+  const indices = primitive.indices === void 0 ? positions.map((_, index) => index) : readAccessor(document, primitive.indices);
+  const inverseBindMatrices = skin.inverseBindMatrices === void 0 ? skin.joints.map(() => identityMatrix()) : readMatrices(document, skin.inverseBindMatrices);
+  const clips = clipRefs.map(createClipPayload).filter(Boolean);
+  const bindWorldMatrices = computeWorldMatrices(nodes);
+  const bindVertices = skinVertices({
+    positions,
+    joints,
+    weights,
+    skin,
+    inverseBindMatrices,
+    worldMatrices: bindWorldMatrices
+  });
+  const bounds = deriveBounds(bindVertices);
+  const materialTextureMetadata = extractMaterialTextureMetadata(document, primitive);
+  const clipRootMotionDistances = new Map(clips.map((clip) => [clip.id, rootTranslationDistance(clip)]));
   return {
-    start() {
-      if (running) {
-        return;
-      }
-      running = true;
-      snapshot = { ...snapshot, running: true, frameState: "running" };
-      if (requestFrame) {
-        frameHandle = requestFrame(tick);
-      } else {
-        renderOnce();
-      }
-    },
-    resize(width, height, devicePixelRatio = 1) {
-      const ratio = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
-      canvas.width = Math.max(1, Math.floor(width * ratio));
-      canvas.height = Math.max(1, Math.floor(height * ratio));
-      if (canvas.style) {
-        canvas.style.width = `${width}px`;
-        canvas.style.height = `${height}px`;
-      }
-      const visibility = renderScene(canvas, ctx, snapshot, props, characterModel);
-      snapshot = {
-        ...snapshot,
-        ...visibility
-      };
-    },
-    renderOnce,
-    getSnapshot() {
+    name: mesh.name ?? meshNode.name ?? "skinned-gltf-model",
+    vertexCount: positions.length,
+    triangleCount: Math.floor(indices.length / 3),
+    jointCount: skin.joints.length,
+    animatedNodeCount: new Set(clips.flatMap((clip) => [...clip.nodeNames])).size,
+    clipCount: clips.length,
+    materialTextureMetadata,
+    textureCount: materialTextureMetadata.textureCount,
+    materialCount: materialTextureMetadata.materialCount,
+    hasBaseColorTexture: materialTextureMetadata.hasBaseColorTexture,
+    hasNormalTexture: materialTextureMetadata.hasNormalTexture,
+    hasUv: texcoords.length === positions.length,
+    hasNormals: normals.length === positions.length,
+    professionalRenderable: materialTextureMetadata.hasBaseColorTexture && materialTextureMetadata.hasNormalTexture && materialTextureMetadata.missingTextureReferences.length === 0 && texcoords.length === positions.length && normals.length === positions.length && skin.joints.length > 0,
+    clips,
+    sample(activeClipId, clipTimeMs) {
+      const clip = clips.find((candidate) => candidate.id === activeClipId) ?? clips[0] ?? null;
+      const overrides = sampleClipOverrides(clip, Math.max(0, clipTimeMs) / 1e3);
+      const worldMatrices = computeWorldMatrices(nodes, overrides);
+      const vertices = skinVertices({
+        positions,
+        joints,
+        weights,
+        skin,
+        inverseBindMatrices,
+        worldMatrices
+      });
       return {
-        ...snapshot,
-        characterPosition: [...snapshot.characterPosition],
-        cameraPosition: [...snapshot.cameraPosition],
-        cameraTransform: {
-          position: [...snapshot.cameraTransform.position],
-          target: [...snapshot.cameraTransform.target],
-          up: [...snapshot.cameraTransform.up]
-        },
-        headLook: {
-          ...snapshot.headLook,
-          target: [...snapshot.headLook.target]
-        },
-        movementValidation: {
-          ...snapshot.movementValidation,
-          warnings: [...snapshot.movementValidation?.warnings ?? []]
-        },
-        propGroundAnchors: snapshot.propGroundAnchors.map((anchor) => ({ ...anchor }))
-      };
-    },
-    setCamera(nextCamera = {}) {
-      camera = { ...camera, ...nextCamera };
-      snapshot = {
-        ...snapshot,
-        cameraViewMode: resolveCameraViewMode(camera)
-      };
-    },
-    setCameraViewMode(viewMode) {
-      camera = { ...camera, viewMode };
-      snapshot = {
-        ...snapshot,
-        cameraViewMode: resolveCameraViewMode(camera)
+        vertices,
+        indices,
+        bounds: deriveBounds(vertices),
+        bindBounds: bounds,
+        activeClipRenderable: Boolean(clip),
+        activeClipDurationSeconds: clip?.durationSeconds ?? 0,
+        activeClipRootTranslationDistance: clipRootMotionDistances.get(clip?.id) ?? 0
       };
-    },
-    applyCameraControl(control, options2 = {}) {
-      pendingCameraControl = control;
-      activeCameraControl = options2.activeControl !== false;
-    },
-    destroy() {
-      running = false;
-      if (frameHandle !== void 0 && cancelFrame) {
-        cancelFrame(frameHandle);
-      }
-      frameHandle = void 0;
-      snapshot = { ...snapshot, running: false, frameState: "destroyed" };
     }
   };
 }
+function skinVertices({ positions, joints, weights, skin, inverseBindMatrices, worldMatrices }) {
+  return positions.map((position, vertexIndex) => {
+    const jointIndices = joints[vertexIndex] ?? [0, 0, 0, 0];
+    const jointWeights = weights[vertexIndex] ?? [1, 0, 0, 0];
+    const skinned = [0, 0, 0];
+    for (let influence = 0; influence < 4; influence += 1) {
+      const weight = jointWeights[influence] ?? 0;
+      if (weight <= 0) {
+        continue;
+      }
+      const jointNodeIndex = skin.joints[jointIndices[influence] ?? 0] ?? skin.joints[0];
+      const jointMatrix = multiplyMatrix(worldMatrices[jointNodeIndex] ?? identityMatrix(), inverseBindMatrices[jointIndices[influence] ?? 0] ?? identityMatrix());
+      const transformed = transformPoint(jointMatrix, position);
+      skinned[0] += transformed[0] * weight;
+      skinned[1] += transformed[1] * weight;
+      skinned[2] += transformed[2] * weight;
+    }
+    return skinned;
+  });
+}
 
-// src/renderer-constants.js
-var DEFAULT_CLEAR_COLOR = Object.freeze([0.07, 0.11, 0.18, 1]);
-var DEFAULT_CANVAS_SELECTOR = "canvas[data-plasius-gpu-renderer]";
-var rendererDebugOwner = "renderer";
-var rendererWorkerQueueClass = "render";
-var defaultRendererWorkerProfile = "realtime";
-var rendererRepresentationBands = Object.freeze([
-  "near",
-  "mid",
-  "far",
-  "horizon"
-]);
-var rendererAccelerationStructureUpdateClasses = Object.freeze([
-  "static",
-  "rigid-dynamic",
-  "deforming",
-  "proxy"
-]);
-var rendererRayTracingStageOrder = Object.freeze([
-  "primaryVisibility",
-  "shadowAssist",
-  "opaqueFoundation",
-  "rtDirectLighting",
-  "rtReflections",
-  "rtGlobalIllumination",
-  "denoiseTemporal",
-  "transparents",
-  "composition",
-  "present"
-]);
-var rendererWavefrontBufferSchemaVersion = 1;
-var rendererWavefrontQueuePairStrategy = "ping-pong-active-next";
-var rendererWavefrontHitTypes = Object.freeze([
-  "surface",
-  "emissive",
-  "environment",
-  "transparent",
-  "miss"
-]);
-var rendererWavefrontPassOrder = Object.freeze([
-  "generatePrimaryRays",
-  "intersectActiveQueue",
-  "resolveSurfaceRecords",
-  "accumulateTerminalRadiance",
-  "scatterContinuations",
-  "compactAndSwapQueues"
-]);
-
-// src/renderer-validation.js
-function readPositiveNumber(name, value) {
-  if (value === void 0) {
-    return void 0;
+// src/animated-scene-renderer.js
+var DEFAULT_CAMERA = Object.freeze({
+  mode: "lagged-follow",
+  viewMode: "spectator",
+  cubicBezier: [0.22, 0.61, 0.36, 1],
+  lagMs: 240,
+  lookAheadMs: 320,
+  offset: [0, 2.4, 5.5],
+  constraints: Object.freeze({
+    maxDistance: 10,
+    firstPersonHeadOffset: 0.05
+  }),
+  headLook: Object.freeze({
+    enabled: true,
+    returnMs: 240
+  })
+});
+function nowMs() {
+  return typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+}
+function clamp012(value) {
+  return Math.min(1, Math.max(0, value));
+}
+function lerp2(a, b, t) {
+  return a + (b - a) * t;
+}
+function lerp3(a, b, t) {
+  return [
+    lerp2(a[0] ?? 0, b[0] ?? 0, t),
+    lerp2(a[1] ?? 0, b[1] ?? 0, t),
+    lerp2(a[2] ?? 0, b[2] ?? 0, t)
+  ];
+}
+function normalize3(value, fallback = [0, 0, -1]) {
+  if (!Array.isArray(value) || value.length < 3) {
+    return [...fallback];
+  }
+  const vector = [
+    Number.isFinite(Number(value[0])) ? Number(value[0]) : fallback[0],
+    Number.isFinite(Number(value[1])) ? Number(value[1]) : fallback[1],
+    Number.isFinite(Number(value[2])) ? Number(value[2]) : fallback[2]
+  ];
+  const length = Math.hypot(vector[0], vector[1], vector[2]);
+  if (length <= 1e-6) {
+    return [...fallback];
+  }
+  return [vector[0] / length, vector[1] / length, vector[2] / length];
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function bezierY([, y1, , y2], t) {
+  const u = 1 - t;
+  return 3 * u * u * t * y1 + 3 * u * t * t * y2 + t * t * t;
+}
+function durationFromBeats(beats) {
+  return beats.reduce((total, beat) => total + Math.max(0, beat.durationMs ?? 0), 0);
+}
+function definedCameraOverrides(camera) {
+  if (!camera || typeof camera !== "object") {
+    return {};
+  }
+  return Object.fromEntries(Object.entries(camera).filter(([, value]) => value !== void 0));
+}
+function resolveBeat(beats, loopTimeMs) {
+  let cursor = 0;
+  for (const beat of beats) {
+    const durationMs = Math.max(1, beat.durationMs ?? 1);
+    if (loopTimeMs < cursor + durationMs) {
+      return { beat, beatTimeMs: loopTimeMs - cursor, durationMs };
+    }
+    cursor += durationMs;
+  }
+  const fallback = beats.at(-1);
+  return { beat: fallback, beatTimeMs: fallback?.durationMs ?? 0, durationMs: fallback?.durationMs ?? 1 };
+}
+function resolveRoutePosition(route, timeMs) {
+  if (!route.length) {
+    return [0, 0, 0];
+  }
+  if (route.length === 1 || timeMs <= (route[0].arriveMs ?? 0)) {
+    return [...route[0].position];
+  }
+  for (let index = 1; index < route.length; index += 1) {
+    const previous = route[index - 1];
+    const next = route[index];
+    const start = previous.arriveMs ?? 0;
+    const end = next.arriveMs ?? start + 1;
+    if (timeMs <= end) {
+      return lerp3(previous.position, next.position, clamp012((timeMs - start) / Math.max(1, end - start)));
+    }
+  }
+  return [...route.at(-1).position];
+}
+function resolveRouteForward(route, timeMs) {
+  if (route.length < 2) {
+    return [0, 0, -1];
+  }
+  let previous = route[0];
+  let next = route[1];
+  for (let index = 1; index < route.length; index += 1) {
+    next = route[index];
+    if (timeMs <= (next.arriveMs ?? 0)) {
+      previous = route[index - 1];
+      break;
+    }
+  }
+  return normalize3([
+    (next.position?.[0] ?? 0) - (previous.position?.[0] ?? 0),
+    (next.position?.[1] ?? 0) - (previous.position?.[1] ?? 0),
+    (next.position?.[2] ?? 0) - (previous.position?.[2] ?? 0)
+  ]);
+}
+function distance3(a = [0, 0, 0], b = [0, 0, 0]) {
+  return Math.hypot(
+    (b[0] ?? 0) - (a[0] ?? 0),
+    (b[1] ?? 0) - (a[1] ?? 0),
+    (b[2] ?? 0) - (a[2] ?? 0)
+  );
+}
+function movementRequirementType(requirement, beat) {
+  if (requirement?.type) {
+    return requirement.type;
+  }
+  if (beat?.kind === "locomotion") {
+    return beat?.rootMotion === "in-place" ? "stationary" : "travel";
+  }
+  if (beat?.kind === "action" || beat?.kind === "idle") {
+    return "stationary";
+  }
+  const clipId = String(beat?.clipId ?? "").toLowerCase();
+  if (/(idle|gesture|dig|plant|water|pick|serve|swing|fire|block|hoe)/iu.test(clipId)) {
+    return "stationary";
+  }
+  if (/(walk|run|jump|climb|crawl|locomotion)/iu.test(clipId)) {
+    return clipId.includes("jump") ? "jump" : "travel";
+  }
+  return beat?.pathPointId ? "travel" : "stationary";
+}
+function movementDistancePerLoop(profile = {}) {
+  profile ??= {};
+  const rootDistance = Number(profile.rootTranslationDistance ?? profile.rootTranslation?.distance ?? 0);
+  if (Number.isFinite(rootDistance) && rootDistance > 0) {
+    return rootDistance;
+  }
+  const strideLength = Number(profile.strideLength ?? profile.strideLengthMeters ?? 0);
+  if (Number.isFinite(strideLength) && strideLength > 0) {
+    return strideLength;
+  }
+  return 0;
+}
+function clipDurationMs(profile = {}, fallbackMs = 1) {
+  profile ??= {};
+  const duration = Number(profile.durationMs ?? 0);
+  return Number.isFinite(duration) && duration > 0 ? duration : Math.max(1, fallbackMs);
+}
+function profileAllowsDisplacement(profile = {}, movementType) {
+  profile ??= {};
+  if (movementType === "stationary") {
+    return profile.worldDisplacementAllowed !== true;
+  }
+  return profile.worldDisplacementAllowed === true || profile.motionMode === "root-authored" || profile.motionMode === "calibrated-in-place" || profile.motionMode === "jump";
+}
+function resolveClipProfiles(clipAssets = []) {
+  return new Map(clipAssets.map((clip) => [clip.id, clip.movementProfile ?? clip.profile ?? null]));
+}
+function buildBeatTimeline(beats, route, clipProfiles) {
+  const routePoints = new Map(route.map((point) => [point.id, point]));
+  let cursorMs = 0;
+  let routeCursor = 0;
+  let currentPosition = route[0]?.position ? [...route[0].position] : [0, 0, 0];
+  return beats.map((beat) => {
+    const requirement = beat.movementRequirement ?? beat.movement ?? null;
+    const movementType = movementRequirementType(requirement, beat);
+    const movesThroughWorld = movementType === "travel" || movementType === "jump" || movementType === "root-authored";
+    const explicitTargetPoint = beat.pathPointId ? routePoints.get(beat.pathPointId) : null;
+    const inferredTargetPoint = movesThroughWorld ? route[Math.min(route.length - 1, routeCursor + 1)] : null;
+    const targetPoint = explicitTargetPoint ?? inferredTargetPoint ?? null;
+    const targetPosition = targetPoint?.position ? [...targetPoint.position] : [...currentPosition];
+    const startPosition = [...currentPosition];
+    const endPosition = movesThroughWorld ? targetPosition : [...currentPosition];
+    const segmentDistance = Number(requirement?.distance ?? distance3(startPosition, endPosition));
+    const profile = clipProfiles.get(beat.clipId) ?? null;
+    const distancePerLoop = movementDistancePerLoop(profile);
+    const loopCount = movesThroughWorld && distancePerLoop > 0 ? Math.max(1, Math.ceil(segmentDistance / distancePerLoop)) : 1;
+    const derivedDurationMs = movesThroughWorld && distancePerLoop > 0 ? loopCount * clipDurationMs(profile, beat.durationMs) : Math.max(1, beat.durationMs ?? 1);
+    const durationMs = Math.max(1, beat.validatedDurationMs ?? requirement?.validatedDurationMs ?? derivedDurationMs);
+    const expectedSpeed = Number(profile?.expectedSpeed ?? (durationMs > 0 ? segmentDistance / (durationMs / 1e3) : 0));
+    const actualSpeed = durationMs > 0 ? segmentDistance / (durationMs / 1e3) : 0;
+    const warnings = [];
+    if (movesThroughWorld && !profileAllowsDisplacement(profile, movementType)) {
+      warnings.push(`clip '${beat.clipId}' does not allow ${movementType} displacement`);
+    }
+    if (movesThroughWorld && distancePerLoop <= 0 && profile?.motionMode !== "root-authored") {
+      warnings.push(`clip '${beat.clipId}' has no root or calibrated stride distance`);
+    }
+    if (movementType === "stationary" && profile?.worldDisplacementAllowed === true) {
+      warnings.push(`stationary beat '${beat.id}' uses a displacement-capable clip`);
+    }
+    const entry = {
+      beat,
+      startMs: cursorMs,
+      endMs: cursorMs + durationMs,
+      durationMs,
+      startPosition,
+      endPosition,
+      movementType,
+      movementProfile: profile,
+      movementDistance: segmentDistance,
+      distancePerLoop,
+      loopCount,
+      expectedSpeed,
+      actualSpeed,
+      footSlideWarning: Number(profile?.footSlideTolerance ?? 0) < 0 ? "invalid-foot-slide-tolerance" : null,
+      warnings
+    };
+    cursorMs = entry.endMs;
+    currentPosition = [...endPosition];
+    if (targetPoint) {
+      const nextRouteIndex = route.findIndex((point) => point.id === targetPoint.id);
+      if (nextRouteIndex >= 0) {
+        routeCursor = nextRouteIndex;
+      }
+    }
+    return entry;
+  });
+}
+function resolveTimelineBeat(timeline, loopTimeMs) {
+  if (!timeline.length) {
+    return null;
   }
-  if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
-    throw new Error(`${name} must be a finite number greater than zero.`);
+  return timeline.find((entry) => loopTimeMs < entry.endMs) ?? timeline.at(-1);
+}
+function resolveTimelinePosition(entry, beatTimeMs) {
+  if (!entry) {
+    return [0, 0, 0];
   }
-  return value;
+  if (entry.movementType !== "travel" && entry.movementType !== "jump" && entry.movementType !== "root-authored") {
+    return [...entry.startPosition];
+  }
+  return lerp3(entry.startPosition, entry.endPosition, clamp012(beatTimeMs / Math.max(1, entry.durationMs)));
 }
-function readPositiveInteger(name, value) {
-  if (!Number.isInteger(value) || value <= 0) {
-    throw new Error(`${name} must be a positive integer.`);
+function resolveTimelineForward(entry) {
+  if (!entry) {
+    return [0, 0, -1];
   }
-  return value;
+  return normalize3([
+    (entry.endPosition[0] ?? 0) - (entry.startPosition[0] ?? 0),
+    (entry.endPosition[1] ?? 0) - (entry.startPosition[1] ?? 0),
+    (entry.endPosition[2] ?? 0) - (entry.startPosition[2] ?? 0)
+  ]);
 }
-function readNonNegativeInteger(name, value) {
-  if (!Number.isInteger(value) || value < 0) {
-    throw new Error(`${name} must be a non-negative integer.`);
+function resolveCameraViewMode(camera) {
+  if (camera?.mode === "lagged-follow") {
+    return camera.viewMode ?? "spectator";
   }
-  return value;
+  return camera?.viewMode ?? camera?.mode ?? "spectator";
 }
-function assertRendererIdentifier(name, value) {
-  if (typeof value !== "string" || value.trim().length === 0) {
-    throw new Error(`${name} must be a non-empty string.`);
+function resolveCanvas2(canvas) {
+  if (typeof canvas === "string") {
+    const found = globalThis.document?.querySelector?.(canvas);
+    if (!found) {
+      throw new Error(`Animated scene canvas '${canvas}' was not found.`);
+    }
+    return found;
   }
-  return value.trim();
+  if (!canvas) {
+    throw new Error("Animated scene renderer requires a canvas.");
+  }
+  return canvas;
 }
-
-// src/renderer-webgpu-runtime.js
-function clamp012(value) {
-  return Math.min(1, Math.max(0, value));
+function project(position, cameraPosition, width, height) {
+  const x = position[0] - cameraPosition[0];
+  const depth = Math.max(0.2, cameraPosition[2] - (position[2] ?? 0));
+  const scale2 = clamp(34 + 150 / (depth + 1.2), 34, 104);
+  const groundY = height * 0.82 - depth * height * 0.045 - (position[1] ?? 0) * scale2;
+  return {
+    x: width * 0.5 + x * scale2,
+    y: groundY,
+    groundY,
+    scale: scale2,
+    depth,
+    visible: groundY > -height * 0.2 && groundY < height * 1.18
+  };
 }
-function parseHexChannel(channel) {
-  return parseInt(channel, 16) / 255;
+function propIdentity(prop, index) {
+  return prop.id ?? `${prop.kind}-${index}`;
 }
-function normalizeColor(value) {
-  if (Array.isArray(value)) {
-    const [r = 0, g = 0, b = 0, a = 1] = value;
-    return [clamp012(Number(r) || 0), clamp012(Number(g) || 0), clamp012(Number(b) || 0), clamp012(Number(a) || 0)];
-  }
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    if (/^#[0-9a-f]{3}$/i.test(trimmed)) {
-      const r = trimmed[1];
-      const g = trimmed[2];
-      const b = trimmed[3];
-      return [
-        parseHexChannel(r + r),
-        parseHexChannel(g + g),
-        parseHexChannel(b + b),
-        1
-      ];
+function drawGroundShadow(ctx, scale2) {
+  ctx.fillStyle = "rgba(44, 38, 28, 0.18)";
+  ctx.fillRect(-scale2 * 0.36, -scale2 * 0.035, scale2 * 0.72, scale2 * 0.07);
+}
+function drawProp(ctx, prop, cameraPosition, width, height) {
+  const projected = project(prop.position, cameraPosition, width, height);
+  const { x, y, scale: scale2 } = projected;
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.lineWidth = Math.max(1, scale2 * 0.04);
+  if (prop.kind === "crop-row") {
+    ctx.fillStyle = "#8b633f";
+    ctx.fillRect(-scale2 * 1.05, -scale2 * 0.08, scale2 * 2.1, scale2 * 0.16);
+    ctx.fillStyle = "#6f4a30";
+    ctx.fillRect(-scale2 * 0.92, -scale2 * 0.035, scale2 * 1.84, scale2 * 0.07);
+    ctx.strokeStyle = "#4f6f32";
+    ctx.beginPath();
+    ctx.moveTo(-scale2 * 0.8, 0);
+    ctx.lineTo(scale2 * 0.8, 0);
+    ctx.stroke();
+    ctx.fillStyle = "#6f9f43";
+    for (let i = -3; i <= 3; i += 1) {
+      ctx.fillRect(i * scale2 * 0.22, -scale2 * 0.18, scale2 * 0.06, scale2 * 0.2);
     }
-    if (/^#[0-9a-f]{6}$/i.test(trimmed)) {
-      return [
-        parseHexChannel(trimmed.slice(1, 3)),
-        parseHexChannel(trimmed.slice(3, 5)),
-        parseHexChannel(trimmed.slice(5, 7)),
-        1
-      ];
+  } else if (prop.kind === "fence-segment") {
+    ctx.strokeStyle = "#896b4d";
+    ctx.beginPath();
+    ctx.moveTo(-scale2 * 0.5, 0);
+    ctx.lineTo(scale2 * 0.5, 0);
+    ctx.moveTo(-scale2 * 0.35, -scale2 * 0.25);
+    ctx.lineTo(-scale2 * 0.35, scale2 * 0.1);
+    ctx.moveTo(scale2 * 0.35, -scale2 * 0.25);
+    ctx.lineTo(scale2 * 0.35, scale2 * 0.1);
+    ctx.stroke();
+  } else if (prop.kind === "cart") {
+    drawGroundShadow(ctx, scale2);
+    ctx.fillStyle = "#7b5238";
+    ctx.fillRect(-scale2 * 0.52, -scale2 * 0.38, scale2 * 1.04, scale2 * 0.36);
+    ctx.fillStyle = "#a4774c";
+    ctx.fillRect(-scale2 * 0.44, -scale2 * 0.32, scale2 * 0.88, scale2 * 0.08);
+    ctx.fillStyle = "#25201c";
+    ctx.beginPath();
+    ctx.arc(-scale2 * 0.32, scale2 * 0.02, scale2 * 0.1, 0, Math.PI * 2);
+    ctx.arc(scale2 * 0.32, scale2 * 0.02, scale2 * 0.1, 0, Math.PI * 2);
+    ctx.fill();
+  } else if (prop.kind === "small-tree") {
+    drawGroundShadow(ctx, scale2);
+    ctx.fillStyle = "#5b3b24";
+    ctx.fillRect(-scale2 * 0.07, -scale2 * 0.56, scale2 * 0.14, scale2 * 0.56);
+    ctx.fillStyle = "#2f6d3b";
+    ctx.beginPath();
+    ctx.arc(-scale2 * 0.16, -scale2 * 0.72, scale2 * 0.25, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = "#3f8746";
+    ctx.beginPath();
+    ctx.arc(scale2 * 0.13, -scale2 * 0.76, scale2 * 0.28, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.fillStyle = "#4f9a50";
+    ctx.beginPath();
+    ctx.arc(0, -scale2 * 0.98, scale2 * 0.26, 0, Math.PI * 2);
+    ctx.fill();
+  } else {
+    drawGroundShadow(ctx, scale2);
+    ctx.fillStyle = prop.kind === "crate" ? "#9a6a3d" : "#d0c39f";
+    ctx.fillRect(-scale2 * 0.2, -scale2 * 0.32, scale2 * 0.4, scale2 * 0.32);
+    if (prop.kind === "crate") {
+      ctx.strokeStyle = "#6e4829";
+      ctx.beginPath();
+      ctx.moveTo(-scale2 * 0.2, -scale2 * 0.16);
+      ctx.lineTo(scale2 * 0.2, -scale2 * 0.16);
+      ctx.moveTo(0, -scale2 * 0.32);
+      ctx.lineTo(0, 0);
+      ctx.stroke();
     }
   }
-  return [...DEFAULT_CLEAR_COLOR];
+  ctx.restore();
+  return projected;
 }
-function now() {
-  if (typeof performance !== "undefined" && typeof performance.now === "function") {
-    return performance.now();
+function drawCharacter(ctx, characterPosition, cameraPosition, width, height, gaitPhase, headLook) {
+  const projected = project(characterPosition, cameraPosition, width, height);
+  const { x, y, scale: scale2 } = projected;
+  const stride = Math.sin(gaitPhase * Math.PI * 2);
+  const headYaw = (headLook?.yaw ?? 0) * (headLook?.weight ?? 0);
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.lineWidth = Math.max(2, scale2 * 0.05);
+  ctx.lineCap = "round";
+  drawGroundShadow(ctx, scale2);
+  ctx.strokeStyle = "#4c2f25";
+  ctx.beginPath();
+  ctx.moveTo(-scale2 * 0.12, -scale2 * 0.34);
+  ctx.lineTo(-scale2 * (0.18 + stride * 0.04), -scale2 * 0.02);
+  ctx.moveTo(scale2 * 0.12, -scale2 * 0.34);
+  ctx.lineTo(scale2 * (0.18 - stride * 0.04), -scale2 * 0.02);
+  ctx.stroke();
+  ctx.fillStyle = "#6f8f62";
+  ctx.beginPath();
+  ctx.moveTo(-scale2 * 0.3, -scale2 * 0.86);
+  ctx.lineTo(scale2 * 0.3, -scale2 * 0.86);
+  ctx.lineTo(scale2 * 0.42, -scale2 * 0.24);
+  ctx.lineTo(-scale2 * 0.42, -scale2 * 0.24);
+  ctx.lineTo(-scale2 * 0.3, -scale2 * 0.86);
+  ctx.fill();
+  ctx.fillStyle = "#d8b18c";
+  ctx.beginPath();
+  ctx.arc(0, -scale2 * 1.16, scale2 * 0.18, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = "#5a3a2b";
+  ctx.fillRect(-scale2 * 0.2, -scale2 * 1.28, scale2 * 0.4, scale2 * 0.16);
+  ctx.fillRect(-scale2 * 0.23, -scale2 * 1.14, scale2 * 0.1, scale2 * 0.28);
+  ctx.fillRect(scale2 * 0.13, -scale2 * 1.14, scale2 * 0.1, scale2 * 0.28);
+  if (headLook?.status === "active" || headLook?.status === "returning") {
+    ctx.strokeStyle = "rgba(255, 246, 210, 0.74)";
+    ctx.lineWidth = Math.max(1, scale2 * 0.025);
+    ctx.beginPath();
+    ctx.moveTo(0, -scale2 * 1.16);
+    ctx.lineTo(Math.sin(headYaw) * scale2 * 0.32, -scale2 * 1.16 - scale2 * 0.08);
+    ctx.stroke();
   }
-  return Date.now();
+  ctx.strokeStyle = "#6b4935";
+  ctx.beginPath();
+  ctx.moveTo(-scale2 * 0.24, -scale2 * 0.76);
+  ctx.lineTo(-scale2 * (0.46 + stride * 0.04), -scale2 * (0.5 + stride * 0.06));
+  ctx.moveTo(scale2 * 0.24, -scale2 * 0.76);
+  ctx.lineTo(scale2 * (0.46 - stride * 0.04), -scale2 * (0.5 - stride * 0.06));
+  ctx.stroke();
+  ctx.fillStyle = "#d6c09a";
+  ctx.fillRect(-scale2 * 0.16, -scale2 * 0.86, scale2 * 0.32, scale2 * 0.18);
+  ctx.restore();
+  return projected;
 }
-function normalizeFrameId(value) {
-  if (typeof value !== "string" || value.trim().length === 0) {
-    throw new Error("frameIdFactory must return a non-empty string.");
-  }
-  return value.trim();
+function pointForModelVertex(vertex, projection, sample) {
+  const bounds = sample.bounds;
+  const height = Math.max(0.1, bounds.size[1] || sample.bindBounds.size[1] || 1);
+  const modelScale = projection.scale * 1.3 / height;
+  const centerX = (bounds.min[0] + bounds.max[0]) * 0.5;
+  const centerZ = (bounds.min[2] + bounds.max[2]) * 0.5;
+  return [
+    projection.x + (vertex[0] - centerX) * modelScale,
+    projection.groundY - (vertex[1] - bounds.min[1]) * modelScale + (vertex[2] - centerZ) * modelScale * 0.16
+  ];
 }
-function resolveTargetFrameTimeMs(options, event) {
-  const {
-    targetFrameTimeMs: fixedTargetFrameTimeMs,
-    targetFrameRate,
-    getTargetFrameTimeMs
-  } = options;
-  if (typeof getTargetFrameTimeMs === "function") {
-    const resolved = getTargetFrameTimeMs(event);
-    return readPositiveNumber("getTargetFrameTimeMs()", resolved);
+function modelFillForHeight(vertex, sample) {
+  const height = Math.max(0.1, sample.bounds.size[1] || 1);
+  const t = (vertex[1] - sample.bounds.min[1]) / height;
+  if (t > 0.82) {
+    return "#6d4a36";
   }
-  if (fixedTargetFrameTimeMs !== void 0) {
-    return fixedTargetFrameTimeMs;
+  if (t > 0.58) {
+    return "#d7b28f";
   }
-  if (targetFrameRate !== void 0) {
-    return 1e3 / targetFrameRate;
+  if (t > 0.25) {
+    return "#6f8f62";
   }
-  return void 0;
+  return "#5e4636";
 }
-function createRendererDebugHooks(options = {}) {
-  const {
-    debugSession,
-    targetFrameTimeMs,
-    targetFrameRate,
-    getTargetFrameTimeMs,
-    onFrameStart,
-    onFrameComplete
-  } = options;
-  if (!debugSession || typeof debugSession.recordFrame !== "function") {
-    throw new Error(
-      "debugSession must expose recordFrame(sample). Use @plasius/gpu-debug createGpuDebugSession()."
-    );
-  }
-  const fixedTargetFrameTimeMs = readPositiveNumber(
-    "targetFrameTimeMs",
-    targetFrameTimeMs
-  );
-  const fixedTargetFrameRate = readPositiveNumber(
-    "targetFrameRate",
-    targetFrameRate
-  );
-  if (fixedTargetFrameTimeMs !== void 0 && fixedTargetFrameRate !== void 0) {
-    throw new Error(
-      "Provide either targetFrameTimeMs or targetFrameRate, not both."
-    );
+function drawSkinnedGltfCharacter(ctx, model, snapshot, width, height) {
+  const projection = project(snapshot.characterPosition, snapshot.cameraPosition, width, height);
+  const sample = model.sample(snapshot.activeClipId, snapshot.clipTimeMs);
+  const maxTriangles = 12e3;
+  const triangleCount = Math.floor(sample.indices.length / 3);
+  const stride = Math.max(1, Math.ceil(triangleCount / maxTriangles));
+  const triangles = [];
+  for (let triangleIndex = 0; triangleIndex < triangleCount; triangleIndex += stride) {
+    const base = triangleIndex * 3;
+    const a = sample.vertices[sample.indices[base]];
+    const b = sample.vertices[sample.indices[base + 1]];
+    const c = sample.vertices[sample.indices[base + 2]];
+    if (!a || !b || !c) {
+      continue;
+    }
+    triangles.push({
+      a,
+      b,
+      c,
+      depth: (a[2] + b[2] + c[2]) / 3,
+      fill: modelFillForHeight(a, sample)
+    });
   }
-  if (getTargetFrameTimeMs !== void 0 && typeof getTargetFrameTimeMs !== "function") {
-    throw new Error("getTargetFrameTimeMs must be a function when provided.");
+  triangles.sort((left, right) => left.depth - right.depth);
+  ctx.save();
+  drawGroundShadow(ctx, projection.scale);
+  for (const triangle of triangles) {
+    const [ax, ay] = pointForModelVertex(triangle.a, projection, sample);
+    const [bx, by] = pointForModelVertex(triangle.b, projection, sample);
+    const [cx, cy] = pointForModelVertex(triangle.c, projection, sample);
+    ctx.fillStyle = triangle.fill;
+    ctx.beginPath();
+    ctx.moveTo(ax, ay);
+    ctx.lineTo(bx, by);
+    ctx.lineTo(cx, cy);
+    ctx.closePath?.();
+    ctx.fill();
   }
-  const resolvedOptions = {
-    targetFrameTimeMs: fixedTargetFrameTimeMs,
-    targetFrameRate: fixedTargetFrameRate,
-    getTargetFrameTimeMs
-  };
+  ctx.restore();
   return {
-    onFrameStart(event) {
-      if (typeof onFrameStart === "function") {
-        onFrameStart({
-          ...event,
-          owner: rendererDebugOwner
-        });
-      }
-    },
-    onFrameComplete(event) {
-      const resolvedTargetFrameTimeMs = resolveTargetFrameTimeMs(
-        resolvedOptions,
-        event
-      );
-      if (typeof event.frameTimeMs === "number" && Number.isFinite(event.frameTimeMs) && event.frameTimeMs > 0) {
-        debugSession.recordFrame({
-          frameId: event.frameId,
-          frameTimeMs: event.frameTimeMs,
-          targetFrameTimeMs: resolvedTargetFrameTimeMs
-        });
-      }
-      if (typeof onFrameComplete === "function") {
-        onFrameComplete({
-          ...event,
-          owner: rendererDebugOwner,
-          targetFrameTimeMs: resolvedTargetFrameTimeMs
-        });
-      }
-    }
+    projection,
+    sample
   };
 }
-function readNavigator(navigatorOverride) {
-  const currentNavigator = navigatorOverride ?? globalThis.navigator;
-  if (!currentNavigator || typeof currentNavigator !== "object") {
-    throw new Error("Navigator unavailable. Provide a browser-like navigator object.");
-  }
-  return currentNavigator;
-}
-function readDocument(documentOverride) {
-  const doc = documentOverride ?? globalThis.document;
-  if (!doc || typeof doc !== "object") {
-    throw new Error("Document unavailable. Provide a browser-like document object.");
-  }
-  return doc;
-}
-function resolveCanvas2(canvasOrSelector, documentOverride) {
-  if (canvasOrSelector && typeof canvasOrSelector === "object") {
-    return canvasOrSelector;
-  }
-  const doc = readDocument(documentOverride);
-  const selector = typeof canvasOrSelector === "string" && canvasOrSelector.trim().length > 0 ? canvasOrSelector : DEFAULT_CANVAS_SELECTOR;
-  const resolved = doc.querySelector(selector);
-  if (!resolved) {
-    throw new Error(`Unable to find canvas for selector "${selector}".`);
-  }
-  return resolved;
-}
-function readGpu(navigatorOverride) {
-  const currentNavigator = readNavigator(navigatorOverride);
-  const gpu = currentNavigator.gpu;
-  if (!gpu || typeof gpu.requestAdapter !== "function") {
-    throw new Error("WebGPU runtime unavailable. navigator.gpu is missing.");
+function renderScene(canvas, ctx, snapshot, props, characterModel) {
+  const width = canvas.width || 1;
+  const height = canvas.height || 1;
+  ctx.clearRect(0, 0, width, height);
+  ctx.fillStyle = "#d8e8d0";
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = "#9fc47a";
+  ctx.fillRect(0, height * 0.52, width, height * 0.48);
+  ctx.strokeStyle = "#caa66d";
+  ctx.lineWidth = Math.max(2, width * 6e-3);
+  ctx.beginPath();
+  ctx.moveTo(width * 0.35, height);
+  ctx.quadraticCurveTo(width * 0.53, height * 0.58, width * 0.62, 0);
+  ctx.stroke();
+  const projectedProps = props.map((prop, index) => ({
+    prop,
+    id: propIdentity(prop, index),
+    projected: project(prop.position, snapshot.cameraPosition, width, height)
+  })).sort((a, b) => b.projected.depth - a.projected.depth);
+  const propGroundAnchors = [];
+  for (const { prop, id } of projectedProps) {
+    const projected = drawProp(ctx, prop, snapshot.cameraPosition, width, height);
+    propGroundAnchors.push({
+      id,
+      kind: prop.kind,
+      groundY: projected.groundY,
+      depth: projected.depth,
+      visible: projected.visible
+    });
   }
-  return gpu;
-}
-function configureContext(context, device, format, alphaMode) {
-  if (typeof context.configure !== "function") {
-    throw new Error("Canvas WebGPU context does not support configure().");
+  let characterProjection;
+  let modelRenderable = false;
+  let fallbackProxyActive = true;
+  let skinnedVertexCount = 0;
+  let skinnedTriangleCount = 0;
+  let skinnedJointCount = 0;
+  let skinnedAnimatedNodeCount = 0;
+  let skinnedClipCount = 0;
+  let activeClipRenderable = false;
+  if (characterModel) {
+    const drawn = drawSkinnedGltfCharacter(ctx, characterModel, snapshot, width, height);
+    characterProjection = drawn.projection;
+    modelRenderable = true;
+    fallbackProxyActive = false;
+    skinnedVertexCount = characterModel.vertexCount;
+    skinnedTriangleCount = characterModel.triangleCount;
+    skinnedJointCount = characterModel.jointCount;
+    skinnedAnimatedNodeCount = characterModel.animatedNodeCount;
+    skinnedClipCount = characterModel.clipCount;
+    activeClipRenderable = drawn.sample.activeClipRenderable;
+  } else {
+    characterProjection = drawCharacter(
+      ctx,
+      snapshot.characterPosition,
+      snapshot.cameraPosition,
+      width,
+      height,
+      snapshot.clipTimeMs / 900,
+      snapshot.headLook
+    );
   }
-  context.configure({
-    device,
-    format,
-    alphaMode
-  });
-}
-function createRenderPassDescriptor(view, clearColor) {
   return {
-    colorAttachments: [
-      {
-        view,
-        loadOp: "clear",
-        clearValue: {
-          r: clearColor[0],
-          g: clearColor[1],
-          b: clearColor[2],
-          a: clearColor[3]
-        },
-        storeOp: "store"
-      }
-    ]
+    characterGroundY: characterProjection.groundY,
+    characterVisible: characterProjection.visible,
+    modelLoaded: Boolean(characterModel),
+    modelRenderable,
+    fallbackProxyActive,
+    skinnedVertexCount,
+    skinnedTriangleCount,
+    skinnedJointCount,
+    skinnedAnimatedNodeCount,
+    skinnedClipCount,
+    activeClipRenderable,
+    propGroundAnchors
   };
 }
-function supportsWebGpu(options = {}) {
+function resolveCharacterModel(options) {
   try {
-    const gpu = readGpu(options.navigator);
-    return Boolean(gpu);
+    return createAnimatedGltfModel(
+      options.modelAsset ?? options.animationAdventure?.modelAsset,
+      options.clipAssets ?? options.animationAdventure?.clipAssets ?? []
+    );
   } catch {
-    return false;
+    return null;
   }
 }
-async function createGpuRenderer(options = {}) {
-  const {
-    canvas,
-    navigator: navigatorOverride,
-    document: documentOverride,
-    powerPreference = "high-performance",
-    alpha = true,
-    format,
-    clearColor = DEFAULT_CLEAR_COLOR,
-    requestAnimationFrame = globalThis.requestAnimationFrame?.bind(globalThis),
-    cancelAnimationFrame = globalThis.cancelAnimationFrame?.bind(globalThis),
-    frameIdFactory,
-    onFrameStart,
-    onBeforeEncode,
-    onAfterSubmit,
-    onFrameComplete
-  } = options;
-  const gpu = readGpu(navigatorOverride);
-  const adapter = await gpu.requestAdapter({ powerPreference });
-  if (!adapter) {
-    throw new Error("Unable to obtain GPU adapter.");
-  }
-  const device = await adapter.requestDevice();
-  const targetCanvas = resolveCanvas2(canvas, documentOverride);
-  const context = targetCanvas.getContext?.("webgpu");
-  if (!context) {
-    throw new Error("Unable to obtain WebGPU canvas context.");
+function createAnimatedSceneRenderer(options = {}) {
+  const canvas = resolveCanvas2(options.canvas);
+  const ctx = canvas.getContext?.("2d");
+  if (!ctx) {
+    throw new Error("Animated scene renderer requires a 2D canvas context.");
   }
-  const resolvedFormat = format || (typeof gpu.getPreferredCanvasFormat === "function" ? gpu.getPreferredCanvasFormat() : "bgra8unorm");
-  configureContext(context, device, resolvedFormat, alpha ? "premultiplied" : "opaque");
+  const route = [...options.route ?? options.animationAdventure?.route ?? []];
+  const beats = [...options.beats ?? options.animationAdventure?.beats ?? []].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const props = [...options.props ?? options.animationAdventure?.props ?? []];
+  const clipAssets = options.clipAssets ?? options.animationAdventure?.clipAssets ?? [];
+  const clipProfiles = resolveClipProfiles(clipAssets);
+  const beatTimeline = buildBeatTimeline(beats, route, clipProfiles);
+  const characterModel = resolveCharacterModel(options);
+  let camera = {
+    ...DEFAULT_CAMERA,
+    ...definedCameraOverrides(options.camera ?? options.animationAdventure?.camera)
+  };
+  const loopDurationMs = Math.max(beatTimeline.at(-1)?.endMs ?? durationFromBeats(beats), 1);
+  const movementWarnings = beatTimeline.flatMap((entry) => entry.warnings);
+  const requestFrame = options.requestAnimationFrame ?? globalThis.requestAnimationFrame?.bind(globalThis);
+  const cancelFrame = options.cancelAnimationFrame ?? globalThis.cancelAnimationFrame?.bind(globalThis);
+  let frameHandle;
   let running = false;
-  let destroyed = false;
   let frame = 0;
-  let lastTimestamp = 0;
-  let rafId = null;
-  let clear = normalizeColor(clearColor);
-  let xrActive = false;
-  let detachXrBinding = null;
-  const renderOnce = (timestamp = now()) => {
-    if (destroyed) {
-      throw new Error("Renderer was destroyed.");
-    }
-    const frameNumber = frame + 1;
-    const frameId = normalizeFrameId(
-      typeof frameIdFactory === "function" ? frameIdFactory({
-        frame: frameNumber,
-        timestamp,
-        canvas: targetCanvas,
-        xrActive
-      }) : `renderer.frame.${frameNumber}`
-    );
-    const frameTimeMs = lastTimestamp > 0 ? Math.max(0, timestamp - lastTimestamp) : void 0;
-    if (typeof onFrameStart === "function") {
-      onFrameStart({
-        frame: frameNumber,
-        frameId,
-        frameTimeMs,
-        timestamp,
-        device,
-        context,
-        canvas: targetCanvas,
-        xrActive
-      });
-    }
-    const texture = context.getCurrentTexture?.();
-    if (!texture || typeof texture.createView !== "function") {
-      throw new Error("WebGPU context returned an invalid current texture.");
-    }
-    const encoder = device.createCommandEncoder({
-      label: `plasius.gpu-renderer.frame.${frame}`
-    });
-    const view = texture.createView();
-    const pass = encoder.beginRenderPass(createRenderPassDescriptor(view, clear));
-    if (typeof onBeforeEncode === "function") {
-      onBeforeEncode({
-        frame,
-        frameNumber,
-        frameId,
-        frameTimeMs,
-        timestamp,
-        device,
-        context,
-        encoder,
-        pass,
-        canvas: targetCanvas,
-        xrActive
-      });
-    }
-    if (typeof pass.end === "function") {
-      pass.end();
-    }
-    const commandBuffer = encoder.finish();
-    device.queue.submit([commandBuffer]);
-    frame = frameNumber;
-    lastTimestamp = timestamp;
-    if (typeof onAfterSubmit === "function") {
-      onAfterSubmit({
-        frame: frameNumber,
-        frameNumber,
-        frameId,
-        frameTimeMs,
-        timestamp,
-        device,
-        context,
-        canvas: targetCanvas,
-        xrActive
-      });
-    }
-    if (typeof onFrameComplete === "function") {
-      onFrameComplete({
-        frame: frameNumber,
-        frameId,
-        frameTimeMs,
-        timestamp,
-        device,
-        context,
-        canvas: targetCanvas,
-        xrActive
-      });
-    }
-    return {
-      frame: frameNumber,
-      frameId,
-      frameTimeMs,
-      timestamp
-    };
-  };
-  const tick = (timestamp) => {
-    if (!running || destroyed) {
-      return;
-    }
-    renderOnce(timestamp);
-    if (typeof requestAnimationFrame === "function") {
-      rafId = requestAnimationFrame(tick);
-    }
+  let startedAtMs;
+  let lastTimestamp;
+  let pendingCameraControl = null;
+  let activeCameraControl = false;
+  let headLookWeight = 0;
+  let cameraPosition = route[0] ? [
+    route[0].position[0] + (camera.offset?.[0] ?? 0),
+    route[0].position[1] + (camera.offset?.[1] ?? 0),
+    route[0].position[2] + (camera.offset?.[2] ?? 0)
+  ] : [0, 2.4, 5.5];
+  let cameraRigFrame = resolveCameraRigFrame({
+    viewMode: "editor",
+    anchors: {
+      target: route[0]?.position ? [...route[0].position] : [0, 0, 0],
+      head: route[0]?.position ? [route[0].position[0], route[0].position[1] + 1.65, route[0].position[2]] : [0, 1.65, 0],
+      forward: [0, 0, -1]
+    },
+    camera: {
+      id: "animation-adventure",
+      transform: {
+        position: [...cameraPosition],
+        target: route[0]?.position ? [...route[0].position] : [0, 0, 0]
+      }
+    },
+    constraints: camera.constraints
+  });
+  let snapshot = {
+    frame,
+    running,
+    activeClipId: beats[0]?.clipId ?? "",
+    activeBeatId: beats[0]?.id ?? "",
+    activeMovementMode: beatTimeline[0]?.movementType ?? "stationary",
+    blendProgress: 0,
+    clipTimeMs: 0,
+    characterPosition: route[0]?.position ? [...route[0].position] : [0, 0, 0],
+    cameraPosition: [...cameraPosition],
+    cameraViewMode: resolveCameraViewMode(camera),
+    cameraTransform: cameraRigFrame.transform,
+    targetDistance: cameraRigFrame.targetDistance,
+    headLook: cameraRigFrame.headLook,
+    characterGroundY: 0,
+    characterVisible: false,
+    modelLoaded: Boolean(characterModel),
+    modelRenderable: false,
+    fallbackProxyActive: true,
+    skinnedVertexCount: characterModel?.vertexCount ?? 0,
+    skinnedTriangleCount: characterModel?.triangleCount ?? 0,
+    skinnedJointCount: characterModel?.jointCount ?? 0,
+    skinnedAnimatedNodeCount: characterModel?.animatedNodeCount ?? 0,
+    skinnedClipCount: characterModel?.clipCount ?? 0,
+    activeClipRenderable: false,
+    propGroundAnchors: [],
+    movementValidation: {
+      status: movementWarnings.length ? "warning" : "passed",
+      warnings: movementWarnings,
+      activeBeatId: beats[0]?.id ?? "",
+      activeClipId: beats[0]?.clipId ?? "",
+      motionMode: beatTimeline[0]?.movementType ?? "stationary",
+      rootMotionSource: beatTimeline[0]?.movementProfile?.motionMode ?? "none",
+      expectedSpeed: beatTimeline[0]?.expectedSpeed ?? 0,
+      actualSpeed: beatTimeline[0]?.actualSpeed ?? 0,
+      movementDistance: beatTimeline[0]?.movementDistance ?? 0,
+      loopCount: beatTimeline[0]?.loopCount ?? 1,
+      footSlideWarning: beatTimeline[0]?.footSlideWarning ?? null
+    },
+    frameState: "initialized"
   };
-  const start = () => {
-    if (destroyed) {
-      throw new Error("Renderer was destroyed.");
-    }
-    if (running) {
-      return false;
+  function renderOnce(timestamp = nowMs()) {
+    if (startedAtMs === void 0) {
+      startedAtMs = timestamp;
     }
-    running = true;
-    if (typeof requestAnimationFrame === "function") {
-      rafId = requestAnimationFrame(tick);
+    const elapsedMs = Math.max(0, timestamp - startedAtMs);
+    const loopTimeMs = elapsedMs % loopDurationMs;
+    const frameTimeMs = lastTimestamp === void 0 ? 16.67 : Math.max(0, timestamp - lastTimestamp);
+    lastTimestamp = timestamp;
+    frame += 1;
+    const timelineEntry = resolveTimelineBeat(beatTimeline, loopTimeMs);
+    const fallbackBeat = resolveBeat(beats, loopTimeMs);
+    const beat = timelineEntry?.beat ?? fallbackBeat.beat;
+    const beatTimeMs = timelineEntry ? loopTimeMs - timelineEntry.startMs : fallbackBeat.beatTimeMs;
+    const durationMs = timelineEntry?.durationMs ?? fallbackBeat.durationMs;
+    const blend = beat?.blend ?? { inMs: 0, outMs: 0 };
+    const blendIn = blend.inMs > 0 ? clamp012(beatTimeMs / blend.inMs) : 1;
+    const blendOut = blend.outMs > 0 ? clamp012((durationMs - beatTimeMs) / blend.outMs) : 1;
+    const blendProgress = clamp012(Math.min(blendIn, blendOut));
+    const characterPosition = timelineEntry ? resolveTimelinePosition(timelineEntry, beatTimeMs) : resolveRoutePosition(route, loopTimeMs);
+    const characterForward = timelineEntry ? resolveTimelineForward(timelineEntry) : resolveRouteForward(route, loopTimeMs);
+    const headAnchor = camera.headBoneAvailable === false ? void 0 : [
+      characterPosition[0],
+      characterPosition[1] + (camera.headHeight ?? 1.65),
+      characterPosition[2]
+    ];
+    const lookAheadTimeMs = (loopTimeMs + camera.lookAheadMs) % loopDurationMs;
+    const lookAheadEntry = resolveTimelineBeat(beatTimeline, lookAheadTimeMs);
+    const lookAheadPosition = lookAheadEntry ? resolveTimelinePosition(lookAheadEntry, lookAheadTimeMs - lookAheadEntry.startMs) : resolveRoutePosition(route, lookAheadTimeMs);
+    const desiredCamera = [
+      lookAheadPosition[0] + (camera.offset?.[0] ?? 0),
+      lookAheadPosition[1] + (camera.offset?.[1] ?? 0),
+      lookAheadPosition[2] + (camera.offset?.[2] ?? 0)
+    ];
+    const smoothing = bezierY(camera.cubicBezier, clamp012(frameTimeMs / Math.max(1, camera.lagMs)));
+    cameraPosition = lerp3(cameraPosition, desiredCamera, smoothing);
+    const cameraViewMode = resolveCameraViewMode(camera);
+    const rigViewMode = cameraViewMode === "spectator" ? "editor" : cameraViewMode;
+    cameraRigFrame = resolveCameraRigFrame({
+      viewMode: rigViewMode,
+      anchors: {
+        target: characterPosition,
+        ...headAnchor ? { head: headAnchor } : {},
+        forward: characterForward
+      },
+      camera: {
+        id: "animation-adventure",
+        transform: {
+          position: [...cameraPosition],
+          target: lookAheadPosition
+        }
+      },
+      constraints: camera.constraints,
+      control: pendingCameraControl,
+      activeControl: activeCameraControl
+    });
+    if (activeCameraControl && cameraRigFrame.headLook.status === "active") {
+      headLookWeight = cameraRigFrame.headLook.weight;
     } else {
-      renderOnce();
+      const returnMs = Math.max(1, camera.headLook?.returnMs ?? DEFAULT_CAMERA.headLook.returnMs);
+      headLookWeight = lerp2(headLookWeight, 0, clamp012(frameTimeMs / returnMs));
     }
-    return true;
-  };
-  const stop = () => {
+    const headLook = {
+      ...cameraRigFrame.headLook,
+      status: cameraRigFrame.headLook.status === "unavailable" ? "unavailable" : headLookWeight > 1e-3 && !activeCameraControl ? "returning" : cameraRigFrame.headLook.status,
+      weight: headLookWeight
+    };
+    cameraPosition = [...cameraRigFrame.transform.position];
+    pendingCameraControl = null;
+    activeCameraControl = false;
+    snapshot = {
+      frame,
+      running,
+      activeClipId: beat?.clipId ?? "",
+      activeBeatId: beat?.id ?? "",
+      activeMovementMode: timelineEntry?.movementType ?? "stationary",
+      blendProgress,
+      clipTimeMs: beatTimeMs,
+      characterPosition,
+      cameraPosition: [...cameraPosition],
+      cameraViewMode,
+      cameraTransform: cameraRigFrame.transform,
+      targetDistance: cameraRigFrame.targetDistance,
+      headLook,
+      characterGroundY: 0,
+      characterVisible: false,
+      modelLoaded: Boolean(characterModel),
+      modelRenderable: false,
+      fallbackProxyActive: true,
+      skinnedVertexCount: characterModel?.vertexCount ?? 0,
+      skinnedTriangleCount: characterModel?.triangleCount ?? 0,
+      skinnedJointCount: characterModel?.jointCount ?? 0,
+      skinnedAnimatedNodeCount: characterModel?.animatedNodeCount ?? 0,
+      skinnedClipCount: characterModel?.clipCount ?? 0,
+      activeClipRenderable: false,
+      propGroundAnchors: [],
+      movementValidation: {
+        status: movementWarnings.length ? "warning" : "passed",
+        warnings: [...movementWarnings],
+        activeBeatId: beat?.id ?? "",
+        activeClipId: beat?.clipId ?? "",
+        motionMode: timelineEntry?.movementType ?? "stationary",
+        rootMotionSource: timelineEntry?.movementProfile?.motionMode ?? "none",
+        expectedSpeed: timelineEntry?.expectedSpeed ?? 0,
+        actualSpeed: timelineEntry?.actualSpeed ?? 0,
+        movementDistance: timelineEntry?.movementDistance ?? 0,
+        loopCount: timelineEntry?.loopCount ?? 1,
+        footSlideWarning: timelineEntry?.footSlideWarning ?? null
+      },
+      frameState: running ? "running" : "rendered-once"
+    };
+    const visibility = renderScene(canvas, ctx, snapshot, props, characterModel);
+    snapshot = {
+      ...snapshot,
+      ...visibility
+    };
+    return snapshot;
+  }
+  function tick(timestamp) {
     if (!running) {
-      return false;
-    }
-    running = false;
-    if (rafId !== null && typeof cancelAnimationFrame === "function") {
-      cancelAnimationFrame(rafId);
+      return;
     }
-    rafId = null;
-    return true;
-  };
-  const resize = (cssWidth, cssHeight, devicePixelRatio = globalThis.devicePixelRatio ?? 1) => {
-    const width = Math.max(1, Math.floor(cssWidth * devicePixelRatio));
-    const height = Math.max(1, Math.floor(cssHeight * devicePixelRatio));
-    targetCanvas.width = width;
-    targetCanvas.height = height;
-    if (targetCanvas.style) {
-      targetCanvas.style.width = `${Math.max(1, Math.floor(cssWidth))}px`;
-      targetCanvas.style.height = `${Math.max(1, Math.floor(cssHeight))}px`;
+    renderOnce(timestamp);
+    if (running && requestFrame) {
+      frameHandle = requestFrame(tick);
     }
-    return { width, height };
-  };
-  const setClearColor = (value) => {
-    clear = normalizeColor(value);
-    return [...clear];
-  };
-  const setXrActive = (active) => {
-    xrActive = Boolean(active);
-  };
-  const getSnapshot = () => {
-    const width = Number(targetCanvas.width) || 0;
-    const height = Number(targetCanvas.height) || 0;
-    return {
-      running,
-      frame,
-      lastTimestamp,
-      format: resolvedFormat,
-      width,
-      height,
-      xrActive
-    };
-  };
-  const renderer = {
-    canvas: targetCanvas,
-    context,
-    device,
-    format: resolvedFormat,
-    renderOnce,
-    start,
-    stop,
-    resize,
-    setClearColor,
-    setXrActive,
-    getSnapshot,
-    bindXrManager(xrManager, bindOptions = {}) {
-      if (detachXrBinding) {
-        detachXrBinding();
+  }
+  return {
+    start() {
+      if (running) {
+        return;
+      }
+      running = true;
+      snapshot = { ...snapshot, running: true, frameState: "running" };
+      if (requestFrame) {
+        frameHandle = requestFrame(tick);
+      } else {
+        renderOnce();
       }
-      detachXrBinding = bindRendererToXrManager(renderer, xrManager, bindOptions);
-      return detachXrBinding;
     },
-    destroy() {
-      stop();
-      destroyed = true;
-      if (detachXrBinding) {
-        detachXrBinding();
-        detachXrBinding = null;
+    resize(width, height, devicePixelRatio = 1) {
+      const ratio = Number.isFinite(devicePixelRatio) && devicePixelRatio > 0 ? devicePixelRatio : 1;
+      canvas.width = Math.max(1, Math.floor(width * ratio));
+      canvas.height = Math.max(1, Math.floor(height * ratio));
+      if (canvas.style) {
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
       }
-      if (typeof context.unconfigure === "function") {
-        context.unconfigure();
+      const visibility = renderScene(canvas, ctx, snapshot, props, characterModel);
+      snapshot = {
+        ...snapshot,
+        ...visibility
+      };
+    },
+    renderOnce,
+    getSnapshot() {
+      return {
+        ...snapshot,
+        characterPosition: [...snapshot.characterPosition],
+        cameraPosition: [...snapshot.cameraPosition],
+        cameraTransform: {
+          position: [...snapshot.cameraTransform.position],
+          target: [...snapshot.cameraTransform.target],
+          up: [...snapshot.cameraTransform.up]
+        },
+        headLook: {
+          ...snapshot.headLook,
+          target: [...snapshot.headLook.target]
+        },
+        movementValidation: {
+          ...snapshot.movementValidation,
+          warnings: [...snapshot.movementValidation?.warnings ?? []]
+        },
+        propGroundAnchors: snapshot.propGroundAnchors.map((anchor) => ({ ...anchor }))
+      };
+    },
+    setCamera(nextCamera = {}) {
+      camera = { ...camera, ...nextCamera };
+      snapshot = {
+        ...snapshot,
+        cameraViewMode: resolveCameraViewMode(camera)
+      };
+    },
+    setCameraViewMode(viewMode) {
+      camera = { ...camera, viewMode };
+      snapshot = {
+        ...snapshot,
+        cameraViewMode: resolveCameraViewMode(camera)
+      };
+    },
+    applyCameraControl(control, options2 = {}) {
+      pendingCameraControl = control;
+      activeCameraControl = options2.activeControl !== false;
+    },
+    destroy() {
+      running = false;
+      if (frameHandle !== void 0 && cancelFrame) {
+        cancelFrame(frameHandle);
       }
+      frameHandle = void 0;
+      snapshot = { ...snapshot, running: false, frameState: "destroyed" };
     }
   };
-  return renderer;
-}
-function snapshotFromXrManager(xrManager) {
-  if (xrManager && typeof xrManager.getState === "function") {
-    return xrManager.getState();
-  }
-  if (xrManager?.store && typeof xrManager.store.getSnapshot === "function") {
-    return xrManager.store.getSnapshot();
-  }
-  return null;
-}
-function bindRendererToXrManager(renderer, xrManager, options = {}) {
-  if (!xrManager || typeof xrManager.subscribe !== "function") {
-    throw new Error("XR manager must expose subscribe(listener). Use @plasius/gpu-xr createXrManager().");
-  }
-  const { onSessionStart, onSessionEnd } = options;
-  let previousSession = null;
-  const applyState = (state) => {
-    const session = state?.activeSession ?? null;
-    if (session === previousSession) {
-      return;
-    }
-    previousSession = session;
-    if (typeof renderer.setXrActive === "function") {
-      renderer.setXrActive(Boolean(session));
-    }
-    if (session && typeof onSessionStart === "function") {
-      onSessionStart(session, renderer);
-    }
-    if (!session && typeof onSessionEnd === "function") {
-      onSessionEnd(renderer);
-    }
-  };
-  applyState(snapshotFromXrManager(xrManager));
-  return xrManager.subscribe(applyState);
 }
-var defaultRendererClearColor = DEFAULT_CLEAR_COLOR;
 
 // src/professional-animated-scene-renderer.js
 function nowMs2() {
@@ -2965,7 +3640,7 @@ function scale(a, scalar) {
 function dot(a, b) {
   return a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
 }
-function cross(a, b) {
+function cross2(a, b) {
   return [
     a[1] * b[2] - a[2] * b[1],
     a[2] * b[0] - a[0] * b[2],
@@ -3586,7 +4261,7 @@ function createMeshTriangleRecords(meshes, gpuMaterialSource = null) {
       const v0 = readVector(mesh.positions, a, 3, [0, 0, 0]);
       const v1 = readVector(mesh.positions, b, 3, [0, 0, 0]);
       const v2 = readVector(mesh.positions, c, 3, [0, 0, 0]);
-      const faceNormal = normalize(cross(subtract(v1, v0), subtract(v2, v0)), [0, 1, 0]);
+      const faceNormal = normalize(cross2(subtract(v1, v0), subtract(v2, v0)), [0, 1, 0]);
       const n0 = mesh.normals ? normalize(readVector(mesh.normals, a, 3, faceNormal), faceNormal) : faceNormal;
       const n1 = mesh.normals ? normalize(readVector(mesh.normals, b, 3, faceNormal), faceNormal) : faceNormal;
       const n2 = mesh.normals ? normalize(readVector(mesh.normals, c, 3, faceNormal), faceNormal) : faceNormal;
@@ -4627,9 +5302,9 @@ function resolveEnvironmentPortalMode(value, hasPortals) {
 }
 function orthogonalPortalTangent(normal) {
   if (Math.abs(normal[1]) < 0.92) {
-    return normalize(cross([0, 1, 0], normal), [1, 0, 0]);
+    return normalize(cross2([0, 1, 0], normal), [1, 0, 0]);
   }
-  return normalize(cross([1, 0, 0], normal), [0, 0, 1]);
+  return normalize(cross2([1, 0, 0], normal), [0, 0, 1]);
 }
 function resolvePortalTangent(value, normal) {
   const fallback = orthogonalPortalTangent(normal);
@@ -4661,7 +5336,7 @@ function normalizeEnvironmentPortal(portal, index) {
   const position = asVec3(portal.position ?? portal.center, [0, 0, 0]);
   const normal = asUnitVec3(portal.normal, [0, 0, 1]);
   const tangent = resolvePortalTangent(portal.tangent, normal);
-  const bitangent = normalize(cross(normal, tangent), [0, 1, 0]);
+  const bitangent = normalize(cross2(normal, tangent), [0, 1, 0]);
   const width = readPortalExtent(
     `environmentPortals[${index}].width`,
     portal.width,
@@ -4739,8 +5414,8 @@ function resolveCamera(input, width, height) {
   const target = asVec3(camera.target, DEFAULT_CAMERA2.target);
   const upInput = normalize(asVec3(camera.up, DEFAULT_CAMERA2.up), DEFAULT_CAMERA2.up);
   const forward = normalize(subtract(target, position), [0, 0, -1]);
-  const right = normalize(cross(forward, upInput), [1, 0, 0]);
-  const up = normalize(cross(right, forward), [0, 1, 0]);
+  const right = normalize(cross2(forward, upInput), [1, 0, 0]);
+  const up = normalize(cross2(right, forward), [0, 1, 0]);
   const fovYDegrees = clamp2(
     readFiniteNumber("camera.fovYDegrees", camera.fovYDegrees ?? camera.fov, DEFAULT_CAMERA2.fovYDegrees),
     10,
@@ -5109,8 +5784,8 @@ function supportsWavefrontPathTracingCompute(options = {}) {
 // src/wavefront-sampling.js
 function buildOrthonormalBasis(normal) {
   const tangentFallback = Math.abs(normal[1]) < 0.999 ? [0, 1, 0] : [1, 0, 0];
-  const tangent = normalize(cross(tangentFallback, normal), [1, 0, 0]);
-  const bitangent = normalize(cross(normal, tangent), [0, 0, 1]);
+  const tangent = normalize(cross2(tangentFallback, normal), [1, 0, 0]);
+  const bitangent = normalize(cross2(normal, tangent), [0, 0, 1]);
   return { tangent, bitangent };
 }
 function localToWorld(local, normal) {
@@ -11339,7 +12014,7 @@ function intersectWavefrontReferenceTriangle(ray, triangle, options = {}) {
   const triangleIndex = readNonNegativeInteger2("triangleIndex", options.triangleIndex, 0);
   const edge1 = subtract(triangle.v1, triangle.v0);
   const edge2 = subtract(triangle.v2, triangle.v0);
-  const pvec = cross(ray.direction, edge2);
+  const pvec = cross2(ray.direction, edge2);
   const determinant = dot(edge1, pvec);
   if (Math.abs(determinant) < 1e-7) {
     return null;
@@ -11350,7 +12025,7 @@ function intersectWavefrontReferenceTriangle(ray, triangle, options = {}) {
   if (u < 0 || u > 1) {
     return null;
   }
-  const qvec = cross(tvec, edge1);
+  const qvec = cross2(tvec, edge1);
   const v = dot(ray.direction, qvec) * invDet;
   if (v < 0 || u + v > 1) {
     return null;
@@ -11359,7 +12034,7 @@ function intersectWavefrontReferenceTriangle(ray, triangle, options = {}) {
   if (distance <= 1e-3 || distance > maxDistance) {
     return null;
   }
-  const geometric = normalize(cross(edge1, edge2), [0, 1, 0]);
+  const geometric = normalize(cross2(edge1, edge2), [0, 1, 0]);
   const frontFace = dot(ray.direction, geometric) < 0;
   const orientedGeometric = frontFace ? geometric : scale(geometric, -1);
   const w = 1 - u - v;
@@ -11453,7 +12128,7 @@ function triangleAreaForLightSampling(triangle) {
   }
   const edge1 = subtract(triangle.v1, triangle.v0);
   const edge2 = subtract(triangle.v2, triangle.v0);
-  return Math.max(Math.hypot(...cross(edge1, edge2)) * 0.5, 1e-6);
+  return Math.max(Math.hypot(...cross2(edge1, edge2)) * 0.5, 1e-6);
 }
 function emissiveTriangleWeight(triangle) {
   if (!triangle) {
@@ -13331,6 +14006,7 @@ export {
   createFeedbackGameDiagnosticSnapshot,
   createGpuRenderer,
   createMediumStack,
+  createNativeSceneRenderer,
   createProfessionalAnimatedSceneRenderer,
   createRayTracingRenderPlan,
   createRendererDebugHooks,