Quick Reality Composer Pro Shader Graph Tutorial

Reality Composer Pro is Apple’s creation tool for spatial apps. In this quick tutorial we’ll dive into material creation using shader graphs.

This is a quick tutorial so let’s dive straight into it.

Opening Reality Composer Pro

Reality Composer Pro can be opened from Xcode by navigating to Xcode > Open Developer Tool > Reality Composer Pro:

Creating a Simple Material

Lets add a cube primitive to the scene by clicking on the ‘+’ button at the bottom of the project browser:

Navigate to Root/Cube/DefaultMaterial in the project browser, select “Shader Graph” in the bottom pane and press the Create Material button:

The newly created material looks like this:

Let's change the colour. Double-click on an empty space to open up the search window. Type ‘color’ and select Color3 (Float). This will add it to the shader graph.

Click on the pin and drag the noodle to the Diffuse Color pin to connect it to PreviewSurface.

We’ll change the colour. Make sure the Constant Color3 node is selected find the Inputs panel in the properties pane. Click on the color wheel to open the Colors dialog.

Create a fully red color and observe that the material in the scene view changes.

Using Texture Coordinates

Let's use the texture coordinates to influence the colour. We’ll multiply the texture coordinates (u, v) to get a single float value. Then we’ll multiply this with the red channel to get a circular gradient.

Double-click on an empty space in the shader graph to open the menu. Type ‘texture’ and select the Texture Coordinates node:

We’ll multiply the texture coordinate with our colour node to create a gradient. Open the menu, type ‘multiply’ and select the multiply node.

Now connect the Multiply output pin to the Diffuse color pin on the PreviewSurface node, connect the Constant Color3 output pin to one of the Multiply input pins:

Now we’ll multiply the texture coordinate components to get a single float value. Double-click, type ‘separate’ and select the Separate2 node. Add a Multiply node and connect the noodles:

The next step is to convert this single float value to a 3-component float value. Click and drag the Multiply node’s output pin and release the mouse button. This is another way to bring up the node search menu. Type ‘convert’ and select the Convert node. In the node’s property’s window the conversion type can be selected. Make sure its float color3f .

Now the Convert node’s output pin can be connected to the Multiply node’s second input pin to multiply the texture coordinates with the color node. Make sure the Multiply node’s output in is connected to the Diffuse Color pin of the PreviewSurface node and observe the gradient that is now visible in the scene view:

This concludes a very simple example that should have helped you to familiarise yourself with Reality Composer Pro shader graphs. In the next tutorial we’ll expand on this to create more complex effects.