[Deformer Graph] DebugDraw node explained (Unreal Engine)

I'll show how to use the DebugDraw node in UE - 03/2025 - #Jumble

In the deformer graph asset editor, simply drag and drop DebugDraw node from the "palette" left side pannel

Connect it to your kernel

Several draw utilities are now available in your shader code through ReadDebugDraw() 

// Easily find back the list of debug primitives in:
// UE\Engine\Plugins\Animation\DeformerGraph\Shaders\Private\DataInterfaceDebugDraw.ush

// Here is what is currently available:
ReadDebugDraw().AddLine (float3 pos0, float3   pos1, float4 color);
// Clock wise order (only draw lines)
ReadDebugDraw().AddQuad (float3 pos0, float3   pos1, float3 pos2, float3 pos3, float4 color);
ReadDebugDraw().AddCross(float3 pos,  float    size, float4 color);
ReadDebugDraw().AddAxis (float3 pos,  float3x3 inM,  float  scale);

Note that you will need to set some skeletal mesh in the "Preview Scene" pannel for anything to be displayed at all.

On the right side pannel you can also access the DebugDraw node's options under the "detailed" tab

Flickering

Flickering may happen especially if the Max line count etc is insufficient, you can tweak this value. If flickering persists check if it still does it under "unlit" settings of the preview viewport. This is only a debug tool so it's expected that it does display perfectly well under some settings.

Line

if(Index == 0)
    ReadDebugDraw().AddLine(float3(80.0, 0.0, 0.0), 
                            float3(80.0, 0.0, 100.0), 
                            float4(1.0, 0.0, 0.0, 1.0));

Quad

if(Index == 1 )
    ReadDebugDraw().AddQuad (float3(80.0, 0.0, 0.0),     //bottom left                               
                             float3(80.0, 0.0, 100.0),   // upper left
                             float3(160.0, 0.0, 100.0),  // upper right
                             float3(160.0, 0.0, 0.0),    // bottom right                              
                             float4(1.0, 1.0, 0.0, 1.0));

Cross

if(Index == 2 )
    ReadDebugDraw().AddCross(float3(120, 0.0, 50.0),  // origin
                                    10.0,             // length of the lines
                                    float4(0.0, 1.0, 1.0, 1.0));

Axis

if(Index == 2 )
    ReadDebugDraw().AddAxis(float3(120, 0.0, 50.0),  // Origin
                                   // Not sure how to use it, 
                                   // changing the 3x3 matrix does not seem 
                                   // to change the orientation of the cross
                                   float3x3(10.0, 0.0, 0.0,
                                            0.0, 50.0, 0.0,
                                            10.0, 0.0, 100.0),  
                                   // This scale factor did nothing as well..
                                   50.0);

No comments

(optional field, I won't disclose or spam but it's necessary to notify you if I respond to your comment)
All html tags except <b> and <i> will be removed from your comment. You can make links by just typing the url or mail-address.
Anti-spam question: