This tutorial is written to be understandable to beginners, but it's not an introduction to shader graph. If shader graph is completely new to you, then check out https://blogs.unity3d.com/2018/02/27/introduction-to-shader-graph-build-your-shaders-with-a-visual-editor 

 

0. Overview

This shader is made of 3 separate chains of nodes, which we'll refer to as Ring, Wave and Split. I'll give an overview of each chain and how they combine before we get to the actual tutorial proper. 

 

The Ring chain establishes the ring shape at a distance from the center. It's the main chain that ends in our final result, and will be influenced by the other two chains. Above is how it looks without the influence of the other two chains.

 

The Wave chain establishes these clockwise sine waves with offset RGB channels. It's completely static, it doesn't move over time.

 

Before we get to the Split chain, check out the result when it's just the Wave chain added to the Ring chain. The RGB weaving effect is non-animated and equally strong all around the ring.

 

The Split chain is the only chain that's animated over time. When multiplied with the Wave chain, It acts as a kind of modulator for it, controlling it's strength before influencing the  Ring chain:

How the Split chain modulates the strength of the Ring chain.

 

0.1 Polar Coordinates

Every chain in this shader starts with the Polar Coordinates node. It's a pretty useful node and it's safe to say that any shader graph that has some pattern going inwards, outwards or around in a circle probably uses the Polar Coordinates node somewhere. 

If you've used the UV node before and have come to think of it as simply two gradients, one horizontal and one vertical, then the Polar Coordinates node can be thought of as the same, except with a radial gradient and an angular gradient. The full explanation is a bit more complex than this, but I find thinking of them as gradients the most simple and intuitive for experimenting with shader graph.

 

1.  Ring chain

First up is making a plain white ring. 

We start with the aforementioned Polar Coordinates node. For the ring shape we only need it's red component, so we can Split and Preview the red to see what we're working with. With default values, the red component gives us this radial gradient, with 0 at the center, 1 at the distance it touches the sides, and above 1 into the corners.

The Preview node does nothing to the shader, it's just for displaying what it looks like at that point in the graph.

 

Plugging the outwards gradient into a Step node gives us a black circle. Any value above the Edge parameter becomes 1, any value below becomes 0.

 

A second Step node with a greater Edge value makes a larger circle, which can then be Subtracted from the first. Suddenly, a ring.

There's a bunch of different ways we can combine the circles to get the white ring. The way we've done it above maybe isn't the most intuitive, but it makes more sense if you notice that it's only the corner sections of the bottom image that are being subtracted from the top image.

 

When modifying the Edge parameters of the Step nodes, you've probably noticed this directly controls the inner and outer radius of the ring, so this is a reasonable place to plug in some adjustable properties: Ring Radius and Ring Thickness. 

If we have Ring Radius control the outer edge radius, and Ring Thickness reduce the inner edge radius from the outer using Subtract, then increasing the Ring Thickness will only thicken it inwards, and not outwards. The same will be true for the waves in the next section. By allowing nothing beyond the Ring Radius we can safely adjust parameters without anything accidentally going over the sides of the containing square (unless we explicitly set the Ring Radius above 1).

 

2. Wave chain

We'll start with Polar Coordinates again, but this time we use the Green component instead, which gives us this angular gradient going clockwise from -0.5 at the bottom, 0 at the top, and +0.5 at the bottom again.

We could have started with the existing Polar Coordinates + Split nodes that are already being used in the ring chain, but I think it's better for the readability of the graph to keep the chains mostly separate.

 

What's next? Well, for sure we want sine waves somehow, so lets plug in the Sine node and see what happens when we adjust the Polar Coordinates Length Scale parameter. 

Length Scale is the same as multiplying the Green component, so a Length Scale of 8 will result in the gradient going clockwise from -4 to +4. Here, increasing the Length Scale does result in waves in the Sine node, but the values are off. A Length Scale of 8 results in about 1 and a quarter waves, when ideally it should give exactly 8 waves. The values are off because the Sine node takes it's input in radians, so next we'll figure out a conversion.

