@zkmake/three-meter 0.7.0 → 0.8.0

package/README.md

@@ -1,29 +1,38 @@
 # @zkmake/three-meter
 
-Frame metrics for a three.js renderer: FPS, CPU ms, GPU ms, draw calls, render passes, triangles,
-geometries, textures and programs, with a small dockable HUD. Zero dependencies. Works with
-`WebGLRenderer` and `WebGPURenderer`, with or without React.
+Frame metrics for a three.js renderer, with a small dockable HUD: FPS, CPU and GPU time, stutter
+(1% low, p99 frame time, hitches), draw calls, render passes, triangles, and the geometries,
+textures and shaders in GPU memory. Zero dependencies. Works with `WebGLRenderer` and
+`WebGPURenderer`, with or without React.
 
 ```sh
 bun add -d @zkmake/three-meter   # or npm i -D / pnpm add -D
 ```
 
 Live demo: [three-meter.pages.dev](https://three-meter.pages.dev/), with a vanilla three and a
-React Three Fiber take on the same scene. Add `?webgpu` for the WebGPU renderer and `?count=5000` to
-load the scene up.
+React Three Fiber take on the same scene. Add `?webgpu` for the WebGPU renderer and `?count=30000` to
+load the scene up past the demo's triangle budget.
 
 <p align="center">
   <img
     src="https://raw.githubusercontent.com/zkmake/three-meter/main/docs/hud-full.png"
     width="320"
-    alt="The HUD in full mode, dark theme. Option rows for theme (light, system, dark), dim on leave, explain metrics and a copy-report button; FPS, CPU and GPU sparklines with live values; then one row per metric, each with an icon, its value and a checkbox choosing whether the compact card shows it (FPS, calls, CPU, GPU, 1% low, frame p99, hitches, triangles, lines, points, render passes, geometries, textures, shaders); and a footer with the three-meter version, the three revision, a WebGL2 backend badge and the GPU name. Two discs beside it: a drag grip and the compact/full toggle."
+    alt="The HUD in full mode, dark theme. Option rows for theme (light, system, dark), dim on leave, explain metrics and a copy-report button; FPS, CPU and GPU sparklines with live values, the FPS graph showing a dashed budget line; then one row per metric, each with an icon, its value and a checkbox choosing whether the compact card shows it (FPS, calls, CPU, GPU, 1% low, frame p99, hitches, triangles, lines, points, render passes, geometries, textures, shaders), with the triangle count in amber for being over its budget; and a footer with the three-meter version, the three revision, a WebGL2 backend badge and the GPU name. Two discs beside it: a drag grip and the compact/full toggle."
   />
 </p>
 
-The sampler and the card are separate components, so toggling the HUD never remounts your canvas.
-GPU time is measured on WebGPU as well as WebGL. The counters are draw calls, render passes and
-resource counts, which is what you watch when a scene is instanced. The card docks to a screen edge,
-remembers where you put it, and hides its controls until the pointer comes near.
+- **Spot problems at a glance.** Values past their budget turn amber, and every metric explains
+  itself on hover, so you don't need to know what a p99 is to see that one is bad.
+- **See stutter, not just averages.** 1% low, p99 frame time and hitch counts catch the frame that
+  drops every few seconds while the FPS average still reads 60.
+- **Real GPU time** from timer queries on WebGPU, and on WebGL in Chrome and Edge, not an estimate
+  from frame intervals.
+- **Find what's expensive.** A breakdown of draw calls and triangles by mesh and material shows
+  which objects to instance or merge.
+- **One-click bug reports.** Copy versions, backend, GPU and the current numbers as Markdown.
+- **Stays out of the way.** The sampler and the card are separate components, so toggling the HUD
+  never remounts your canvas. The card docks to a screen edge, remembers where you put it, and hides
+  its controls until the pointer comes near.
 
 ## Entry points
 
@@ -90,66 +99,34 @@ Canvas is its own React root. To run two canvases on one page, pass the same `st
 | `injectStyles`     | `true`             | Append the stylesheet once per document.                                                      |
 | `refreshHz`        | `10`               | Repaint rate.                                                                                 |
 | `budgets`          | timing defaults    | Limits past which a value turns amber. See [Budgets](#budgets).                               |
+| `label`            | `"Performance"`    | Accessible name of the panel.                                                                 |
 
 `PerformanceMonitor` and `PerfSampler` take `trackGPU` (default true), `gpuQueryPoolSize` (default 5),
 `historySize` (default 120) and `frameStatsSize` (default 1000).
 
-## Theme
-
-The HUD ships a dark and a light palette. Two layers decide which shows:
-
-1. **The panel's own pick.** The full view has a light / system / dark row. A pick there is kept
-   with the other settings under `storageKey` and wins while set.
-2. **Your `theme` option.** `dark`, `light`, or `system` (the default), which follows the OS and
-   switches when it does. Applies whenever the person using the HUD hasn't picked anything.
-
-Change your layer later from the handle, or from the `PerfHud` prop in React, which applies without
-remounting:
-
-```ts
-const hud = mountPerfHud(monitor, { theme: "system" });
-hud.setTheme("light"); // your layer: "dark" | "light" | "system"
-hud.getTheme(); // your layer, as asked for
-hud.settings.theme; // the panel's pick, or null
-hud.settings.setTheme(null); // clear the pick so your layer applies again
-hud.theme.effective; // whichever layer is in force
-hud.theme.resolved; // "dark" | "light", what is on screen right now
-hud.theme.subscribe(() => syncMyPageWith(hud.theme.resolved));
-```
-
-The resolved theme lands on `data-theme` of `.perf-hud` and `.perf-monitor`. To restyle either
-palette, override the `--perf-*` custom properties (`bg`, `fg`, `fg-dim`, `muted`, `row`,
-`border`, `accent`, `warn`, `shadow`) on those selectors. `warn` is the over-budget amber.
+## Reading the panel
 
-## GPU timing
+Every row has an icon, its value, and a checkbox on the right that puts it in the compact HUD. Hover
+a label for a one-line explanation of the metric and what a bad reading means, or tick **explain
+metrics** to show them all under the rows (also works on touch).
 
-On WebGL2 the monitor uses `EXT_disjoint_timer_query_webgl2`, which Chrome and Edge expose. Safari
-and Firefox don't, so the GPU row shows `—` and `sample.gpu.available` is `false`.
+## Stutter
 
-On WebGPU, construct the renderer with `trackTimestamp: true`. Timings resolve a frame or two late.
+Average FPS hides a hitch every few seconds. Three rows in the full view catch it, and any of them
+can be ticked into the compact HUD:
 
-## Environment
+- **1% low**: mean FPS across the slowest 1% of frames.
+- **Frame p99**: 99% of frames finish within this many ms.
+- **Hitches**: frames over twice the median frame time.
 
-The full view's footer has two rows: the three-meter version (linked to its release notes) and the
-three revision, then the backend and the GPU name. An amber `WebGL2 fallback` badge means
-`WebGPURenderer` couldn't get WebGPU. Its checkbox (off by default) shows the footer in the compact
-HUD too. The same data is on the monitor:
+They cover the last `frameStatsSize` frames (1000 by default, about 16 s at 60 Hz). Gaps over a
+second, like a hidden tab, are left out. Read them with `monitor.getFrameStats()`:
 
 ```ts
-monitor.getEnvironment();
-// { three: "186", backend: "webgpu", fallback: false, gpu: "Apple metal-3" }
+monitor.getFrameStats();
+// { frames: 1000, lowFps: 97.6, p99Ms: 10.2, hitches: 3 }
 ```
 
-`backend` is `null` until `WebGPURenderer.init()` settles. `gpu` comes from WebGPU's adapter info or
-WebGL's unmasked renderer string, and is `null` where the browser hides it. Chrome's WebGPU gives
-vendor and architecture, not the model.
-
-## Reading the panel
-
-Every row has an icon, its value, and a checkbox on the right that puts it in the compact HUD. Hover
-a label for a one-line explanation of the metric and what a bad reading means, or tick **explain
-metrics** to show them all under the rows (also works on touch).
-
 ## Budgets
 
 A value past its budget turns amber in the full view and the compact HUD, and its tooltip names the
@@ -167,47 +144,108 @@ hud.setBudgets({ gpu: null }); // null drops a default; false drops them all
 
 `PerfHud` takes the same `budgets` prop and applies changes live.
 
-## Stutter
+## Top costs
 
-Average FPS hides a hitch every few seconds. Three rows in the full view catch it, and any of them
-can be ticked into the compact HUD:
+The HUD tells you there are 400 draw calls; **top costs** tells you which objects they come from.
+Tick it in the full view for the five biggest costs in the main render pass, grouped by **meshes** or
+**materials**, sorted by draw calls or triangles. Click a row to log its three objects to the
+console.
 
-- **1% low**: mean FPS across the slowest 1% of frames.
-- **Frame p99**: 99% of frames finish within this many ms.
-- **Hitches**: frames over twice the median frame time.
+```text
+                     calls   tris
+tree ×300              300   9,600    ← 300 separate meshes: instance or merge them
+house                    6      12    ← one draw per material in the array
+dome                     2   7,936    ← transparent and double-sided draws twice
+grass ×20,000            1  40,000    ← already instanced
+```
 
-They cover the last `frameStatsSize` frames (1000 by default, about 16 s at 60 Hz). Gaps over a
-second, like a hidden tab, are left out. Read them with `monitor.getFrameStats()`:
+Meshes with the same name and geometry share a row, so unmerged copies stand out. The numbers are
+estimated from the scene graph the way three walks it: hidden objects, other layers and anything
+outside the camera's frustum are left out. Against three's own `renderer.info` on a test scene they
+matched exactly. Shadow maps and post-processing passes aren't included; the main pass is the render
+call that drew the most, so a full-screen quad rendered last doesn't stand in for the scene. It
+walks the scene only while open, twice a second.
 
 ```ts
-monitor.getFrameStats();
-// { frames: 1000, lowFps: 97.6, p99Ms: 10.2, hitches: 3 }
+monitor.getSceneCost();
+// { calls: 309, triangles: 57548, meshes: [{ label: "tree", calls: 300, … }, …], materials: […] }
 ```
 
 ## Bug reports
 
 The **report** row's copy button puts a Markdown snapshot on the clipboard: versions, backend, GPU,
-the current metrics, the stutter stats, the viewport and the user agent. Paste it into an issue.
+the current metrics, the stutter stats, the top three meshes, the viewport and the user agent. Paste it into an issue.
 `formatReport(monitor)` from `@zkmake/three-meter/ui` returns the same text.
 
 ```text
-three-meter v0.5.0 · three r186 · WebGL2 · Apple M4 Max
+three-meter v0.7.0 · three r186 · WebGL2 · Apple M4 Max
 FPS 120 · 1% low 98 · p99 10.2 ms · hitches 3 / 1,000 frames
 CPU 0.2 ms · GPU 0.7 ms
 Calls 1 · passes 1 · triangles 24,000 · lines 0 · points 0
 Geometries 1 · textures 1 · shaders 1
+Top: tree ×300 (300 calls, 9,600 tris) · house (6 calls, 12 tris) · dome (2 calls, 7,936 tris)
 Viewport 1280×720 @2x
 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) …
 ```
 
+## Environment
+
+The full view's footer has two rows: the three-meter version (linked to its release notes) and the
+three revision, then the backend and the GPU name. An amber `WebGL2 fallback` badge means
+`WebGPURenderer` couldn't get WebGPU. Its checkbox (off by default) shows the footer in the compact
+HUD too. The same data is on the monitor:
+
+```ts
+monitor.getEnvironment();
+// { three: "186", backend: "webgpu", fallback: false, gpu: "Apple metal-3" }
+```
+
+`backend` is `null` until `WebGPURenderer.init()` settles. `gpu` comes from WebGPU's adapter info or
+WebGL's unmasked renderer string, and is `null` where the browser hides it. Chrome's WebGPU gives
+vendor and architecture, not the model.
+
+## GPU timing
+
+On WebGL2 the monitor uses `EXT_disjoint_timer_query_webgl2`, which Chrome and Edge expose. Safari
+and Firefox don't, so the GPU row shows `—` and `sample.gpu.available` is `false`.
+
+On WebGPU, construct the renderer with `trackTimestamp: true`. Timings resolve a frame or two late.
+
+## Theme
+
+The HUD ships a dark and a light palette. Two layers decide which shows:
+
+1. **The panel's own pick.** The full view has a light / system / dark row. A pick there is kept
+   with the other settings under `storageKey` and wins while set.
+2. **Your `theme` option.** `dark`, `light`, or `system` (the default), which follows the OS and
+   switches when it does. Applies whenever the person using the HUD hasn't picked anything.
+
+Change your layer later from the handle, or from the `PerfHud` prop in React, which applies without
+remounting:
+
+```ts
+const hud = mountPerfHud(monitor, { theme: "system" });
+hud.setTheme("light"); // your layer: "dark" | "light" | "system"
+hud.getTheme(); // your layer, as asked for
+hud.settings.theme; // the panel's pick, or null
+hud.settings.setTheme(null); // clear the pick so your layer applies again
+hud.theme.effective; // whichever layer is in force
+hud.theme.resolved; // "dark" | "light", what is on screen right now
+hud.theme.subscribe(() => syncMyPageWith(hud.theme.resolved));
+```
+
+The resolved theme lands on `data-theme` of `.perf-hud` and `.perf-monitor`. To restyle either
+palette, override the `--perf-*` custom properties (`bg`, `fg`, `fg-dim`, `muted`, `row`,
+`border`, `accent`, `warn`, `shadow`) on those selectors. `warn` is the over-budget amber.
+
 ## Examples
 
 [`examples/site`](examples/site) is what runs at [three-meter.pages.dev](https://three-meter.pages.dev/):
 one Vite app with both integrations of the same scene, swapped from the header.
 [`src/demos/vanilla.ts`](examples/site/src/demos/vanilla.ts) is plain three with `mountPerfHud`;
 [`src/demos/r3f.tsx`](examples/site/src/demos/r3f.tsx) is React Three Fiber with `PerfSampler` and
-`PerfHud`. `?r3f` opens on Fiber, `?webgpu` uses `WebGPURenderer` in either, `?count=` scales the
-scene. The header's theme toggle sets the page theme and the HUD's `theme` layer together; the row
+`PerfHud`. Both set a 250K triangle budget on top of the timing defaults. `?r3f` opens on Fiber,
+`?webgpu` uses `WebGPURenderer` in either, `?count=` scales the scene. The header's theme toggle sets the page theme and the HUD's `theme` layer together; the row
 inside the panel overrides the HUD alone. Run `bun run dev` inside it.
 
 ## Shipping it

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { a as PerfRenderer, c as RenderCounts, d as TimingMetric, i as GpuTiming, l as ResourceCounts, n as Environment, o as PerformanceMonitorOptions, r as FrameStats, s as RenderBackend, t as PerformanceMonitor, u as Sample } from "./performance-monitor-CBN05_BC.js";
+import { a as GpuTiming, c as RenderBackend, d as Sample, f as SceneCost, i as FrameStats, l as RenderCounts, n as CostEntry, o as PerfRenderer, p as TimingMetric, r as Environment, s as PerformanceMonitorOptions, t as PerformanceMonitor, u as ResourceCounts } from "./performance-monitor-DgHxeQ2X.js";
 //#region src/core/ring-buffer.d.ts
 /**
  * Fixed-capacity numeric ring buffer. Backs the per-frame timing history the
@@ -32,5 +32,5 @@ type AnimationLoop<Args extends unknown[]> = (...args: Args) => void;
  */
 declare function wrapAnimationLoop<Args extends unknown[]>(monitor: PerformanceMonitor, loop: AnimationLoop<Args>): AnimationLoop<Args>;
 //#endregion
-export { type Environment, type FrameStats, type GpuTiming, type PerfRenderer, PerformanceMonitor, type PerformanceMonitorOptions, type RenderBackend, type RenderCounts, type ResourceCounts, RingBuffer, type Sample, type TimingMetric, wrapAnimationLoop };
+export { type CostEntry, type Environment, type FrameStats, type GpuTiming, type PerfRenderer, PerformanceMonitor, type PerformanceMonitorOptions, type RenderBackend, type RenderCounts, type ResourceCounts, RingBuffer, type Sample, type SceneCost, type TimingMetric, wrapAnimationLoop };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { n as RingBuffer, t as PerformanceMonitor } from "./performance-monitor-yxsxs57v.js";
+import { n as RingBuffer, t as PerformanceMonitor } from "./performance-monitor-DsBp13ts.js";
 //#region src/core/wrap-animation-loop.ts
 /**
 * Wrap a `renderer.setAnimationLoop` callback so each tick is one frame:

package/dist/{mount-perf-hud-DqY_tP6s.js → mount-perf-hud-B_cmTG2M.js}

@@ -486,6 +486,7 @@ const dockPanel = (element, options = {}) => {
 //#endregion
 //#region src/ui/icons.ts
 const ICON_MARKUP = {
+	flame: "<path d=\"M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z\"/>",
 	activity: "<path d=\"M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2\"/>",
 	box: "<path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"/><path d=\"m3.3 7 8.7 5 8.7-5\"/><path d=\"M12 22V12\"/>",
 	circleDot: "<circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"1\"/>",
@@ -526,7 +527,7 @@ const createIcon = (name, className) => {
 };
 //#endregion
 //#region package.json
-var version = "0.7.0";
+var version = "0.8.0";
 //#endregion
 //#region src/ui/clipboard.ts
 /**
@@ -604,7 +605,7 @@ const METRIC_HELP = {
 //#region src/ui/report.ts
 /**
 * A plain-text snapshot of the monitor for bug reports: versions, backend and
-* GPU, the current sample, stutter stats and the page. Fenced as a `text`
+* GPU, the current sample, stutter stats, the scene's top meshes and the page. Fenced as a `text`
 * code block so GitHub and Slack keep the line breaks.
 */
 const BACKEND_LABELS = {
@@ -619,7 +620,13 @@ const backendLabel = (environment) => {
 	return environment.fallback ? `${label} fallback` : label;
 };
 const ms = (value) => `${value.toFixed(1)} ms`;
-const renderReport = ({ environment, page, sample, stats }) => {
+/** Top meshes by draw calls, three at most: `Top: cubes ×2,000 (1 call, 24K tris) · …`. */
+const topMeshes = (cost) => `Top: ${cost.meshes.slice(0, 3).map((entry) => {
+	const copies = entry.instances > 1 ? ` ×${formatCount(entry.instances)}` : "";
+	const calls = `${formatCount(entry.calls)} ${entry.calls === 1 ? "call" : "calls"}`;
+	return `${entry.label}${copies} (${calls}, ${formatCount(entry.triangles)} tris)`;
+}).join(" · ")}`;
+const renderReport = ({ cost, environment, page, sample, stats }) => {
 	const { render, resources } = sample;
 	const heading = [
 		`three-meter v${version}`,
@@ -650,6 +657,7 @@ const renderReport = ({ environment, page, sample, stats }) => {
 			`shaders ${formatCount(resources.programs)}`
 		].join(" · ")
 	];
+	if (cost && cost.meshes.length > 0) lines.push(topMeshes(cost));
 	if (page) lines.push(`Viewport ${page.width}×${page.height} @${page.dpr}x`, page.userAgent);
 	return [
 		"```text",
