Organizing a Material Graph

As Materials increase in complexity, the node graph can quickly become difficult to read and interact with. Complicated, unorganized graphs can be slow to edit, and difficult to comprehend when a Material is handed off from the primary author to another artist or developer.

Material Editor Organization Tools

Unreal Engine includes several tools to improve the organization of your Material graphs.

1. Commenting
2. Reroute Nodes
3. Named Reroutes
4. Align and Distribute
5. Collapse Nodes

Commenting

Comments are the easiest way to improve the readability of a Material graph. This Material isn't overwhelmingly complicated, but without annotations it would take a moment or two to interpret if it was passed off to a second artist.

A Material Graph network with and without comments.

Drag the slider to see the same Material annotated with comments. It is immediately apparent from the labels what each group of nodes is doing.

There are two ways to add comments to Materials.

Node Description

You can add a comment or description to any individual Material Expression or Function in the node graph.

1. Hover the mouse pointer over a node in the Material graph.

2. Left-click the Toggle Comment Bubble icon.

   

3. Enter a comment in the field.

   

4. Click the pin icon if you want the comment to remain visible as you zoom in and out of the Material Graph. This keeps the comment at a readable scale, even when zoomed out. You can click the Toggle Comment Bubble icon again to hide the comment.

   

Anything you type in the Comment Bubble will also appear in the Desc field in the Details panel for that node. This description remains visible even when the Comment Bubble is hidden.

Comment Box

You can use a comment box to group a selection of related nodes.

1. Select all the nodes you want to place in a comment box.
2. Press the C key to create a comment box around the selected nodes.
3. Type a name in the header field.

Comment boxes let you move all the nodes within the box as a single group. Left-click and drag the header bar to move a comment box.

• You can add and remove nodes by dragging them in or out of the comment box.
• Resize a comment box by dragging the corners or edges.
• You can nest comment boxes within one another.

Comment color

Comment boxes have a color property in the Details panel.

1. Click the header bar of a comment box to access its Details properties.

   

2. Click the Comment Color swatch and choose a new color in the Color Picker dialog.

   

Reroute Nodes

Reroute nodes provide a way to modify the path of the wire between two Material expression nodes. You can also use a reroute node to split a wire in order to connect it to multiple inputs.

Double-click anywhere along the length of a wire to add a Reroute node.

To modify the path of the wire, hover over the Reroute node until the mouse displays a move icon.

Left-click and drag the node to a new location. Reroutes allow you to redirect wires around nodes that are in the way of the original path.

In this video a Reroute node is used to split a wire in order to feed it into three downstream inputs.

Named Reroutes

Named Reroutes let you simplify a Material graph by eliminating wire connections and routing information through input and output nodes instead. A Named Reroute is like a tunnel or portal from one region of the Material graph to another.

For example, this small cluster of nodes related to the Roughness map creates a relatively long wire across the middle of the Material graph. Using a Named Reroute you can eliminate the wire without affecting the flow of data.

Creating Named Reroutes

1. Double-click along a wire to add a Reroute node.

   

2. Right-click the node and choose Convert to Named Reroute from the context menu.

   

3. The wire connection disappears and two Named Reroute nodes are created at the beginning and end of the connection. Shown side by side you can see how a Named Reroute resembles a tunnel. Data flows into the first node, and exits through the second, which is called a Named Reroute Usage node.

   

The first node in a reroute is called the Named Reroute Declaration. It is extremely important to give this node a unique, descriptive name in the Details panel.

Select the Named Reroute Declaration node and enter a description in the Name field. You can also change the Node Color property if you want to color-code your reroutes.

Named Reroute output nodes can be passed into multiple inputs further downstream, or can be duplicated and used multiple times.

For example, earlier we used a Reroute node to pass the Global UV Controls into three downstream inputs.

If this pin is converted to a Named Reroute, three Usage nodes spawn instead of one.

Everything within the Global UV Controls comment box is now physically detached from the rest of the node network. You can move it anywhere in the graph and the data will still flow through the Named Reroute into the Albedo, Roughness, and Base Normal UVs.

Or if you prefer you could use a single Named Reroute output node and feed it into all three UV inputs.

Adding Named Reroute Usage Nodes

You can add additional Named Reroute Usage nodes from the right-click menu or the Palette.

Any Named Reroutes in your Material appear at the very top of the menu. You can also duplicate existing reroute nodes by selecting them and pressing Ctrl+D.

Convert Back to Traditional Reroute

You can convert any Named Reroute back to an unnamed Reroute pin if you decide it is beneficial to see the wire connection.

The Roughness Named Reroute is converted back to a traditional Reroute pin.

1. Right-click a Named Reroute Declaration or Usage Node (either one works).

2. Choose Convert to Reroute from the menu.

   

3. The wire is restored and an unnamed Reroute pin is left behind. You can select the pin and press delete if it is no longer needed.

   

Reroute Selection Options

There are selection options for Named Reroute nodes that let you find and select corresponding Reroute nodes in the Material Graph.

Right-click a Named Reroute Declaration node and click Select Named Reroute Usages to select all the downstream output nodes for that reroute.

Right-click a Named Reroute Usage node and click Select Named Reroute Declaration to select the upstream origin node of the reroute.

Align and Distribute

The Material Editor has several options in the right-click menu to align and distribute nodes in your Material graph.

1. Select two or more nodes that you want to align.

   

2. Right-click one of the nodes and open the Alignment sub-menu.

   

3. Select one of the options to align or distribute the selected nodes.

   

In this example, Align Left was used to line up the left edge of the selected nodes. Distribute Vertically was then used to create equal spacing between them on the vertical axis.

Align

The options in the Align menu let you align nodes along six different axes. You can also straighten the connection wire between two nodes.

Distribution

The Distribution options allow you to create equal spacing between the selected nodes on either the horizontal or vertical axis.

Collapse Nodes

You can use the Collapse Nodes option to condense multiple Material Expressions or Functions into a single node.

There are a few reasons you might want to do this.

• If a large group of related nodes is getting too complicated, collapsing them can free up space in the graph and make the Material easier to read.
• A second use case is if a set of nodes is so commonplace or repetitive that you don't need to see the full node network to understand its purpose.

For example, the Detail Normal Tiling nodes shown below use a familiar method for controlling the scale of a texture.

To simplify the graph, you could collapse everything within the Detail Normal Tiling box .

How to Collapse Nodes

1. Select all the Material nodes you want to collapse.

   

2. . Right-click one of the nodes and choose Collapse Nodes from the context menu.

   

3. The selected Material Expressions are replaced by a single node with the default name Collapsed Nodes.

   

4. Left-click the name at the top of the node, and enter a descriptive name in the field.

   

5. The Detail Normals section of the graph is greatly simplified.

   

Editing Collapsed Nodes

Nothing has changed about the Material Graph. The Collapsed Node simply acts as a container for the node network within it.

If you mouse over a Collapsed Node you will see a preview of the Material graph stored inside.

Double-click a Collapsed Node to view and edit the contents. This opens a sub-graph within the same Material Editor tab.

Click Material Graph in the breadcrumb navigation at the top of the Material Editor to stop viewing the collapsed nodes and return to the main graph.

Expanding Collapsed Nodes

You can expand collapsed nodes back to their previous configuration in the Material Graph.

1. Right-click a collapsed node.

2. Click Expand Node in the context menu.

   

3. The collapsed nodes are restored to their original position.