Hello everyone, welcome back.
For this I am using Unity version 2022.2 but it will work on any Unity LTS versions. I have a project in URP. I also have this cool Case fan model, which you can download from here.
When you import it in your project, go to Import settings, under Model tab, uncheck Convert units and check Bake Axis Conversion.
Our fan has 3 separate Gameobjects, I have applied URP lit material for the Base and holder. We will use shader graph for actual fan mesh.
Then I have the post processing volume with modules Bloom and Tone mapping with the mode Aces.
Effect break down
We can break down the effect in 2 simple steps.
- First, Gradient color with full color spectrum.
- Second, the rotation of our mesh.
Let me first create a shader graph, Right click > create > shader graph > URP > lit shader graph. Let's call it RGBShaderGraph. We will also create a material so select our shader, Right click > create > material. Let's call it RGBCaseFan, and assign it to our fan.
Gradient color
In our shader graph, Let's deal with color part first. We want a full color spectrum so we can just take a color and shift its hue values to get the spectrum.
Let's create a Color node, set the mode HDR, assign a default color, I am selecting Red but you can set color of your liking.
Then we will take its output and feed it into Hue node. It will shift this color's hue by this offset. Set the Range to Normalized. By setting that we can get all colors with value range from 0 to 1. And the offset that we feed will be normalized, so if I feed 20.5 it will be considered as 0.5.
Now to get the spectrum, we can use UV node, we want the spectrum that goes round instead of the flat one, for that we can use Polar coordinates node.
In Polar coordinates, X goes outward and Y goes around so X has 0 in the center and then it goes outward. Y has -1 at the bottom center then it goes around, has 0 at the top center, then again 1 at the bottom center.
Center is the pretty self explanatory, now this Radial scale and Length scale think of them as a tiling of X and Y respectively.
Now we will take our Polar coordinates output and feed it into Split node.
We want spectrum that goes around so we will take the Y and feed it into Offset.
We want to control the intensity so let's create a float property. Call it Intensity, Give a default value of 1. Drag it in. And we will multiply our spectrum with Intensity.
Then take our Multiply node's output and feed it into Emission block.
In scene view, we have this nice color spectrum that goes around but it covers the entire fan, I want to leave out the center.
To do that, we will mask the center, for that let's create Ellipse node, it will give us this nice little circle, we can control its radius with the Width and Height. We will control it from the inspector so let's create a float property, call it MaskRadius, Give a default value of 0.3, set the Mode to Slider with the range 0 to 1. Drag it in and feed it to both Width and Height.
Now we want to mask this circle so let's invert it using One minus node. One minus node will subtract whatever value we feed in from 1. In our case it will invert the values.
We will multiply our spectrum with One minus node. Then we will take the Multiply node's output and feed it into Emission block.
We will also create a Color property for Base color so we can access it from the inspector. Drag it in and feed it into Base color block.
Our gradient color part is done.
Rotating the mesh
Now let's deal with the rotation. We can create a script for that but since we are not dealing with collision, in fact our fan is only aesthetics, so I want to deal with rotation in our shader itself.
"Why?" I hear you ask. Because every Monobehaviour script will run on CPU and since we are not dealing with any gameplay logic, it is a good idea to offload this work on GPU. That is the reason Compute shaders are very popular.
Okay back to rotation, we want to rotate this fan around Z axis.
In our shader graph, let's create a Position node. It gives us each and every vertex position. Let's set the Space to Object, because we will rotate our fan locally so it won't mess up if we rotate the parent game object.
Then we will take its output and feed it into Rotate about axis node. It will rotate the input, around the axis, about the rotation.
We want to rotate around Z and Z axis will always going to be 0, 0, 1. Now we will rotate it over time so let's create a Time node.
We want to control the rotation speed from the inspector so you guessed it, let's create another float property, call it Speed, Give a default of value of 1.Drag it in.
Now we will Take our Time and multiply it with our Speed. Then take this Multiply node's output and feed it into the Rotation.
Lastly, take our Rotate about axis node's output and feed it into Vertex context's Position block.
Now if we save our shader and head back to scene view, our fan is rotating in the wrong direction, also our colors are rotating with the fan. So let's fix that.
To rotate our fan in opposite direction we will just change this axis to 0, 0, -1. Then to keep the colors in place let's rotate them in opposite direction of our fan.
For that take the Multiply node's output and feed it into Negate node. It will multiply whatever value we feed in with -1.
Then to rotate the UVs, let's create Rotate node. Take Negate node's output and feed it into the Rotation.
Finally, feed our Rotate node's output to Polar coordinates node's UV.
That's all, our shader graph will look something like this at the end.
And we have our RGB shader.
Trouble following along? Check out this video!
Thank you so much for reading.
Comments
Post a Comment