Searching through the list of nodes for radians, we can see that shader graph gives us a Degrees To Radians node, though that means we have to convert to degrees first. We can Multiply our desired wave count by 360 to convert it to degrees, and then convert that to radians with the Degrees To Radians node. There's a number of ways to structure this, but I found the above to be the most intuitive. The conversion to degrees happens at the start and goes directly into the Length Scale, making it some multiple of 360, and later, the conversion to radians happens directly before the Sine node, as this node is the only one that requires radians.

The Preview node image was no longer helpful to us so we can remove it. 

We could skip degrees entirely and convert straight to Radians by multiplying by pi*2, however there's no pi node so the value would have to be pasted in. Using degrees will also be useful in the next part when we offset the RGB components, so I don't recommend this. 

Now that we can get an exact amount of waves, we can create another adjustable property: Wave Count. This property should be an integer value, if not, it will cause a visible seam in the pattern.

 

So now we have these angular waves who's magnitude fluctuates between -1 and +1. Thinking ahead, these waves should be used as a relatively small adjustment to the radial gradient in the Ring Chain. That radial gradient only goes from 0 to 1, so the waves current magnitude will completely overpower it. Lets calm it down by Multiplying by a Wave Magnitude property and set it to around 0.1, so now the waves only fluctuate between -0.1 to +0.1 which should give a sensible result when adding them to the outwards gradient:

This step probably requires shuffling a lot of nodes around, reminder that you can ctrl+click to select multiple nodes, or start a selection box by dragging empty space. 

The gif is self explanatory, but we've essentially inserted an Add node to the original chain as a way to input our new waves into it.

But there's a small issue, the negative sections of the waves are ultimately pushing the ring outwards, beyond the Ring Radius. Depending on what values you've given the properties, the waves might even be going beyond the sides of the containing square. As explained earlier, nothing should go beyond the Ring Radius.

Fixing this, lets go back to the Sine node for our waves, the values out of the sine node are fluctuating between -1 and +1, this means that in the Add node we just created, we're adding and subtracting which is pushing the ring both inwards and outwards from the center. If the values were to fluctuate between 0 and +1 instead then it will only push the ring inwards. 

We can make this adjustment using the Remap node, with the In Min Max set to (-1, 1) and the Out Min Max set to (0, 1).

To improve it even further, the Remap node can also simultaneously handle our Wave Magnitudeby setting its Out Min Max to (0, Wave Magnitude) as shown above. The Remap node now makes the Multiply node we made a few steps ago redundant so we can remove the Multiply node.

The waves should no longer go beyond the Ring Radius.

 

2.1 Making the Wave chain colorful

Next up, our waves here need to be turned into the colorful red-blue-green waves we saw earlier in the overview, let's go back to this section of our wave chain and make some room here, this part is actually the simplest.

 

Most reading this probably already understand that in terms of Vectors, R,G,B and X,Y,Z are mainly just interchangeable labels used to distinguish the components, the vector itself can be used however we want. So when shader graph presents the Split node with "RGBA" and the Vector 3node with "XYZ" don't be mislead into thinking that their treatment of the components are fundamentally different, for our purposes, they're both just handling Vectors that are made up of 3 or 4 float values.

We can accomplish the RGB coloration by constructing a new Vector 3 entirely out of the 'green' component from the Split node that we are already using for our basic waves. The three components that will go on to represent the red blue and green will need to be equally spaced apart. The first component doesn't need to change, but the second and third components can be offset using the Add node. What offset values to add? Well, earlier we converted the Length Scaleto degrees, so we can add the values 120 and 240 respectively (One third of 360 and two thirds of 360).

If this wasn't converted into degrees, and the polar coordinates had it's default values with a clockwise gradient going from -0.5 to +0.5 then instead we could input 1/3 and 2/3 respectively. Protip: you can input simple sums like that into most fields in Unity.