Shadergraph Waving Flag Breakdown

This is a breakdown of the Waving Flag Shadergraph based on a Unite Now Live Session (https://www.youtube.com/watch?v=pzo4mitkY8k&feature=emb_logo).

In the image below is my Shadergraph of the waving flag shader, I additionally started adding some Texture Options, but will mainly focus on a breakdown of the transformation that creates that waving flag look.

Disclaimer: This is mainly me trying to make sense out of this for myself, if you notice that I got anything wrong please let me know. Hope it helps though. 🙂

Position, Split and Combine

The Position Node eventually goes into the Vertex Position Slot of the PBR Master and defines all the coordinates of all the vertices of the mesh object on which the shader is going to be applied.

A simple plane from the 3D primitives list will do.

In order to make that work we need the Object position in space. If now it would be connected directly to the PBR Master nothing much would change, as for now we only read out the Object coordinates and don’t add anything for now.

To separate the axis we need a Split Node. It says RGBA but we can ignore that and translate it to ourselves as XYZ, and only use the upper 3 Outputs.

Later on we need to recombine these at some point, as we want to feed multiple axis data into the PBR Master.

We do this by using a Combine Node.

Let’s just check how each Axis on its own translates visually in the preview, just to get an idea what is going on. 

Time, Sine and UV

Still not much going on here, but now let’s add a Sine Node, and also an Add Node to manipulate that incoming value.

Some bouncy movement, nice but not what we are aiming for.

Let’s check that B Output and feed that into Y.

Ok! What is going on here. Andrew Jevsevar does explain it a bit during that Unite Now Session at this point https://youtu.be/pzo4mitkY8k?t=1584.

For my simple mathematical understanding. I know that Sine is that nice curve we know from math class, which is continuous and always the same, and I want to make a vertice move along that curve on one axis. If I feed in the same axis as I give out they all seem to move at once, when manipulating these with that Add Node, but feeding in a different axis changes the game in a way that the vertices on move along with an offset which results in that waving flag behaviour we are aiming for.

Now we can add a Time Node and plug it into that B Input of the Add Node, to do the work of changing the number for us. 

Ok, let’s see where we are. Save the Asset in the right corner, create a Material out of the Shader and throw it on that rotated Plane to have it look like a flag and not like a vibrating floor. Looks a lot like what we are aiming for but as Andrew points out, a flag is connected to something, therefore one side is static. How would we do that?

We need to remove the influence of the changes from one side of the UV.

If we now want to have the left side fixated we need to figure out which UV axis of our UV Node is relevant to us. In this case it’s the G output using a Split Node, which makes the mesh being stuck on the side, but as it’s the wrong side a One Minus Node needs to be applied to mirror it.

All we need to do now is to use a Multiply Node to connect it with our Sine Node Output.

I added some additional controls as Wave Speed and Wave Amplitude and made those values public as properties to make them controllable within the Editor or by code later on.

At the end of the Session Andrew adds some points as a challenge, on which I might get back later on as well:

• Use a Remap or Smoothstep node to control how much of the flag is isolated
• Use a noise to create inconsistency in wind patterns

Texture

Here is my current Texture setup as well. As the rotation of the texture was off, and I did not simply want the mesh rotate, I added a Rotate Node with a public property. Also the texture was flipped and I added an option to flip it with a public boolean within the material itself. I needed to use a UV Node for that, find the correct axis, using a Split Node,  to flip and recombined it for the Rotation Node which was plugged in to the UV Input of the Texture Sample 2D Node. Then I just plugged it into the Albedo Input of the PBR Master.

Source: Making a waving Flag Shader

Other: UE4: Dynamic Texture Coordinates (Animated, Generated UVs)https://www.youtube.com/watch?v=bu8kGs1ap54