Working with the Graph Editor
Use Reality Composer Pro’s node-based editor to build materials, animations, audio effects, and scripts without writing code.
Overview
Reality Composer Pro’s Graph Editor is a node-based, no-code editor you can use to create a variety of assets, including materials, animations, audio effects, and scripts.
Reality Composer Pro tailors each type of Graph Editor — Script Graph, Shader Graph, and Animation Graph — to the specific asset it creates. Each shares a common set of controls covered in this article.
For example, a Script Graph uses different nodes and options than a Shader Graph. The following screenshots compare the two:
[Image]
[Image]
Open the Graph Editor
You can open the Graph Editor in two ways. To open a graph file directly, double-click a graph file in the project browser — such as a Shader Graph Material or Script Graph — to open it in the respective graph editor.
To open a graph file from a new tab, from the main menu choose Tab > New Tab to open a blank graph tab in your workspace. Then drag a graph file — such as a Script Graph, Shader Graph Material, or Animation Graph — from the project browser into the Graph tab.
[Image]
Navigate the Graph Editor workspace
As your graphs grow more complex, these controls help you view, organize, and navigate the workspace.
Use the mouse scroll wheel to zoom in and out.
Use the search bar above the graph to search for a specific node — the node centers in the graph.
Control-click in the Graph workspace (or choose Editor in the main menu) to access these workspace-wide layout options:
Clean up — Reality Composer Pro organizes the on-screen nodes for better visibility.
Zoom Fit — Reality Composer Pro zooms and centers the graph in the workspace window.
With one or more nodes selected, you can also apply these layout operations to just the selected nodes:
Align — Aligns the selected nodes left, right, top, or bottom. Requires more than one node to be selected.
Distribute — Distributes and spaces the selected nodes equally, either horizontally or vertically.
Add nodes to a graph
The Graph Editor offers three ways to add a node.
Press N or the space bar, then choose a node from the node selector.
Alternatively, Control-click anywhere in the Graph workspace, click Add Node, and then choose a node from the selector.
You can also click and drag a node’s input or output connector and release in any empty space in the Graph Editor — releasing in an empty space opens a context-sensitive node selector that shows only nodes compatible with what you’re connecting.
[Image]
Connect input, output, and subgraph nodes
To connect two nodes, drag from an output port on one node to a compatible input port on another. The Graph Editor prevents you from attaching a connector to an incompatible port and highlights valid connections as you drag.
When you create an Input, Output, or Subgraph node, notice that they all have a + connector. When you drag a connection from the +, the Graph Editor determines the name and type of the new input or output automatically based on the connection.
[Image]
The graph type determines whether you can create additional inputs and outputs. For example, a Shader Graph doesn’t allow you to create additional outputs.
Create a subgraph
You can select a collection of nodes and turn them into a Subgraph to help organize a large, complex graph. You can also convert Subgraphs into reusable prototypes to share across other graphs.
To create a Subgraph, Control-click a single node and then click Compose Subgraph. Or, drag to select multiple nodes, Control-click the selected nodes, and then click Compose Subgraph.
To expand a subgraph back into the parent graph, Control-click the subgraph node and click Decompose Subgraph. Reality Composer Pro moves the internal nodes and connections into the parent graph, rewires external connections directly to the surrounding graph, and then removes the subgraph node itself.
Add comments to graphs
Use comments to help organize, describe, and annotate complex graphs and subgraphs. To add a comment to a single node, Control-click the node and choose Add Comment Box. To add a comment to multiple nodes, click and drag a selection box around the nodes and press C on the keyboard. Alternatively, Control-click any of the selected nodes and choose Add Comment Box.
[Image]
Edit, copy, or color-code comments
These commands apply to comment boxes. Control-click any comment to open its context menu, and then do any of the following:
Cut, Copy, or Paste — Cut, copy, or paste a comment and its associated nodes.
Delete — Deletes the comment only. Deleting a comment doesn’t delete the nodes associated with it.
Duplicate — Makes a duplicate of the comment and its contents (nodes). The duplicate includes the nodes from the original comment, but none of the nodes have connections.
Change Color — Opens a color selector where you can change the color, opacity, and other visual characteristics for the comment. To access it, click the ellipsis (three dots) in the context menu.
Use clipboard commands to copy, paste, or delete nodes
These commands apply to selected nodes. With one or more nodes selected, Control-click and then use any of the following commands:
Cut — Cuts the selected nodes.
Copy — Copies the selected nodes.
Duplicate — Duplicates the selected nodes.
Delete — Deletes the selected nodes.
[Image]