Creating a Shiny Starfield with Shader Graph in Unity - Step-by-Step Tutorial

[Music] thank you [Music] hello everyone in the last Community Paul the majority have voted for a new Unity Shader graph tutorial and here we go in today's video I'll share with you how to create this awesome Starfield Shader graph where you can control the star's density the blinking speed of them we will randomize the position and the blinking of the stars in addition you can choose the Stars power and make a gradient we will choose two colors to do a gradient between them so this is Ramis altoba from binary lunar and let's get started [Music] if you want to learn more about Shader graph and want to go from a beginner into intermediate and even some expert techniques you can check my full 2D and 3D ultimate Shader graph course on udemy I provide down a discount code in the description also if you are planning to buy some assets this is a perfect time because of the dev days of summer where you can buy the asset for 50 off for a limited time so let's start a new Unity project from the unity Hub you can use the last LTS or use any available version for you so let's stick to the LTS that I have 20 21.3.23 F1 but feel free to use any other versions just make sure that you select the 3D urp template and let's name our project star field Shader to create a new project when you start a new scene you should see a global volume which is responsible for adding some post-processing effects like the bloom and vignette what is the most important for us is that you have the bloom enabled with threshold set to 1 and intensity set to one all now let's create our Shader graph by right click anywhere in the project files then click create Shader graph urp unlit Shader graph because we want it not affected by the light in the scene since the Stars will be not affected by the lights let's name it star field Shader let's open Shader graph we can extend this and set the color mode to category the best and the fastest way to create quick stores Shader we can use as starting point the gradient noise since it will distribute a random noise on the material and that is what the Stars looks in the sky so let's create new node and search for gradient noise we need now a parameter a float to control the scale of the Stars so as you can see if we scale this to higher amount it will start to look like a millions of stars scattered in the sky so let's create a new float and name it stars then link it to the scale and you can set the default value to 100 for now next we want those stars to be to seems like they are blinking for that we need to move this gradient over time to do so we will need tiling and offset node and we link the output of that to the UV we will be offsetting the position of the vertices using time and speed so for that we need time node and next we need a parameter to control the speed of the blinking so we can name that blinking speed Okay add the parameter to the Shader graph then we use the multiply node to multiply both the speed with the time we link both of those to the offset in the tiling and offset and we give a default value let's check what happens if we put one it will be like a moving texture and that's not what we need we need them to feel like points blinking and we can achieve that by reducing the speed to a very low value so let's try 0.01 it doesn't feel like Star still if you reduce that to 0.001 or maybe zero two I think that could be a good value okay let's proceed now the Stars feels like they are filling the sky more than the black areas because now we have somehow equally white dots and black dots to reduce the amount of the stars in the sky we will use a power node to control how powerful are the stars or how many stars there are in the scene and for that we need a new float to control the power of the stars and let's name it stars or multiply it with the power as you can see if we set the value to one nothing's changed as we increase the value we're reducing the power of the Stars see here here's five then 20 we have less Stars 25 less 50 maybe and now we can see that we have this somehow feeling like blinking stars and that's the effect that we wanted to see but also we have a problem here we can see some pink dots that means we are reaching values above or below low the range between 0 and 1 that cause those annoying points that will destroy the effect to remove that we just need between the power and gradient noise a saturate node to force the value to be between 0 and 1 and we will exclude any values Above This range so let's add saturate node it's a range and Link it to a at the power and as you can see now we got rid of the pink points then finally we simply link the results to the base color let's see what happened till now in the scene go back to the scene we can use that as Skybox material so first of all we need a new material to hold the Shader graph so right click on the star field Shader create click on material let's name it stars material then we go to window rendering lighting to the environment and we can see here the Skybox material we replace a tart material with the material we created by dragging the material into the Skybox material field and voila we can see the stars in the sky let's click play and see how it looks exactly in the clay mode it looks somehow okay but not blinking as we expected let's see if we changed these values a bit maybe zero zero five it's not exactly what we needed to see so let's try to improve from this point what we need to do is going back to the star field Shader graph actually we're not seeing the glows because we didn't set the color to have an HDR value so that was what I'm missing so let's first multiply the final result with a color so by that we can control the color and the intensity of the color which generates the bloom in the scene so we use multiply node to multiply the color we created with the Stars we generated we can convert this to property convert to property and name it stars color we can set the default value let's okay something orangish and here is the most important thing to set the mode from default to HDR and now we have a new value called the intensity to control the intensity of the color which generates a bloom in the scene let's set it to 5 save go back to the scene let's see what oh that's amazing it feels now like the sky is full of gold you can make the scene rendering each frame by clicking on this button here and set always refresh so you can see always refreshed frame rates so we can maybe increase star's power so now we have less points 500 even yeah something like that but still too much uh stars in the sky and also they are not glowing as we ex to improve this effect let's go back to the Shader graph and to give more randomization to the stars and more glow we can repeat the process but giving the time or the speed and worst value to do values in the opposite direction or opposite effect so we can here multiply the speed with -1 then we copy everything here from the tiling and offset to the power Just link this multiply to the offset here now we're doing the inverse effect of the first one then we multiply apply both of the star fields we generated together before multiplying them with a color so let's multiply node here then link it to the multiply so now we have less Stars better glowing and we can make sure of that from the scene let's save go back to the scene and yeah those looks like more randomly generated stars in the sky maybe power 100 and that's really cool you can reduce the speed if you feel that those glows are very fast and yes now we have very pleasing Stars effect you can control the density to control the size of the Stars the less the value the bigger the Stars 15 look how big they are even five yeah they will be bigger and more scattered but I think a value like 100 is great so if you want to enjoy that in the game scene you can add to the camera fly camera script or let's see camera free camera sorry then when you hit play and maximize The View you can rotate the camera and enjoy viewing the space amazing as an extra step you can add more colors to the stars in the sky by many different ways I'll show you one of them then you up to you to upgrade the Shader graph to meet your expectations so let's assume we need to add two gradient color I mean a gradient color between two values we can go back to the Shader graph and now we need a Stars color one we have that already Stars color one we can copy paste and rename it to Stars color 2 and we will learn between the two colors based on the direction of the gradient of the UV of the material so we need to start with the UV which represents the vertices on the UV then we need to select on which direction we need to do the gradient so if you want to do it let's say vertically we will use the y-axis so we need to split the UV to gain access to the y-axis which represented by the green Channel if you want to set the preview it will show you which access we gained so here we have the y-axis we do a gradient from top to down or we say you can say from down to top if you want it from right to left you use the r channel the rich Channel representing the x-axis as you can see now the gradient from left to right let's keep it from bottom to top then we will use a alert node to learn between two values based on this gradient that we created so let's create a layered node we'll link The Mask or the gradient to the T Channel then we put the colors in the A and B channels so first color circular one the yellow one C filled the gradient from the top side then the color 2 will fill from the bottom side but since they are the same color we can see the difference let's change the other one sounds reddish maybe because the intensity is high we can't see the results in the preview mode but no problem just remove the color that connected at the multiply in the end of the Shader graph and put the lurped value here in the multiply you can see the results here we're lurping between red stars and yellow stars you can set a more Vivid value by setting something blue okay let's save and test that in the scene as you can see at the top we have bluish Stars at the bottom we have yellowish ones great that what we wanted to achieve and that's the end of today's video if you found this video useful don't forget to hit like subscribe and the notification Bell to keep updated did with quality tutorials of course we are deeply thankful to our supporters on patreon who keeps generously supporting us to create such a content and if you become a patreon you can gain access to all our project files since we started this channel till next video see you soon [Music] thank you

Channel: Binary Lunar

Views: 3,301

Keywords: binarylunar, binary lunar, shader graph tutorial, unity shader, unity shader graph tutorial, starfield shader, star shader, stars shader, starfield shader graph, glowy stars shader, skybox shader, skybox stars shader, space shader graph, galaxy shader, interstellar, unity tutorial 2023, unity step by step tutorial

Id: wSM-l2T8wOk

Length: 14min 43sec (883 seconds)

Published: Wed Aug 09 2023