I am a big fan of Yugioh! so today, we will replicate that prismatic card foil effect of ultra rare or super rare cards.
Intro
For this I am using Unity version 2022.3 but it will work on any Unity LTS version and I have project setup in URP.
I have modelled this Card and unwrapped it.
I have also created these 2 textures one for our base map and second to use as a mask.
Shader graph
First, let's create a shader graph, so right click > Create > Shader graph > URP > Lit shader graph.
Let's call it PrismaticFoilShaderGraph.
Let's also create a material, so keep our shader selected, right click > create > material.
Let's call it Prismatic and assign it to our card.
In our shader graph, I want to use our base map, and I am directly going to create a Sample texture 2D node.
Select our map in the Texture slot.
Let's create another Sample texture 2D node. I am going to select this mask texture.
This is just a black and white texture, and the white part is where we want our prismatic effect to appear.
I only want to apply the effect on the monster art so I am using this texture.
Now let's create a Float property, call it PrismaticStrength, give default value of 5. Drag it in.
We will multiply our Mask texture with our PrismaticStrength.
Let's create a Color node. Give some color. Set the mode HDR, take its output and feed it into the Hue node.
Hue node just shift the hue of the color we have provided by this Offset.
Set the range to Normalized so now offset has a valid range from -1 to 1.
You can off course create a Gradient node for the custom colors, I just wanted the full color spectrum hence I am using Hue node.
Now let's create a UV node. Split it using Split node and feed the X into Hue node's Offset.
And we have this full color spectrum, however I would like the ability to repeat the spectrum.
So let's create a Float property, call it Frequency, give default value of 2, and drag it in.
We will multiply our X with the Frequency.
Then take Multiply node's output and feed it into the Sine node.
Sine node will return sine wave with values between -1 and 1 based on the input.
Take Sine node's output and feed it into the Hue node's Offset.
Now we can repeat the spectrum by changing the Frequency from the Inspector.
Now I want some noise pattern, so let's create a Voronoi node.
Let's also create a Tiling and offset node.
We want to control the Tiling from the Inspector so let's create a Vector2 property, call it Tiling, give default value of 1, 1, drag it in and feed it into the Tiling.
Take our Tiling and offset node's output and feed it into the Voronoi node's UV.
Then take our Voronoi node's output and feed it into the Power node.
Power node performs the power operation but in our context it will darken the values which are less than 1 as we increase the power.
We will control the power from the Inspector so, you guessed it.
Let's create a Float property, call it Power, give default value of 5, drag it in and feed it into the Power node.
We will multiply our Hue node and Power node.
Now we have this prismatic pattern.
We will multiply our pattern with our mask.
Now let's add our pattern with the base map.
Finally take our Add node's output and feed it into the BaseColor block.
In the scene view, we can see that we have our effect applied on the monster art.
However, it does not look prismatic when we look at our card from different angles.
To fix that let's create a View direction node.
View direction node will give us a direction from our mesh's fragment to the viewport or camera.
Then select the Tangent space. We want tangent space so our effect work, when we look at our card from different angles and also when we rotate our card.
Take View direction node's output and feed it into the Split node.
We no longer need this UV node so let's delete it.
That's it for our shader, let's hit save.
It will look like this at the end.
You can also set PrismaticStrength to some negative values to get some nice variations.
Trouble following along? Check out this video!
Thank you so much for reading!
Comments
Post a Comment