@volter/editor-game 0.5.66 → 0.5.68

package/src/runtime/dev/render-memory.ts

@@ -0,0 +1,226 @@
+/**
+ * First-party GPU-memory estimator (W4b, F11 profiler memory tab).
+ *
+ * Walks a live three.js scene and reports geometry/texture byte footprints
+ * from data this engine ALREADY holds — attribute buffers and texture images —
+ * plus the renderer's own resource counts (`renderer.info`). Uses three.js
+ * directly, no wrapper.
+ *
+ * HONESTY (adapters never fabricate; unmeasurable = absent-with-reason):
+ *  - `estimateGeometryBytes` is EXACT: the summed `byteLength` of every
+ *    attribute and index array. Not an estimate at all — it is what the
+ *    buffers occupy in CPU memory (and, uploaded 1:1, on the GPU).
+ *  - `estimateTextureBytes` returns `null` when the footprint is genuinely
+ *    unknowable at this seam (no image dimensions, or a pixel format/type we
+ *    can't size). A null NEVER enters the totals — it goes to `unestimated[]`
+ *    with a reason, so the panel can say "N textures unmeasured" instead of
+ *    silently undercounting.
+ *  - JS heap is deliberately NOT here: `performance.memory` is a browser-only
+ *    global read editor-side (M2), not an engine-scene property.
+ */
+
+import type {
+  RenderMemoryEntry,
+  RenderMemorySnapshot,
+  RenderMemoryUnestimated,
+} from '@volter/editor-project/adapter/render-memory';
+import * as THREE from 'three';
+
+export type {
+  RenderMemoryEntry,
+  RenderMemorySnapshot,
+  RenderMemoryUnestimated,
+} from '@volter/editor-project/adapter/render-memory';
+
+const TOP_N = 10;
+
+/** Channel count per pixel format. Packed/compressed formats are handled by
+ *  the byte-size logic in {@link estimateTextureBytes}, not here. */
+const FORMAT_CHANNELS: Record<number, number> = {
+  [THREE.AlphaFormat]: 1,
+  [THREE.RedFormat]: 1,
+  [THREE.RedIntegerFormat]: 1,
+  [THREE.RGFormat]: 2,
+  [THREE.RGIntegerFormat]: 2,
+  [THREE.RGBAFormat]: 4,
+  [THREE.RGBAIntegerFormat]: 4,
+  [THREE.DepthFormat]: 1,
+  [THREE.DepthStencilFormat]: 2,
+};
+
+/** Bytes per channel for a (non-packed) pixel type. */
+const TYPE_BYTES: Record<number, number> = {
+  [THREE.UnsignedByteType]: 1,
+  [THREE.ByteType]: 1,
+  [THREE.ShortType]: 2,
+  [THREE.UnsignedShortType]: 2,
+  [THREE.IntType]: 4,
+  [THREE.UnsignedIntType]: 4,
+  [THREE.FloatType]: 4,
+  [THREE.HalfFloatType]: 2,
+};
+
+/** Packed pixel types occupy a FIXED size per texel regardless of channel
+ *  count — sized here directly rather than via channels × type-bytes. */
+const PACKED_TYPE_TEXEL_BYTES: Record<number, number> = {
+  [THREE.UnsignedShort4444Type]: 2,
+  [THREE.UnsignedShort5551Type]: 2,
+  [THREE.UnsignedInt248Type]: 4,
+};
+
+function bytesPerTexel(format: number, type: number): number | null {
+  const packed = PACKED_TYPE_TEXEL_BYTES[type];
+  if (packed !== undefined) return packed;
+  const channels = FORMAT_CHANNELS[format];
+  const typeBytes = TYPE_BYTES[type];
+  if (channels === undefined || typeBytes === undefined) return null;
+  return channels * typeBytes;
+}
+
+/** EXACT CPU/GPU footprint of a geometry's attribute + index buffers. */
+export function estimateGeometryBytes(geometry: THREE.BufferGeometry): number {
+  // Interleaved attributes share ONE backing buffer (`attribute.data.array`);
+  // a plain attribute owns its own (`attribute.array`). Count each unique
+  // backing view exactly once.
+  const counted = new Set<ArrayBufferView>();
+  let bytes = 0;
+  const add = (view: ArrayBufferView | undefined): void => {
+    if (view && !counted.has(view)) {
+      counted.add(view);
+      bytes += view.byteLength;
+    }
+  };
+  for (const attribute of Object.values(geometry.attributes)) {
+    const interleaved = (attribute as THREE.InterleavedBufferAttribute).data?.array as
+      | ArrayBufferView
+      | undefined;
+    add(interleaved ?? ((attribute as THREE.BufferAttribute).array as ArrayBufferView | undefined));
+  }
+  add(geometry.index?.array as ArrayBufferView | undefined);
+  return bytes;
+}
+
+/** Estimated GPU footprint of a texture, or `null` when unknowable at this
+ *  seam (the caller routes null into `unestimated[]` with a reason). */
+export function estimateTextureBytes(texture: THREE.Texture): number | null {
+  // Compressed textures carry their real per-mip byte arrays — sum them; no
+  // format math needed and no estimate involved.
+  const compressed = texture as THREE.CompressedTexture;
+  if (
+    (compressed as { isCompressedTexture?: boolean }).isCompressedTexture &&
+    Array.isArray(compressed.mipmaps)
+  ) {
+    let bytes = 0;
+    for (const mip of compressed.mipmaps) {
+      const data = (mip as { data?: ArrayBufferView }).data;
+      if (data?.byteLength) bytes += data.byteLength;
+    }
+    return bytes;
+  }
+
+  const image = texture.image as { width?: number; height?: number } | undefined;
+  const width = image?.width;
+  const height = image?.height;
+  if (!width || !height) return null;
+
+  const bpt = bytesPerTexel(texture.format, texture.type);
+  if (bpt === null) return null;
+
+  const base = width * height * bpt;
+  return texture.generateMipmaps ? Math.round(base * 1.333) : base;
+}
+
+function textureName(texture: THREE.Texture): string {
+  return texture.name || (texture.image as { src?: string })?.src || `texture:${texture.uuid}`;
+}
+
+function geometryName(geometry: THREE.BufferGeometry): string {
+  return geometry.name || `${geometry.type}:${geometry.uuid}`;
+}
+
+function unestimatedReason(texture: THREE.Texture): string {
+  const image = texture.image as { width?: number; height?: number } | undefined;
+  if (!image?.width || !image?.height) return 'no image dimensions available';
+  return `unsupported format/type (format 0x${texture.format.toString(16)}, type 0x${texture.type.toString(16)})`;
+}
+
+/** Collect every unique geometry and texture referenced by a scene graph. */
+function collectResources(scene: THREE.Object3D): {
+  geometries: Map<string, THREE.BufferGeometry>;
+  textures: Map<string, THREE.Texture>;
+} {
+  const geometries = new Map<string, THREE.BufferGeometry>();
+  const textures = new Map<string, THREE.Texture>();
+
+  const addMaterialTextures = (material: THREE.Material): void => {
+    for (const value of Object.values(material as unknown as Record<string, unknown>)) {
+      if (value && (value as THREE.Texture).isTexture) {
+        const tex = value as THREE.Texture;
+        textures.set(tex.uuid, tex);
+      }
+    }
+  };
+
+  scene.traverse((object) => {
+    const geometry = (object as THREE.Mesh).geometry as THREE.BufferGeometry | undefined;
+    if (geometry?.isBufferGeometry) geometries.set(geometry.uuid, geometry);
+    const material = (object as THREE.Mesh).material;
+    if (Array.isArray(material)) material.forEach(addMaterialTextures);
+    else if (material) addMaterialTextures(material);
+  });
+
+  // Scene-level environment/background textures count too.
+  for (const maybe of [scene as unknown as THREE.Scene]) {
+    for (const value of [maybe.background, maybe.environment]) {
+      if (value && (value as THREE.Texture).isTexture) {
+        const tex = value as THREE.Texture;
+        textures.set(tex.uuid, tex);
+      }
+    }
+  }
+
+  return { geometries, textures };
+}
+
+export function collectRenderMemory(
+  scene: THREE.Object3D,
+  info: THREE.WebGLInfo,
+): RenderMemorySnapshot {
+  const { geometries, textures } = collectResources(scene);
+
+  const geometryEntries: RenderMemoryEntry[] = [];
+  let estimatedGeometryBytes = 0;
+  for (const geometry of geometries.values()) {
+    const bytes = estimateGeometryBytes(geometry);
+    estimatedGeometryBytes += bytes;
+    geometryEntries.push({ name: geometryName(geometry), bytes });
+  }
+
+  const textureEntries: RenderMemoryEntry[] = [];
+  const unestimated: RenderMemoryUnestimated[] = [];
+  let estimatedTextureBytes = 0;
+  for (const texture of textures.values()) {
+    const bytes = estimateTextureBytes(texture);
+    if (bytes === null) {
+      unestimated.push({ name: textureName(texture), reason: unestimatedReason(texture) });
+      continue;
+    }
+    estimatedTextureBytes += bytes;
+    textureEntries.push({ name: textureName(texture), bytes });
+  }
+
+  const byBytesDesc = (a: RenderMemoryEntry, b: RenderMemoryEntry): number => b.bytes - a.bytes;
+
+  return {
+    counts: {
+      geometries: info.memory.geometries,
+      textures: info.memory.textures,
+      programs: info.programs ? info.programs.length : null,
+    },
+    estimatedTextureBytes,
+    estimatedGeometryBytes,
+    topTextures: textureEntries.sort(byBytesDesc).slice(0, TOP_N),
+    topGeometries: geometryEntries.sort(byBytesDesc).slice(0, TOP_N),
+    unestimated,
+  };
+}

