Skip to content
threejs-debug-view

Custom Debug Views

For simple shader debugging, provide a custom TSL node directly.

import { float, vec4 } from "three/tsl"


{ label: "Constant", node: float(0.5), mode: "depth", scale: 1 }
{ label: "Custom Color", node: vec4(1, 0, 0, 1), mode: "passthrough" }

When React may recreate the node instance between renders, prefer createCustomDebugView() with a stable id.

import { float, vec4 } from "three/tsl"
import {
  createCustomDebugView,
  DEFAULT_DEBUG_VIEWS,
} from "threejs-debug-view"
import { DebugViews } from "threejs-debug-view/r3f"


const fresnelView = createCustomDebugView({
  id: "shader:fresnel",
  label: "Fresnel",
  node: vec4(float(1), float(0), float(0), float(1)),
})


<DebugViews views={[...DEFAULT_DEBUG_VIEWS, fresnelView]} />

The viewport render graph uses the stable id to dedupe equivalent custom node views.