debug
A visual shader probe, like a graphical version of console.log(). It allows you to render the result of any intermediate step in your node network directly as a color on the model, solving the 'black box' problem of shader development.
Core Advantages
Non-destructive inspection. It's a 'transparent' passthrough node that doesn't affect the final render in its default state. Developers can preset multiple debug points in the code and toggle the visualization by clicking the screen, dramatically improving debugging efficiency and iteration speed.
Common Uses
Visualizing noise functions: Render the output of a complex noise function as a grayscale image to check its pattern, frequency, and range.
Inspecting UV coordinates: Render transformed UV coordinates as a red-green color map to visually verify distortion, scaling, or other effects.
Validating masks/mix factors: Display a factor used for material blending (like a Fresnel effect) as a black-and-white image to confirm the mixing areas are correct.
Inspecting generated GLSL code: Use a callback function to print the underlying GLSL code generated by a node to the browser console for deep analysis or performance optimization.
How to adjust
By default, it doesn't change the visual output. After clicking the object with this material, it 'hijacks' the final color to visualize the wrapped node's value: a float becomes a grayscale image, a vec2 becomes a red-green map, and a vec3/vec4 becomes a full-color image. Clicking again restores the original final effect. This instant toggling is its core interaction method.
Code Examples
1const finalColor = mix( metal, rust, debug( myMixFactor ) );