threejs-debug-view

threejs-debug-view gives you named debug views for the buffers your scene already produces: beauty, normals, depth, material channels, wireframe, lighting-only, reflection-only, and estimated shader cost.

Use the root package for core helpers and TSL view definitions. Use threejs-debug-view/r3f when you want the overlay inside a React Three Fiber <Canvas>.

R3F adapter

The R3F adapter is the React UI layer. It mounts DebugViews in your canvas, reads the active R3F renderer, and exposes optional Leva controls through useDebugViewsControls.

Keep it behind your app’s dev flag unless you intentionally publish a debug surface.

Live demo

Use the controls in the top-right panel to switch views, layouts, opacity, and pane count.

Open the demo in a new tab

Note

The demo needs browser WebGPU support. When native WebGPU is unavailable, the badge in the bottom-left reports the active fallback backend.

What it does

• Built-in sources for beauty, normals, depth, albedo, roughness, AO, opacity, emissive, wireframe, and lighting-only output.
• Render layouts for single, overlay, split, row, column, and grid presentations.
• Viewport mode for fixed pane assignments, labels, per-pane cameras, and predictable resolution scaling.
• Custom TSL views for shader-specific inspection without forking the built-in source list.
• R3F adapter for mounting the overlay and optional Leva controls inside a React Three Fiber app.