Viewing Your Frame Graph

View your render passes as a flow chart to inspect resource dependencies and understand which commands wait on others to complete.


Find discrepancies in resource contention or identify extraneous commands by analyzing your draw calls, or frame graph, in Xcode's dependency viewer. As a tree-based graph, the dependency viewer enables you to visualize your draw calls and their relationship to each other in a single view.

Capture a Frame

The dependency viewer works in conjunction with Xcode's Metal frame capture. Build and run your project, then click the camera button on Xcode's debugging toolbar.

For more information about frame capture, see Frame Capture Debugging Tools.

Open the Dependency Viewer

When the frame capture completes, Xcode displays the results in the Debug navigator. In the API call list, click your command buffer.

Screenshot showing a command buffer selected in the call list, and marked by a callout.

Xcode displays your frame graph in the center pane.

Screenshot of an app's frame graph in the dependency viewer, in Xcode's center pane.

Analyze Frame Graph Dependencies

See your first render passes at the top of the graph, and subsequent render passes flowing downward chronologically. For each node in the graph, the layout, lines, and connections indicate dependencies. A node whose line flows up to another node is a render pass that depends on the completion of the other before it can be scheduled for execution.

For example, observe in the following image, two passes that depend on the completion of the DownSampleBloomCOC compute pass (callout 1 in the following image):

  • A blur pass (callout 2)

  • A compute pass (callout 3)

On the right, a compute pass and blur pass require the DownSampleBloomCOC pass to complete as seen in the dependency viewer. Each pass's corresponding entry in the call list is shown on the left.

Inspect Render Passes and Draw Calls

Visually check your frame graph for completeness and correctness by examining the render passes and draw calls associated with each node in the graph. Click a node in the dependency viewer (marked by callout 1), and Xcode selects its corresponding entry in the call list (callout 2).

On the right, the dependency viewer which, when clicked, selects the corresponding entry in the call list on the left.

Using the dependency viewer to visually tally your draw calls enables you to easily identify redundant or extraneous rendering that could otherwise go unnoticed in your app's code, or in the call list alone.