@@ -665,6 +673,7 @@ const readPage = () => typeof window === "undefined" ? null : {
 };
 /** The report for `monitor` right now, as Markdown ready to paste into an issue. */
 const formatReport = (monitor) => renderReport({
+	cost: monitor.getSceneCost(),
 	environment: monitor.getEnvironment(),
 	page: readPage(),
 	sample: monitor.getSample(),
@@ -778,6 +787,24 @@ const THEME_OPTIONS = [
 const RELEASE_URL = `https://github.com/zkmake/three-meter/releases/tag/v${version}`;
 /** How long the report button says `copied` / `failed` before reading `copy` again. */
 const COPY_FEEDBACK_MS = 1500;
+/** Walking the scene graph isn't free; the top-costs list refreshes at 2 Hz while open. */
+const COSTS_INTERVAL_MS = 500;
+const COSTS_ROWS = 5;
+const COST_GROUPS = [{
+	group: "meshes",
+	label: "meshes"
+}, {
+	group: "materials",
+	label: "materials"
+}];
+const COSTS_HELP = "The scene's biggest draw costs in the main render pass, estimated from the scene graph. Hidden and off-screen objects are left out; shadow and post-processing passes aren't counted. Click a row to log its objects to the console.";
+/** `×2,000` for instances or copies; nothing for a single object. */
+const copiesOf = (entry) => entry.instances > 1 ? `×${formatCount(entry.instances)}` : "";
+const costTitle = (entry) => {
+	const objects = entry.objects.length;
+	const shape = entry.instances > objects ? `${formatCount(entry.instances)} instances in ${objects === 1 ? "one object" : `${objects} objects`}` : `${formatCount(objects)} ${objects === 1 ? "object" : "separate objects"}`;
+	return `${entry.label}: ${shape}, ${formatCount(entry.calls)} draw ${entry.calls === 1 ? "call" : "calls"}, ${formatCount(entry.triangles)} triangles. Click to log to the console.`;
+};
 const readTiming = (sample, metric) => {
 	switch (metric) {
 		case "fps": return sample.fps;
@@ -947,6 +974,14 @@ var PerformanceView = class {
 	lastPaintAt = 0;
 	resizeObserver;
 	unsubscribe;
+	costsOpen = false;
+	costGroup = "meshes";
+	costSort = "calls";
+	lastCostsAt = -Infinity;
+	costsBodyEl;
+	costsListEl;
+	costGroupRadios = /* @__PURE__ */ new Map();
+	costSortButtons = /* @__PURE__ */ new Map();
 	constructor(options) {
 		this.monitor = options.monitor;
 		this.settings = options.settings ?? new HudSettings();
@@ -1014,8 +1049,57 @@ var PerformanceView = class {
 		for (const config of TIMINGS) this.paintGraph(config, sample, this.graphValueEls.get(config.metric), this.graphCanvases.get(config.metric), "unavailable");
 		const stats = this.monitor.getFrameStats();
 		for (const config of NUMBERS) this.paintNumber(config, this.statValueEls.get(config.key), sample, stats);
+		if (this.costsOpen && performance.now() - this.lastCostsAt >= COSTS_INTERVAL_MS) this.renderCosts();
 		this.renderFooter();
 	}
+	renderCosts() {
+		this.lastCostsAt = performance.now();
+		const cost = this.monitor.getSceneCost();
+		if (!cost) {
+			this.costsListEl.replaceChildren(this.costsNote("No scene rendered yet."));
+			return;
+		}
+		const entries = [...this.costGroup === "meshes" ? cost.meshes : cost.materials];
+		if (this.costSort === "triangles") entries.sort((a, b) => b.triangles - a.triangles || b.calls - a.calls);
+		if (entries.length === 0) {
+			this.costsListEl.replaceChildren(this.costsNote("Nothing drawn."));
+			return;
+		}
+		const rows = entries.slice(0, COSTS_ROWS).map((entry) => {
+			const row = document.createElement("button");
+			row.type = "button";
+			row.className = "perf-monitor__cost";
+			row.title = costTitle(entry);
+			const name = document.createElement("span");
+			name.className = "perf-monitor__cost-name";
+			name.textContent = entry.label;
+			const copies = copiesOf(entry);
+			if (copies) {
+				const suffix = document.createElement("span");
+				suffix.className = "perf-monitor__cost-copies";
+				suffix.textContent = ` ${copies}`;
+				name.append(suffix);
+			}
+			const calls = document.createElement("span");
+			calls.className = "perf-monitor__cost-value";
+			calls.textContent = formatCount(entry.calls);
+			const triangles = document.createElement("span");
+			triangles.className = "perf-monitor__cost-value";
+			triangles.textContent = formatCount(entry.triangles);
+			row.append(name, calls, triangles);
+			row.addEventListener("click", () => {
+				console.log(`three-meter: ${entry.label}`, entry.objects);
+			});
+			return row;
+		});
+		this.costsListEl.replaceChildren(...rows);
+	}
+	costsNote(text) {
+		const note = document.createElement("div");
+		note.className = "perf-monitor__costs-note";
+		note.textContent = text;
+		return note;
+	}
 	/** The monitor caches the environment once its backend settles; until then this re-reads. */
 	renderFooter() {
 		const environment = this.monitor.getEnvironment();
@@ -1207,7 +1291,7 @@ var PerformanceView = class {
 		this.footerHardwareEl.append(this.footerBackendEl, this.footerGpuEl);
 		footerBody.append(softwareRow, this.footerHardwareEl);
 		footer.append(createIcon("info", "perf-monitor__icon"), footerBody, this.infoCheckbox);
-		this.element.append(hud, options, graphs, stats, footer);
+		this.element.append(hud, options, graphs, stats, this.buildCosts(), footer);
 	}
 	rebuildHud() {
 		const { selection } = this.settings;
@@ -1278,6 +1362,71 @@ var PerformanceView = class {
 		applyTheme(this.element, this.theme);
 		for (const [mode, radio] of this.themeRadios) radio.setAttribute("aria-checked", String(mode === this.theme.effective));
 	}
+	/** "top costs": a toggle row, then meshes / materials and a sortable top five. */
+	buildCosts() {
+		const section = document.createElement("div");
+		section.className = "perf-monitor__section perf-monitor__costs";
+		const toggleRow = document.createElement("label");
+		toggleRow.className = "perf-monitor__row";
+		toggleRow.title = COSTS_HELP;
+		const label = document.createElement("span");
+		label.className = "perf-monitor__label";
+		label.textContent = "top costs";
+		const checkbox = this.buildCheckbox(false, "Show the scene's biggest draw costs", (on) => {
+			this.costsOpen = on;
+			this.costsBodyEl.hidden = !on;
+			if (on) this.renderCosts();
+		});
+		toggleRow.append(createIcon("flame", "perf-monitor__icon"), label, checkbox);
+		this.costsBodyEl = document.createElement("div");
+		this.costsBodyEl.className = "perf-monitor__costs-body";
+		this.costsBodyEl.hidden = true;
+		const head = document.createElement("div");
+		head.className = "perf-monitor__cost perf-monitor__cost--head";
+		const segment = document.createElement("div");
+		segment.className = "perf-monitor__segment";
+		segment.setAttribute("role", "radiogroup");
+		segment.setAttribute("aria-label", "Group costs by");
+		for (const option of COST_GROUPS) {
+			const radio = document.createElement("button");
+			radio.type = "button";
+			radio.className = "perf-monitor__segment-option perf-monitor__segment-option--text";
+			radio.setAttribute("role", "radio");
+			radio.setAttribute("aria-checked", String(option.group === this.costGroup));
+			radio.textContent = option.label;
+			radio.addEventListener("click", () => {
+				this.costGroup = option.group;
+				for (const [group, button] of this.costGroupRadios) button.setAttribute("aria-checked", String(group === option.group));
+				this.renderCosts();
+			});
+			this.costGroupRadios.set(option.group, radio);
+			segment.append(radio);
+		}
+		head.append(segment);
+		for (const sort of ["calls", "triangles"]) {
+			const button = document.createElement("button");
+			button.type = "button";
+			button.className = "perf-monitor__cost-sort";
+			button.textContent = sort === "calls" ? "calls" : "tris";
+			button.title = `Sort by ${sort === "calls" ? "draw calls" : "triangles"}`;
+			button.setAttribute("aria-pressed", String(sort === this.costSort));
+			button.addEventListener("click", () => {
+				this.costSort = sort;
+				for (const [key, other] of this.costSortButtons) other.setAttribute("aria-pressed", String(key === sort));
+				this.renderCosts();
+			});
+			this.costSortButtons.set(sort, button);
+			head.append(button);
+		}
+		this.costsListEl = document.createElement("div");
+		this.costsListEl.className = "perf-monitor__costs-list";
+		const hint = document.createElement("span");
+		hint.className = "perf-monitor__hint";
+		hint.textContent = COSTS_HELP;
+		this.costsBodyEl.append(head, this.costsListEl, hint);
+		section.append(toggleRow, this.costsBodyEl);
+		return section;
+	}
 	buildReportRow() {
 		const row = document.createElement("div");
 		row.className = "perf-monitor__row perf-monitor__row--static";
@@ -1574,6 +1723,96 @@ const PERF_HUD_STYLES = `
   outline-offset: 1px;
 }
 
+/* Top costs: name, calls, triangles. Rows are buttons that log their objects. */
+.perf-monitor__costs-body {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding-top: 2px;
+}
+
+.perf-monitor__costs-body[hidden] {
+  display: none;
+}
+
+.perf-monitor__cost {
+  /* Rows are buttons, which shrink to their content without a width. */
+  box-sizing: border-box;
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 5ch 6ch;
+  gap: 6px;
+  align-items: baseline;
+  padding: 2px 6px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.perf-monitor__cost:not(.perf-monitor__cost--head):hover {
+  background: var(--perf-row);
+}
+
+.perf-monitor__cost:focus-visible {
+  outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
+  outline-offset: -1px;
+}
+
+.perf-monitor__cost--head {
+  align-items: center;
+  cursor: default;
+}
+
+.perf-monitor__cost-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--perf-fg-dim);
+}
+
+.perf-monitor__cost-copies {
+  color: var(--perf-muted);
+}
+
+.perf-monitor__cost-value {
+  font-variant-numeric: tabular-nums lining-nums;
+  text-align: right;
+}
+
+.perf-monitor__cost-sort {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--perf-muted);
+  font: inherit;
+  font-size: 10px;
+  text-align: right;
+  cursor: pointer;
+}
+
+.perf-monitor__cost-sort[aria-pressed="true"] {
+  color: var(--perf-fg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.perf-monitor__segment-option--text {
+  width: auto;
+  padding: 0 5px;
+  font: inherit;
+  font-size: 10px;
+}
+
+.perf-monitor__costs-note {
+  padding: 2px 6px;
+  color: var(--perf-muted);
+  font-size: 10px;
+}
+
 .perf-monitor__checkbox {
   flex: none;
   margin: 0;
@@ -1980,4 +2219,4 @@ const mountPerfHud = (monitor, options = {}) => {
 //#endregion
 export { formatReport as a, HudSettings as c, isThemeMode as d, resolveBudgets as f, PerformanceView as i, HudTheme as l, PERF_HUD_STYLES as n, dockPanel as o, injectStyles as r, DEFAULT_STORAGE_KEY as s, mountPerfHud as t, THEME_MODES as u };
 
-//# sourceMappingURL=mount-perf-hud-DqY_tP6s.js.map
+//# sourceMappingURL=mount-perf-hud-B_cmTG2M.js.map