Skip to content

Commit bdfb5f5

Browse files
alowpolyalowpoly
authored
Builder workbench and renderer update benchmarks (#34)
* chore(agents): rename chrome trace skill * perf(core): reuse gltf animation caches * perf(polycss): optimize polygon leaf updates * chore(bench): add renderer update benchmarks * feat(website): overhaul builder workbench --------- Co-authored-by: agustin-littlehat <minotopo@gmail.com>
1 parent 7d1caa0 commit bdfb5f5

83 files changed

Lines changed: 5159 additions & 572 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.agents/skills/chrome-capture-trace/agents/openai.yaml‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

.agents/skills/chrome-capture-trace/SKILL.md renamed to .agents/skills/chrome-trace/SKILL.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
name: chrome-capture-trace
2+
name: chrome-trace
33
description: Capture and analyze Chrome/Chromium performance traces with Playwright around a concrete browser interaction. Use when Codex needs to answer where frame time is spent during an update, drag, rotation, scroll, animation, camera movement, light movement, DOM/CSS render change, or other performance-sensitive UI action; especially when the right answer requires per-frame Chrome trace evidence instead of FPS-only guesses.
44
---
55

6-
# Chrome Capture Trace
6+
# Chrome Trace
77

88
## Core Workflow
99

@@ -26,12 +26,12 @@ Use `scripts/trace.mjs` as the front door:
2626

2727
```bash
2828
pnpm bench:build
29-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --variant baseline --dom-samples --label elephant-baseline
30-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
31-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
32-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs drag --mesh teapot --mode baked --frame-details --label teapot-drag
33-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --mesh garden --report --markdown-out bench/results/garden-trace.md
34-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs compare bench/results/before.json bench/results/after.json --markdown-out bench/results/trace-compare.md
29+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --variant baseline --dom-samples --label elephant-baseline
30+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
31+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --variant baseline --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
32+
node .agents/skills/chrome-trace/scripts/trace.mjs drag --mesh teapot --mode baked --frame-details --label teapot-drag
33+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --mesh garden --report --markdown-out bench/results/garden-trace.md
34+
node .agents/skills/chrome-trace/scripts/trace.mjs compare bench/results/before.json bench/results/after.json --markdown-out bench/results/trace-compare.md
3535
```
3636

3737
Use `trace.mjs motion` for steady bench motion across `perf` and `nonvoxel` pages, cadence buckets, DOM samples, render stats, and tag counts.
@@ -65,7 +65,7 @@ Trace event durations are inclusive and often nested, especially GPU/viz and sch
6565
For arbitrary pages, use `trace.mjs generic`:
6666

6767
```bash
68-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic \
68+
node .agents/skills/chrome-trace/scripts/trace.mjs generic \
6969
--url http://127.0.0.1:3000 \
7070
--ready-js "window.appReady === true" \
7171
--action drag \
@@ -80,23 +80,23 @@ node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic \
8080
Useful alternatives:
8181

8282
```bash
83-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action wait --sample 3000
84-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action eval --eval "window.rotateScene?.(Math.PI / 2)"
85-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action scroll --scroll "0,900"
83+
node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action wait --sample 3000
84+
node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action eval --eval "window.rotateScene?.(Math.PI / 2)"
85+
node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action scroll --scroll "0,900"
8686
```
8787

8888
## Comparing Runs
8989

9090
Use `--report` on a runner to generate a Markdown report after capture, or use `trace.mjs report` on an existing summary JSON:
9191

9292
```bash
93-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
93+
node .agents/skills/chrome-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
9494
```
9595

9696
Use `trace.mjs compare` on summary JSON files from any runner:
9797

9898
```bash
99-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs compare before.json after.json --markdown-out trace-compare.md
99+
node .agents/skills/chrome-trace/scripts/trace.mjs compare before.json after.json --markdown-out trace-compare.md
100100
```
101101

102102
Read positive deltas in `frame_time_*_ms` and trace group `ms/frame` as more expensive after the change. Read positive FPS deltas as better.

‎.agents/skills/chrome-trace/agents/openai.yaml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
interface:
2+
display_name: "Chrome Trace"
3+
short_description: "Capture and analyze Chrome performance traces"
4+
default_prompt: "Use $chrome-trace to capture a Chrome trace around an interaction and identify where frame time is spent."

.agents/skills/chrome-capture-trace/scripts/capture-trace.mjs renamed to .agents/skills/chrome-trace/scripts/capture-trace.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -563,7 +563,7 @@ async function run() {
563563
: summarizeEvents(traceEvents, 0, -Infinity, Infinity, frames);
564564

565565
const summary = {
566-
kind: "chrome-capture-trace",
566+
kind: "chrome-trace",
567567
url: URL,
568568
viewport,
569569
action,
@@ -590,7 +590,7 @@ async function run() {
590590
traceEvents,
591591
displayTimeUnit: "ms",
592592
metadata: {
593-
source: "chrome-capture-trace/scripts/capture-trace.mjs",
593+
source: "chrome-trace/scripts/capture-trace.mjs",
594594
url: URL,
595595
action,
596596
gpuDetails: GPU_DETAILS_MODE,

.agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs renamed to .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@
77
* and writes both a Chrome trace file and a compact JSON summary.
88
*
99
* Usage:
10-
* node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs
11-
* node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --mesh teapot --mode baked --label teapot-drag
12-
* node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --degrees 360 --drag-ms 1500 --steps 120
13-
* node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --variant force-atlas --trace-out bench/results/teapot.trace.json
14-
* node .agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs --frame-details --no-print-json
10+
* node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs
11+
* node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --mesh teapot --mode baked --label teapot-drag
12+
* node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --degrees 360 --drag-ms 1500 --steps 120
13+
* node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --variant force-atlas --trace-out bench/results/teapot.trace.json
14+
* node .agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs --frame-details --no-print-json
1515
*/
1616
import { createServer } from "node:http";
1717
import { mkdirSync, writeFileSync } from "node:fs";
@@ -877,7 +877,7 @@ async function run() {
877877
traceEvents: events,
878878
displayTimeUnit: "ms",
879879
metadata: {
880-
source: ".agents/skills/chrome-capture-trace/scripts/polycss-nonvoxel-drag-trace.mjs",
880+
source: ".agents/skills/chrome-trace/scripts/polycss-nonvoxel-drag-trace.mjs",
881881
mesh: MESH,
882882
mode: MODE,
883883
variant: VARIANT,

.agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs renamed to .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
* samples, and reports compositor/style/raster/script cost per cadence bucket.
77
*
88
* Usage:
9-
* node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs
10-
* node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --mesh ancient-crash-site --runs 3 --dom-samples
11-
* node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --mesh obj-house3 --renderer vanilla --label obj-house3-trace
12-
* node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh glb:Elephant.glb --variant order-tile4 --no-trace
13-
* node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh teapot --frame-details --layer-details
9+
* node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs
10+
* node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --mesh ancient-crash-site --runs 3 --dom-samples
11+
* node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --mesh obj-house3 --renderer vanilla --label obj-house3-trace
12+
* node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh glb:Elephant.glb --variant order-tile4 --no-trace
13+
* node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs --page nonvoxel --mesh teapot --frame-details --layer-details
1414
*/
1515
import { createServer } from "node:http";
1616
import { mkdirSync, writeFileSync } from "node:fs";
@@ -64,6 +64,7 @@ const MODE = optStr("mode", "baked");
6464
const MOTION = optStr("motion", "rot");
6565
const RENDERER = optStr("renderer", "vanilla");
6666
const VARIANT = optStr("variant", "baseline");
67+
const DISABLE_STRATEGIES = optStr("disable-strategies", optStr("disableStrategies", ""));
6768
const WARMUP_MS = optNum("warmup", 1500);
6869
const SAMPLE_MS = optNum("sample", 6000);
6970
const RUNS = optNum("runs", 1);
@@ -266,7 +267,7 @@ const KEY_EVENTS = [
266267
];
267268

268269
function printHelp() {
269-
console.log(`Usage: node .agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs [options]
270+
console.log(`Usage: node .agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs [options]
270271
271272
Options:
272273
--page <name> perf | nonvoxel. Default: perf
@@ -953,7 +954,13 @@ function pageUrl(port) {
953954
if (PAGE !== "perf") {
954955
throw new Error(`Unknown --page "${PAGE}". Expected "perf" or "nonvoxel".`);
955956
}
956-
return `http://127.0.0.1:${port}/perf-${RENDERER}.html?mesh=${encodeURIComponent(MESH)}&mode=${encodeURIComponent(MODE)}&motion=${encodeURIComponent(MOTION)}`;
957+
const params = new URLSearchParams({
958+
mesh: MESH,
959+
mode: MODE,
960+
motion: MOTION,
961+
...(DISABLE_STRATEGIES ? { disableStrategies: DISABLE_STRATEGIES } : {}),
962+
});
963+
return `http://127.0.0.1:${port}/perf-${RENDERER}.html?${params.toString()}`;
957964
}
958965

959966
function traceOutputPath(repeat) {
@@ -1085,7 +1092,7 @@ async function runOnce(port, repeat) {
10851092
traceEvents: events,
10861093
displayTimeUnit: "ms",
10871094
metadata: {
1088-
source: ".agents/skills/chrome-capture-trace/scripts/polycss-trace-analysis.mjs",
1095+
source: ".agents/skills/chrome-trace/scripts/polycss-trace-analysis.mjs",
10891096
page: PAGE,
10901097
mesh: MESH,
10911098
renderer: RENDERER,

.agents/skills/chrome-capture-trace/scripts/trace.mjs renamed to .agents/skills/chrome-trace/scripts/trace.mjs

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const RUNNERS = new Map([
2424

2525
function printHelp() {
2626
console.log(`Usage:
27-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs <command> [options]
27+
node .agents/skills/chrome-trace/scripts/trace.mjs <command> [options]
2828
2929
Commands:
3030
polycss-motion Steady perf/nonvoxel bench trace buckets.
@@ -39,14 +39,14 @@ Aliases:
3939
capture -> generic
4040
4141
Examples:
42-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --dom-samples --label elephant
43-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
44-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
45-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs drag --mesh teapot --degrees 360 --frame-details --label teapot-drag
46-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action drag --selector "#viewport"
47-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs motion --report --markdown-out bench/results/garden.md
48-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
49-
node .agents/skills/chrome-capture-trace/scripts/trace.mjs compare before.json after.json --markdown-out report.md
42+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh glb:Elephant.glb --dom-samples --label elephant
43+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --dom-samples --frame-details --layer-details --gpu-details --trace-out bench/results/teapot.trace.json --label teapot-enriched --report
44+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --page nonvoxel --mesh teapot --gpu-details full --trace-out bench/results/teapot-full-gpu.trace.json --label teapot-full-gpu
45+
node .agents/skills/chrome-trace/scripts/trace.mjs drag --mesh teapot --degrees 360 --frame-details --label teapot-drag
46+
node .agents/skills/chrome-trace/scripts/trace.mjs generic --url http://127.0.0.1:3000 --action drag --selector "#viewport"
47+
node .agents/skills/chrome-trace/scripts/trace.mjs motion --report --markdown-out bench/results/garden.md
48+
node .agents/skills/chrome-trace/scripts/trace.mjs report bench/results/garden.json --markdown-out bench/results/garden.md
49+
node .agents/skills/chrome-trace/scripts/trace.mjs compare before.json after.json --markdown-out report.md
5050
`);
5151
}
5252

@@ -565,7 +565,7 @@ function ensureReportSummaryPath(cmd, args) {
565565
if (cmd === "polycss-motion" || cmd === "motion" || cmd === "polycss-buckets" || cmd === "buckets") {
566566
const label = argValue(args, "label");
567567
if (label) return { childArgs: args, summaryPath: inferSummaryPath(cmd, args) };
568-
const file = resolve(tmpdir(), `chrome-capture-trace-${Date.now()}.json`);
568+
const file = resolve(tmpdir(), `chrome-trace-${Date.now()}.json`);
569569
return { childArgs: appendArg(args, "summary-out", file), summaryPath: file };
570570
}
571571

0 commit comments

Comments
 (0)