package/src/runtime/dev/render-vitals.ts

@@ -0,0 +1,338 @@
+/**
+ * LIVE RENDER VITALS — the frame explaining its own cost, derived ENTIRELY
+ * from `PerformanceProfiler` frames (`dev/performance-profiler.ts`).
+ *
+ * Nothing in a viewport tells you why it is slow, and a frame-time number on
+ * its own tells you only THAT it is. These readings answer the next question:
+ * where did the milliseconds go, and which subtree owns them
+ * (`dev/render-census.ts` is the address book half).
+ *
+ * ── THE MEASUREMENT SOURCE, STATED ONCE ─────────────────────────────────────
+ * There is no side ledger here. Every number below is folded out of profiler
+ * frames — the timing from phase spans, the counters from `reportRender`. The
+ * CPU submission cost is the profiler phase {@link RENDER_SUBMIT_PHASE}, which
+ * the three adapter brackets around its actual draw; the profiler's phase
+ * bookkeeping is a stack precisely so that bracket can sit INSIDE the frame's
+ * enclosing `render` phase without truncating it.
+ *
+ * ── TWO FRAME FLAVOURS, ONE FOLD ────────────────────────────────────────────
+ * The real runtime runs sim and presentation on different callbacks
+ * (`create-runtime.ts`: `update` → `runFrame({skipRenderPhases})` per fixed
+ * substep, `render` → `runRenderFrame` once per display frame), so a profiler
+ * "frame" is EITHER a sim substep OR a presentation pass. A capture/offline
+ * host drives one `runFrame` that is both. {@link foldProfilerFrame} handles
+ * all three the same way, and never has to know which host it is under:
+ *
+ *  - a frame carrying a {@link RENDER_SUBMIT_PHASE} span IS a presentation —
+ *    that phase only exists when a draw actually happened;
+ *  - sim CPU accumulates across every frame since the last presentation, so
+ *    the substeps a display frame consumed are attributed to it;
+ *  - renderer COUNTERS ride whichever frame `reportRender` landed on (the
+ *    adapter reports from its `endFrame` hook, which the substep pass drives),
+ *    so the latest report wins and the counters describe the last completed
+ *    draw. That is the same one-frame-warm reading `renderer.info` gives any
+ *    caller — three resets it when the next draw starts.
+ *
+ * ── WHY THE WORST FRAME IS NOT AN EMA ───────────────────────────────────────
+ * A decaying average keeps a restart spike on the readout for ~30 s, long
+ * after it stopped being true. The rolling two-window max
+ * ({@link WORST_WINDOW_FRAMES}) holds a hitch for one to two windows and then
+ * genuinely forgets it, so the number always describes recent history.
+ *
+ * ── RESOURCE OWNERSHIP ──────────────────────────────────────────────────────
+ * OWNER: the caller of {@link createRenderVitals}, which allocates one state
+ * object and one `profiler.subscribe` registration. SHARER: none — the state
+ * is private to that call. TEARDOWN: the returned `dispose()`, the ONE path
+ * that ends the subscription (`editor-game/src/host/roots/r3f-root.tsx` calls it
+ * from the mounted root's own `dispose()`).
+ */
+
+import type { PerformanceFrame, PerformanceProfiler } from './performance-profiler';
+
+/**
+ * The profiler phase name the three adapter brackets its CPU render
+ * submission with — spelled HERE and nowhere else, so the producer
+ * (`editor-game/src/host/roots/r3f-root.tsx`) and the consumer ({@link foldProfilerFrame})
+ * cannot drift apart. Dotted, so it reads as a decomposition of the enclosing
+ * `render` phase rather than a ninth peer of `SystemPhase`.
+ */
+export const RENDER_SUBMIT_PHASE = 'render.submit';
+
+/**
+ * The phases whose cost is SIMULATION. Deliberately not "everything that is
+ * not render": `preRender` (LOD selection, particle stepping, culling prep) is
+ * neither the simulation nor the submission, so it lands in the hitch's
+ * `other` bucket where an investigation can see it. `render` itself is
+ * excluded because {@link RENDER_SUBMIT_PHASE} nests inside it — summing both
+ * would double-count the draw.
+ */
+export const SIM_PHASES: readonly string[] = [
+  'input',
+  'prePhysics',
+  'physics',
+  'postPhysics',
+  'gameLogic',
+  'animation',
+];
+
+/** Display frames per worst-frame window — ~5 s at 60 Hz, so the reported
+ *  worst (the max of the current and previous window) survives 5–10 s. */
+export const WORST_WINDOW_FRAMES = 300;
+
+/** A display frame at or above this is worth decomposing. ~3 dropped frames at
+ *  60 Hz: below it, ordinary jitter would rewrite the reading constantly. */
+export const HITCH_THRESHOLD_MS = 50;
+
+/** Smoothing for the frame-time reading — a readable number, not a blur. */
+export const FRAME_TIME_EMA_ALPHA = 0.05;
+
+/** Smoothing for the render-CPU reading. Faster than frame time: submission
+ *  cost is what a draw-call diet moves, and it should visibly move. */
+export const RENDER_CPU_EMA_ALPHA = 0.1;
+
+/**
+ * A hitch, split into the three buckets that route an investigation. `other`
+ * is the diagnostic payload, not a rounding remainder: when it dominates, the
+ * thief is neither the renderer nor the simulation — it is GC, asset decode,
+ * a layout-thrashing DOM overlay, or the browser itself — and every minute
+ * spent on draw calls would have been wasted.
+ */
+export interface HitchDecomposition {
+  /** The display frame's wall-clock cost. */
+  readonly totalMs: number;
+  /** CPU spent submitting draws ({@link RENDER_SUBMIT_PHASE}). */
+  readonly renderMs: number;
+  /** CPU spent in {@link SIM_PHASES}, summed over the substeps this frame
+   *  consumed. */
+  readonly simMs: number;
+  /** Everything else in the wall clock — see this interface's own note. May be
+   *  negative if a measurement straddles the frame boundary; reported as
+   *  measured rather than clamped to a tidier lie. */
+  readonly otherMs: number;
+  /** The one-line reading: `"NNms = render X + sim Y + other Z"`. */
+  readonly text: string;
+}
+
+/** Split one display frame's wall clock into render / sim / other. Pure. */
+export function decomposeHitch(
+  totalMs: number,
+  renderMs: number,
+  simMs: number,
+): HitchDecomposition {
+  const otherMs = totalMs - renderMs - simMs;
+  return {
+    totalMs,
+    renderMs,
+    simMs,
+    otherMs,
+    text:
+      `${totalMs.toFixed(0)}ms = render ${renderMs.toFixed(0)} + ` +
+      `sim ${simMs.toFixed(0)} + other ${otherMs.toFixed(0)}`,
+  };
+}
+
+/** What `render.vitals` reads. Every field is `null` until the fold has
+ *  actually measured it — a stopped, headless or never-drawn game reports
+ *  emptiness rather than a fabricated `0 ms / 0 draws`. */
+export interface RenderVitalsReading {
+  /** Smoothed wall-clock ms per display frame. */
+  readonly frameTimeMs: number | null;
+  /** Frames per second implied by {@link frameTimeMs}. */
+  readonly fps: number | null;
+  /** Draw calls in the last reported draw. */
+  readonly drawCalls: number | null;
+  /** Triangles in the last reported draw. */
+  readonly triangles: number | null;
+  /** Smoothed CPU ms spent submitting draws — invisible in frame time once
+   *  vsync caps the loop, and exactly what fewer draw calls would improve. */
+  readonly renderCpuMs: number | null;
+  /** Top-level `renderer.render()` submissions the last presentation took. */
+  readonly renderPasses: number | null;
+  /** Worst display frame in the last one-to-two windows. */
+  readonly worstFrameMs: number | null;
+  /** The most recent frame over {@link HITCH_THRESHOLD_MS}, decomposed. */
+  readonly lastHitch: HitchDecomposition | null;
+  /** How many display frames the fold has seen. `0` reads as "nothing has
+   *  presented yet", which is why every reading above is `null`. */
+  readonly presentedFrames: number;
+}
+
+/** The fold's accumulator. Mutable by design (one allocation for the life of a
+ *  mount, written once per profiler frame); read through
+ *  {@link readRenderVitals}. */
+export interface RenderVitalsState {
+  /** Highest profiler frame id already folded — the dedupe that makes the fold
+   *  safe to drive from `profiler.subscribe`, which also fires for
+   *  enabled/recording changes that publish no new frame. */
+  lastFrameId: number;
+  /** `timestamp` of the last presentation, or `null` before the first (there
+   *  is no interval to measure from one sample). */
+  lastPresentAt: number | null;
+  /** Sim CPU accumulated since the last presentation. */
+  pendingSimMs: number;
+  frameTimeMs: number | null;
+  renderCpuMs: number | null;
+  drawCalls: number | null;
+  triangles: number | null;
+  renderPasses: number | null;
+  /** Running max of the CURRENT worst-frame window. */
+  worstCurrentMs: number;
+  /** The PREVIOUS window's max, kept so the reading does not drop to zero the
+   *  instant a window rolls over. */
+  worstPreviousMs: number;
+  /** Display frames counted into the current window. */
+  worstWindowFrames: number;
+  lastHitch: HitchDecomposition | null;
+  presentedFrames: number;
+}
+
+export function createRenderVitalsState(): RenderVitalsState {
+  return {
+    lastFrameId: 0,
+    lastPresentAt: null,
+    pendingSimMs: 0,
+    frameTimeMs: null,
+    renderCpuMs: null,
+    drawCalls: null,
+    triangles: null,
+    renderPasses: null,
+    worstCurrentMs: 0,
+    worstPreviousMs: 0,
+    worstWindowFrames: 0,
+    lastHitch: null,
+    presentedFrames: 0,
+  };
+}
+
+/** Sum of one frame's phase timings whose names are in `names`. */
+function sumPhases(frame: PerformanceFrame, names: readonly string[]): number {
+  let total = 0;
+  for (const timing of frame.phases) if (names.includes(timing.name)) total += timing.ms;
+  return total;
+}
+
+/** This frame's CPU render submission, or `null` when it was not a
+ *  presentation (no draw happened, so no bracket was recorded). */
+function submissionMs(frame: PerformanceFrame): number | null {
+  for (const timing of frame.phases) if (timing.name === RENDER_SUBMIT_PHASE) return timing.ms;
+  return null;
+}
+
+function ema(previous: number | null, sample: number, alpha: number): number {
+  return previous === null ? sample : previous * (1 - alpha) + sample * alpha;
+}
+
+/**
+ * Fold ONE profiler frame into the accumulator. Pure with respect to time and
+ * randomness — every input is on the frame — which is what makes the whole
+ * derivation testable from synthetic frames with no renderer, no clock and no
+ * game.
+ *
+ * Returns `true` when the frame was a presentation (the readings moved).
+ */
+export function foldProfilerFrame(state: RenderVitalsState, frame: PerformanceFrame): boolean {
+  // Re-publishes and the ring's own re-reads must not double-count. Frame ids
+  // are monotonic for the profiler's whole life, including across `clear()`.
+  if (frame.id <= state.lastFrameId) return false;
+  state.lastFrameId = frame.id;
+
+  // Counters ride whichever frame `reportRender` landed on — see the module
+  // note. `renderPasses !== null` is the marker that a reporter spoke at all;
+  // a frame nobody reported on leaves the previous reading standing rather
+  // than blanking it to a zero that would read as "nothing is drawn".
+  if (frame.render.renderPasses !== null) {
+    state.drawCalls = frame.render.drawCalls;
+    state.triangles = frame.render.triangles;
+    state.renderPasses = frame.render.renderPasses;
+  }
+
+  state.pendingSimMs += sumPhases(frame, SIM_PHASES);
+
+  const renderMs = submissionMs(frame);
+  if (renderMs === null) return false; // a sim substep: its cost is now pending
+
+  const simMs = state.pendingSimMs;
+  state.pendingSimMs = 0;
+  state.presentedFrames += 1;
+  state.renderCpuMs = ema(state.renderCpuMs, renderMs, RENDER_CPU_EMA_ALPHA);
+
+  const previousAt = state.lastPresentAt;
+  state.lastPresentAt = frame.timestamp;
+  // The FIRST presentation has no interval behind it. Everything that needs a
+  // dt (frame time, worst frame, the hitch) waits for the second one; the
+  // alternative is to invent an interval from the profiler's own start, which
+  // would report the mount cost as a frame time forever.
+  if (previousAt === null) return true;
+
+  const dt = frame.timestamp - previousAt;
+  state.frameTimeMs = ema(state.frameTimeMs, dt, FRAME_TIME_EMA_ALPHA);
+
+  if (dt > state.worstCurrentMs) state.worstCurrentMs = dt;
+  state.worstWindowFrames += 1;
+  if (state.worstWindowFrames >= WORST_WINDOW_FRAMES) {
+    state.worstPreviousMs = state.worstCurrentMs;
+    state.worstCurrentMs = 0;
+    state.worstWindowFrames = 0;
+  }
+
+  // Blame the hitch with THIS frame's own measurements: `dt` spans the work
+  // between the two presentations, which is exactly the submission just
+  // measured plus the substeps that ran in between.
+  if (dt >= HITCH_THRESHOLD_MS) state.lastHitch = decomposeHitch(dt, renderMs, simMs);
+
+  return true;
+}
+
+function round(value: number | null, places: number): number | null {
+  if (value === null) return null;
+  const factor = 10 ** places;
+  return Math.round(value * factor) / factor;
+}
+
+/** The provider body — pure over the accumulator. */
+export function readRenderVitals(state: RenderVitalsState): RenderVitalsReading {
+  const frameTimeMs = round(state.frameTimeMs, 2);
+  const worst = Math.max(state.worstCurrentMs, state.worstPreviousMs);
+  return {
+    frameTimeMs,
+    fps: frameTimeMs !== null && frameTimeMs > 0 ? round(1000 / frameTimeMs, 1) : null,
+    drawCalls: state.drawCalls,
+    triangles: state.triangles,
+    renderCpuMs: round(state.renderCpuMs, 2),
+    renderPasses: state.renderPasses,
+    worstFrameMs: state.frameTimeMs === null ? null : round(worst, 2),
+    lastHitch: state.lastHitch,
+    presentedFrames: state.presentedFrames,
+  };
+}
+
+/** What {@link createRenderVitals} hands back. */
+export interface RenderVitals {
+  /** The `render.vitals` provider body. */
+  read(): RenderVitalsReading;
+  /** See the module's ownership note — the ONE path that ends the
+   *  subscription. Idempotent. */
+  dispose(): void;
+}
+
+/**
+ * Attach a fold to a live profiler. `subscribe` fires once per published
+ * frame (and on enabled/recording changes, which the id dedupe absorbs), so
+ * nothing here polls and nothing here owns a timer.
+ */
+export function createRenderVitals(profiler: PerformanceProfiler): RenderVitals {
+  const state = createRenderVitalsState();
+  const unsubscribe = profiler.subscribe(() => {
+    const frame = profiler.getSnapshot().frames.at(-1);
+    if (frame) foldProfilerFrame(state, frame);
+  });
+  let disposed = false;
+  return {
+    read: () => readRenderVitals(state),
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      unsubscribe();
+    },
+  };
+}