Canvas 2D
Waiting
Renderer laboratory 001
One field.
Three drawing paths.
Canvas 2D, WebGL2, and WebGPU receive the same seeded perennial-ryegrass blade geometry. The lab records data generation, renderer startup, JavaScript submission cost, and browser frame cadence.
WebGL2
Waiting
WebGPU
Waiting
| Renderer | Startup | CPU avg | CPU p95 | Frame p50 | Frame p95 | Estimated FPS |
|---|
Waiting for measurements.
Shared data
Every renderer receives identical plant seeds, blade centerlines, stiffness, phase, color, and segment counts. The GPU runners animate the flattened buffer in a vertex shader.
What the timings mean
CPU timing measures JavaScript work needed to submit a frame. Frame cadence measures requestAnimationFrame intervals and includes browser scheduling. This first lab avoids GPU timestamp queries so it works across more browsers.
Use the results carefully
Repeat the same URL on target phones and laptops. Browser version, battery mode, thermals, display refresh rate, and driver quality can change the ranking.