@threeops/measure
v0.9.0
Published
Measure three.js / R3F scenes the way players get them: throttled phone capture with WebGL instrumentation, findings, before/after comparison and the visual report.
Maintainers
Readme
@threeops/measure
Measures three.js / R3F scenes the way players get them, for threeops verify and anything else that needs the numbers.
- Capture: loads a URL in Chromium as a mid-range phone (4× CPU slowdown, fast 4G) or a desktop, optionally driven by a
stepsscript. WebGL hooks record draw calls, triangles and the GPU memory actually uploaded (textures, render targets, buffers). Every 3D file the page downloaded is saved, along with cache and compression headers. A capture counts as settled when draw calls and uploads have held steady for 5 s (90 s at most). - Findings: per-model and scene-wide findings (budgets, texture outliers, assets downloaded but never drawn, caching, compression) and the project scan's findings, each marked automatic or guided.
- Compare:
compareCaptures(before, after)passes when the scene still loads its models and no measured number got meaningfully worse.verifyUrls(url, against, opts)measures both fresh, back to back, and writes the report,verify.jsonandside-by-side.html. - Report: the visual one-page HTML report, Markdown,
findings.json(threeops.audit/v1), a before/after model viewer and renders.pitch: trueadds the call to action used in ThreeOps' own audits; the open tool never sets it.
import { verifyUrls, formatMetrics } from '@threeops/measure';
const { verification } = await verifyUrls('https://preview.example.com', 'https://example.com', { outDir: 'out' });
console.log(verification.pass, formatMetrics(verification));Needs Playwright's Chromium (npx playwright install chromium). Model analysis and optimization come from @threeops/optimize.
