Making Glitter in Shader Graph and URP

everyone loves glitter except for the fact that it gets everywhere and it'll be stuck to you your clothes your floor and all your possessions for weeks thankfully if we stick the glitter inside a shader instead we'll avoid the glitter apocalypse and it's more environmentally friendly too in this tutorial we are going to use a special noise texture a few mouse tricks and some emissive light in order to make some glistening glittery crystals and if you stay until the end i'll show you how to flip the whole thing on its head and turn it into a starry night skybox i'll be using unity 2020.3 and all of the code will be available on github let's jump in the approach we're going to take with this shader is to generate a random direction at every point on the surface of the object depending on the angle between that direction and the vector between the camera and the surface the surface will shine if we generated the correct pattern to begin with then the object will look glittery we'll then stick some fresnel around the edges and add a soft color gradient and that's all glitter shader done we'll start off as usual by right-clicking and selecting create shader universal render pipeline lit shader graph i'm also going to generate a noise cloud texture to use for those random directions you can do this in many image programs and the process should be similar but i'm going to open make a new 256x256 texture and go to filters noise hull set repeat to about 50 and click ok export that somewhere in your unity project you can use other types of noise but the point is to use something that generates colors like these we'll add some properties to get us started with the noise the first is noise texture and this will be the texture we just generated then we will have noise scale which is a vector 2 which lets us tile the noise texture across the mesh use a sample texture 2d node to sample the noise texture in the uv slot we're going to plug in a tiling and offset node the noise scale goes in the tiling pen that will let us adjust the material so that the glitter particles get bigger or smaller each of the colours currently applied to the objects are going to be used as directions colours are made up of red green and blue components which we can very easily treat as the x y and z components of a direction vector instead that's exactly what we're going to do there's two modifications to make to these directions firstly i want to add the ability to shift directions over time and secondly i want to set up a threshold for the glitter to make sure that we don't have too many reflective particles for that adds two float properties called noise rotation speed and glitter offset respectively to shift the color over time we'll use a hue node this will cycle the color through red to orange to yellow to green and so on while preserving the amount of saturation and lightness in the color and the result for us is a direction vector which rotates over time multiply noise rotation speed by time and plug it into the offset pin then to threshold the glitter and remove some of the reflections subtract glitter offset from the output of the hue node this will make some of the direction vectors point inwards towards the center of the object and therefore will end up hidden later normalize the result to make the diffraction vector's length one remember that we're going to take the angle between these random directions and a vector between the camera and the surface of the object now it's time to calculate that second vector unity provides the view direction node which we'll use in world space normalize that too and then take one minus the result because it's pointing in the opposite direction to what we need with these two vectors we can now figure out the angle well not exactly we just want a number that gets higher when these vectors point in the same direction and lower when they point away from each other for that we can use the dot product saturate the result so that values below zero are clamped to zero now we're going to add color and make everything glow spectacularly let's add another property called glitter color this time we'll make it an hdr color by changing the mode since the output from the dot product is just a grayscale value and outputs white where we want the glitter chunks to appear we can multiply by glitter color to get the final glitter color but of course we're not quite done with the shader i want to add a slight glow to the edges of the object fresnel light is perfect for this so we can use shader graphs fresnel effects mode for the power pin we will plug in a new property called fresnel power to control how strong the glow around the edges is since the finale values generated by the node are between 0 and 1 increasing the power pulls the white towards the edges then we will create a second color property called fresnel color which also needs to be hdr enabled and multiply it with the fresnel we will add this and the glitter result together and then output the combined result to the emission pin on the output stack even now if you use this shader on a material and set appropriate values you'll be able to make a great glitter effect but the base color is very bleak and i think we need to add a bit more color i'm going to create a simple color gradient along the object running from the top to the bottom for that i'll use a uv node and then split its components and pick the g component this corresponds to the vertical components of the uvs here's where your graph might differ i chose to do it this way because the objects i'm using have their uv's vertical component mapped 0 to 1 from bottom to top you could use the position node in object space but take note of the fact they can run into negative values if the object's pivot point is somewhere in the middle now we will need three new properties the gradient will be made up of two colors so i'll just call them base color one and base color two inventive i know followed by a float property called base gradient power this one will control how quickly the gradient transitions between the two colours we want to interpolate between the two base colours so take the uv's vertical component and raise it to the power of base gradient power then use the result in a lerp notes t slot which represents the interpolation factor or in simpler terms how far we are between the two colours the two colours go into the a and b slots and the result is output to the base color pin on the output stack you might want to handle the transition between both colors differently so feel free to make it completely linear instead of using the power if you want and if you want to use transparency at all you can set the shader to use transparent rendering in the graph settings then split the result and use the a components in the alpha pin on the output stack go ahead and tweak the material values and assign whatever noise texture works best for you and you should see a glistening glowing glitter effect you could use this whenever you want something to take on an enchanted or magical appearance or maybe use it to emulate tiny chunks of metal inside of rock and you've got to admit it's far better than opening a glittery birthday of christmas card and coating the damn stuff over everything in a two-mile radius before we look at this video's extra twists i'd like to thank all my patreon supporters for making this video and all my others possible if you learned something today make sure you subscribe and hit the bell icon to get notified whenever new tutorials drop also because i'm excited and i wanted to fit this in somewhere i'm writing a book about shaders like a real physical actual book it's gonna take a while to make so keep an eye out for more news in the near future for today's super special extra classes we're going to turn on gorgeous glitter into a sparkling night sky i've duplicated the shader then we'll head over to the graph settings and change the shader to unlit opaque and two-sided that seems like a big change but we don't actually need to change much on the graph itself remove all nodes and properties to do with fennel and alpha and then instead of using a mission just add the glitter color and the base color together and output the base color on the output stack back in the scene view add a huge sphere then add a glitter material using dark based colors to it if you tweak around the values a little you can make a starry night similar to this one i'll be back soon with more videos including a detailed rundown of the maths knowledge required for making shaders which is increasingly becoming one of the most requested topics for me to cover until next time have fun making shaders

Channel: Daniel Ilett

Views: 34,258

Keywords: unity, shader graph tutorial, glitter shader, shader graph, universal render pipeline, gamedev, shaders, urp, unity glitter shader, unity3d, shader, unity tutorial, daniel ilett shader, hurl noise, noise shader, shadergraph, unity shader graph tutorial, unity vfx, unity shader graph, glitter shader tutorial, fresnel effect, unity game effect, unity shader, urp shader graph tutorial, unity shaders

Id: jAOqmx764dA

Length: 9min 6sec (546 seconds)

Published: Mon Aug 16 2021