@zkmake/three-meter 0.7.0 → 0.9.0

package/dist/{mount-perf-hud-DqY_tP6s.js → mount-perf-hud-CdhGeWXh.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.9.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;
@@ -930,7 +957,6 @@ var PerformanceView = class {
 	graphCheckboxes = /* @__PURE__ */ new Map();
 	statValueEls = /* @__PURE__ */ new Map();
 	statCheckboxes = /* @__PURE__ */ new Map();
-	dimCheckbox;
 	infoCheckbox;
 	themeRadios = /* @__PURE__ */ new Map();
 	footerThreeEl;
@@ -947,6 +973,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 +1048,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();
@@ -1105,13 +1188,6 @@ var PerformanceView = class {
 			segment.append(radio);
 		}
 		themeRow.append(createIcon("contrast", "perf-monitor__icon"), themeLabel, segment);
-		const dimRow = document.createElement("label");
-		dimRow.className = "perf-monitor__row";
-		this.dimCheckbox = this.buildCheckbox(this.settings.dim, "Dim the performance panel when the pointer leaves", (on) => this.settings.setDim(on));
-		const dimLabel = document.createElement("span");
-		dimLabel.className = "perf-monitor__label";
-		dimLabel.textContent = "dim on leave";
-		dimRow.append(createIcon("blend", "perf-monitor__icon"), dimLabel, this.dimCheckbox);
 		const explainRow = document.createElement("label");
 		explainRow.className = "perf-monitor__row";
 		const explainCheckbox = this.buildCheckbox(false, "Explain each metric", (on) => this.element.classList.toggle("perf-monitor--explain", on));
@@ -1119,7 +1195,7 @@ var PerformanceView = class {
 		explainLabel.className = "perf-monitor__label";
 		explainLabel.textContent = "explain metrics";
 		explainRow.append(createIcon("help", "perf-monitor__icon"), explainLabel, explainCheckbox);
-		options.append(themeRow, dimRow, explainRow, this.buildReportRow());
+		options.append(themeRow, explainRow, this.buildReportRow());
 		const graphs = document.createElement("div");
 		graphs.className = "perf-monitor__graphs";
 		for (const config of TIMINGS) {
@@ -1207,7 +1283,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;
@@ -1228,10 +1304,13 @@ var PerformanceView = class {
 			label.className = "perf-monitor__graph-label";
 			label.textContent = config.label;
 			label.title = METRIC_HELP[config.metric] ?? "";
+			const head = document.createElement("span");
+			head.className = "perf-monitor__graph-head";
+			head.append(createIcon(config.icon, "perf-monitor__icon"), label);
 			const value = document.createElement("span");
 			value.className = "perf-monitor__graph-value";
 			value.textContent = "—";
-			overlay.append(label, value);
+			overlay.append(head, value);
 			row.append(canvas, overlay);
 			this.hudGraphsEl.append(row);
 			const ctx = canvas.getContext("2d");
@@ -1252,8 +1331,8 @@ var PerformanceView = class {
 			item.className = "perf-monitor__hud-item";
 			const label = document.createElement("span");
 			label.className = "perf-monitor__hud-label";
-			label.textContent = config.label;
 			label.title = METRIC_HELP[config.key] ?? "";
+			label.append(createIcon(config.icon, "perf-monitor__icon"), config.label);
 			const value = document.createElement("span");
 			value.className = "perf-monitor__hud-value";
 			value.textContent = "—";
@@ -1267,7 +1346,6 @@ var PerformanceView = class {
 	onSelectionChanged() {
 		for (const [metric, checkbox] of this.graphCheckboxes) checkbox.checked = this.settings.isGraphEnabled(metric);
 		for (const [key, checkbox] of this.statCheckboxes) checkbox.checked = this.settings.isNumberEnabled(key);
-		this.dimCheckbox.checked = this.settings.dim;
 		this.infoCheckbox.checked = this.settings.info;
 		this.applyInfoClass();
 		this.theme.setOverride(this.settings.theme);
@@ -1278,6 +1356,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 +1717,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;
@@ -1630,10 +1863,19 @@ const PERF_HUD_STYLES = `
 }
 
 .perf-monitor__hud-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   color: var(--perf-muted);
   font-size: 10px;
 }
 
+.perf-monitor__hud-label .perf-monitor__icon,
+.perf-monitor__hud-graph .perf-monitor__icon {
+  width: 11px;
+  height: 11px;
+}
+
 .perf-monitor__hud-value {
   font-weight: 600;
   font-variant-numeric: tabular-nums lining-nums;
@@ -1850,6 +2092,11 @@ const PERF_HUD_STYLES = `
   outline: 1px solid color-mix(in srgb, var(--perf-accent) 60%, transparent);
   outline-offset: 1px;
 }
+
+/* Dim on: the mark takes the accent, so on and off differ even under the hover ring. */
+.perf-hud__dim[aria-pressed="true"] {
+  color: var(--perf-accent);
+}
 `;
 /**
 * Append the stylesheet to `target`'s head, once. Call before mounting a view
@@ -1870,6 +2117,7 @@ const disc = (label, className, icon) => {
 	button.type = "button";
 	button.className = `perf-hud__disc ${className}`.trim();
 	button.setAttribute("aria-label", label);
+	button.title = label;
 	button.append(createIcon(icon, "perf-hud__icon"));
 	return button;
 };
@@ -1890,7 +2138,9 @@ const mountPerfHud = (monitor, options = {}) => {
 	tools.className = "perf-hud__tools";
 	const grip = disc("Drag performance panel", "perf-hud__drag", "grip");
 	const toggle = disc("Toggle full performance metrics", "", "sliders");
-	tools.append(grip, toggle);
+	const dim = disc("Dim the panel when the pointer leaves", "perf-hud__dim", "blend");
+	dim.addEventListener("click", () => settings.setDim(!settings.dim));
+	tools.append(grip, toggle, dim);
 	const view = new PerformanceView({
 		budgets: options.budgets,
 		mode: options.mode ?? "compact",
@@ -1906,6 +2156,7 @@ const mountPerfHud = (monitor, options = {}) => {
 	};
 	const applyDim = () => {
 		host.classList.toggle("perf-hud--dim", settings.dim);
+		dim.setAttribute("aria-pressed", String(settings.dim));
 	};
 	applyMode();
 	applyDim();
@@ -1980,4 +2231,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-CdhGeWXh.js.map