Understand a WebGL or canvas piece: what moves, how fast, and a 3D reconstruction
The best piece on many sites is a canvas, and a DOM inspector shows a black rectangle. mvoom hooks the WebGL context while the page runs: how many programs, which shaders, how many planes and their geometry, which uniforms change over time. Then it rebuilds the scene with three.js from that geometry — close enough to judge, honest enough to say it is a reconstruction.
For WebGL: the programs and their shader sources' structure, the draw calls per frame, the geometry of each mesh, the uniforms that move and how. For 2D canvases: the draw loop's cadence and what changes between frames. Both are sampled on the controlled clock, so the numbers are per frame, not per guess.
The reconstruction is a stage, not a copy: the measured geometry and motion, with placeholder materials. The viewer says so. It exists so you can see the mechanism moving and decide whether the piece is worth buying — not to ship as-is.
- 01Read the canvas piece
Pick the canvas from the inventory; mvoom probes the context.
- 02Watch the reconstruction
The measured scene runs in three.js in the viewer, with the numbers next to it.
- 03Take the numbers
Draw cadence, geometry counts, uniform curves — the recipe of the scene.
- Programs, shaders, geometry and uniforms over time
- A three.js reconstruction from the measured geometry
- Per-frame cadence sampled on a controlled clock
Do I get the shaders?
You get their structure and what varies; the shader text belongs to the site and is not delivered. The reconstruction uses placeholder materials.
Does it read Lottie or Rive?
As canvases: what moves and at what cadence. The source animation file is content and is not taken.
Reading is free and needs no account. Everything above is what runs today — nothing here is a roadmap.
READ A CANVAS PIECE →