demo · v146

Game quality preset

A canvas mini-game runs in three quality presets — low, mid, high — derived from the CPU performance tier. Particle count, shadow softness, post-processing and per-frame entity budget all bind to the tier. Switch the tier and watch the visuals (and the FPS counter) react.

Behind a flag: navigator.cpuPerformance ships behind chrome://flags/#enable-experimental-web-platform-features in Chrome 146. We fall back to hardwareConcurrency + a micro-benchmark.

This is the canonical case the API was designed for: a game-style or simulation product picks a quality preset once on entry, locks it in, and renders against that budget. Re-detecting per frame is wrong — the FPS counter is for measurement, not a feedback loop.

0FPS
0entities
midtier
0frame budget µs

Preset config bound to the tier

const tier = navigator.cpuPerformance?.tier ?? heuristic();
const cfg = PRESETS[tier];
engine.configure({
  particleBudget: cfg.particleBudget,
  shadowQuality:  cfg.shadowQuality,
  postFX:         cfg.postFX,
});

see also