Demo app · real OnCatch widget · WebGL

Design your Vessel bottle.

A live 3D product configurator. Rotate it, recolor it, then file a bug with the OnCatch feedback button (bottom corner). The screenshot OnCatch captures shows the actual rendered 3D frame — not the black rectangle most widgets get from a WebGL canvas. Watch it land in the live triage feed.

Configurator

react-three-fiber + Three.js, rendered with preserveDrawingBuffer so the canvas is screenshot-able.

QA test plan

System under test: a react-three-fiber product configurator.

1Rotate / zoom / recolor the bottle.
2File a report via the OnCatch button (solve the Turnstile — demo is bot-protected).
3Confirm the screenshot shows the real 3D scene, not a black box.
4On a retina screen, confirm the capture is sharp (honors devicePixelRatio).
5Press a "Break it" control: lose the WebGL context, 404 a texture, or force a low-DPI render.
6File a report right after — the WebGL console error rides along in its context.

How it's captured

The OnCatch widget rasterizes the page and reads each <canvas> via toDataURL(). A WebGL canvas returns black from that call unless its context was created with preserveDrawingBuffer: true — which this demo sets. That single flag is why the captured screenshot contains the live 3D model.