Stylized Water Material Tutorial in UE

in this tutorial I want to show how to create simple stelze water this water has everything we need so first of all it's different color for the bottom part of the water middle sized and the edge of the water also here we have some waves and foam that we can adjust also we have some ripples on the water surface and if we take a look closer here as you can see we have refraction effect when the underwater parts are a bit deformed so um let's start working on this material first of all we need to ensure that distance meesh uh a turn on to do this go to settings project settings and type here distance go to lighting top and generate meas distance field it should be turned on when you do this you need to restart an engine and then we can continue because I already have a turn on I will not restart an engine now so um now I can show you the material it's look like this it's quite simple and now we can start working on it okay I will create one new one right Mouse button click and let's create material let's name it mm water tool you can just leave mm water and first of all Let's uh set up the material by itself so first of all we need to change blend mode to translucent and also we need to turn on to sided what next we need to go here to translucency Let's click here screen space reflection turn on and in lightting mode let's change it to surface translucency volume here it is and that's all set up that we need to do before we start okay and now let's start from the base color first of all let's create two color nodes press three on the keyboard and click on the empty space then click right Mouse button click on this Noe and convert it to parameter and let's name it water color let's change the color to the light blue like this and then contrl C contrl V this note and let's rename it to watercolor depth because this will be the bottom color of the water and let's make it a bit darker and blue so and now let's create uh deps fade note right Mouse button click on empty space and depth fate here it is now press s like snake on the keyboard and click on the empty space and we will create parameter node and let's type here F distance and let's plug in it to distance and now let's click one on the cboard and create another parameter node but we don't Vector one node and then let's change the default value to one now right Mouse button click and let's create cheap contrast cheap contrast node like this and again s on Bard on unempty Space create one more parameter node and let's rename it to deps fate contrast and let's change the default value to 0.5 and plug in it here now let's create LARP node to do this press L on keyboard and empty space and plug in this to Alpha this to bolor and this to to a color that's all we need to work with the color and I also want to add one more lar node because uh we will uh need to change the foam color in the future but we will add it a bit later when we create everything related to the foam but now let's create one more L node L and plus on the space let's plug in this to A to B we will plug in the form and let's duplicate this contrl c contrl v color node and rename it to form color and let's uh make it white and plug in it to B like this and now we can plug in it to the Bas color so that's everything related to color and let's comment it plus C on the keyboard and then empty space and let's rename it to color and now we can start working on everything related to the form it's the most challenging part okay let's start from the absolute World position note right mod button click and let's type absolute maybe better to type World position and as I remember it should be somewhere here on the top here it is World position um next note distance to nearest surface and let's do it like this next we need to create divide node plus d on the cboard and click in the empty space and let's create parameter node s and click on the empty space and let's name it for out distance and let's change default value to 100 and plug in it here next let's create saturate node after that we need to create add nodee let's press a on the cardboard and click on the empty space plug in it to the a okay now we need create few more parameters nodes for uh to regulate the form speed and and to regulate the amount of form lines we will have to do so let's press s on the cboard and rename it to speed of form lines and change this parameter to four let's duplicate it crl c contrl v andame it to amount of form lines and change the default value to one now let's multiply this note click on keyboard and like multiply and click on the empty space okay now let's create divide node click D on the empty space and here we will plug in to B and now we need to create node time let's type time and plugin it to a and then plugin it to add node after that let's create multiplied node M and click on empty space plug in this to a and then this parameter amount of form lines we will plug in to B and now let's create not s let's type S here it is and pluging it to the scene now let's create node one minus and we need to plug in this satate node to one minus node and now let's create one more multiplied node M and click on empty space and plug in them inside of them then we need to create one more satate Noe we can just duplicate this one crl c contrl v and uh right Mouse button and click and create round node let's type round and now um we need to create um another note to basically this part uh give us everything we need to have nice um round um foam lines but to make them look better um I decided to add one Moine to mask some parts of the line so they look better so in this stage let's save our material and because for masking we will need one more texure we will go to substance designer to do this let's wait while material is saved okay so um I will show it here as you can see here from the top um this part is more visible this part is almost empty here we can see the waves again in this place we almost don't see the waves and all these gaps is made by The Mask texture so and also it's make these waves less repetitive and look nicer like this as you can see have here and also here and uh this part is more visible okay to do so we need to create um the noise texture like this for this purpose I use substance designer I open substance designer and I click new graph metallic cess I will leave every as it is maybe change the size of the texture to 1K press okay uh theault plate is more than enough now I will go to um Library texture generator noises and here I need to find a nice texture uh for this mask you can try different grunch textures different masks because they will give different effects of um this transition between um the parts you can good see and the parts you can't see because here I use a very smooth um mask mask and uh I have this transition smooth but if you will choose another grunch mask you will have another effect for this transition so as I remember for this purpose I use a pearlin node node and I change the scale to something like this I plug in it to Bas color and that's basically all I need then I need to go to Explorer to my package right Mouse button click export output here I need to leave format tar and we need to export only Bas color so I will export to my desktop okay let's create a a new folder I have here a water folder and I will export it here export done so now I can go to tutorials water and here's my texture so I open a real engine and we'll just drag and drop my texture here and as you can see it's replaced my prev texture because I did not change the naming let's change the naming and expert it again um okay the water for mask and let's drag and drop it again open this texture and we need to change the compression settings to masks no sgb and save it and now I will use it um with our water as you can see with changing of this texture um the mask on the water has also changed okay let's open our material again and now let's take our mask texture and just drag and drop it here right Mouse button click on it and let's convert it to parameter and let's name it for mask so we need to create one more World position note parameter Note S and click on the empty space and let's name it form mask scale and change it to 2000 now we need to create divide node there and click on empty space and let's plug in it like this now uh if we plug in it here and then to the other node that will uh have an error because we need to use only flot to component uh for do this we need to mask one of the channels and leave only two let's create a component mask node and leave only R and G like this everything for default settings and plugin it to UV okay now let's create chip contrast node plug in this here and let's create parameter node to change this contrast parameter s and click on empty space and rename it to for mask contrast and change this parameter to 02 now we need to create multiplied node M and click on empty space plug in to a and create one more parameter node now we will regulate the form contrast because it's contrast of the mask and now the form s and empty space and rename it to form contrast and default value we will change to 05 now we need to combine these two parts in one to do so we will use multiply node M and click on empty space this to a and this to B and now we can plug in this mask to the alpha of our Color part like this and let's save our material to do not lose all our changes and now we also will comment this part do not forget to do this press C on keyboard oops and change the size a wa like this and change the name let's name it shorter line and we can bring it a bit closer here so now we need to create um a specular roughness opacity and refraction parts and also normal parts and let's start from the roughness specular first of all let's create LARP node L and click on empty space and plug in this part like this here let's create parameter Note S and click on empty space and name it to roughness and change this parameter to 09 and create Vector one node press one on keyboard and click empty space and change the default value of it to one and now let's create node one minus right Mouse button click on empty space and type one minus pleas PL in it here and now we can plug in it to roughness and specular like this and also commented press C andame it to rough roughness specular so um next step let's work on normal to do so let's create texture coordinate Noe divide node D and click on empty space and also let's create parameter Noe and name it normal mask scale and as you already understand we need a texture for this purpose and to do so we can return to substance designer and here we also can find something interesting maybe we can use even this part so let's plug in it to normal and we can increase normal intensity press space bar and type normal intensity pluging it like this and increase normal a bit maybe this part yeah I think we don't need normal intensity let's let's leave it as it is like this and maybe we can change the scale of pein node to have it like this that's okay and now we can WR Mouse button click here export output and now we need only normal click export go to the folder we have and let's rename it to form water normal water normal mask open an real engine and now we can just drag and drop it here let's open it and check that it's normal map that's okay now we can take this texture and drag and drop it to our scene also um experimenting with this normal texture will also give you different results of this nice ripples on the water okay let's come back to our material uh right Mouse button click on this texture and let's convert it to parameter and rename it to normal mask now we want to move this texture on all the surface to do this we need a pner node Panner and pluging it to coordinate and this to UV and now we need to create a parameter node to regulate the speed of movement to do this click s and click on empty space andame it to normal speed and plug in it to the speed and change the default value of this node to one and also we want to regulate the intensity of the normals on the surface to do this we need to use another flatten mask flat and normal node here it is plug in it to the normal and then to regulate flatness we need to create one more parameter node to do this click s on empty space and rename it to normal flatness [Music] and let's change default value to 0.5 then we can plug in this to normal commented see and click on empty space and rename it to normal the last thing we need to M it's refraction part but if you don't need it you can even leave it as it is so let's save our material oh and also I forget about the positive way that's important part okay so um let's create LARP node to do this click l and click on empty space and now we need to create parameter node click s and click on empty space and let's rename it to reverse refraction and leave the default parameter as one and plug in it to a now let's create one more parameter node s and click on f space and name it as refraction click it to B and change the default value to 0.8 and now we need to create note two sided toid it in and plug in it to Alpha and plug in this to refraction let's commment it press C on empty space change the size and rename it to refraction and the last thing we need to do it's opacity so for opacity um okay I will do it here first of all um let's create parameter node s and click on empty space and let's name it deps fate distance transparen dep fate distance transparency and uh change the default value of it to 500 and create a vector one node click one and click on empty space and change the default value to one now let's create dep fite node plugin one to opacity and find distance to this node then we need to create clamp node write Mouse button click on empty space and type clamp plug in this to the top and let's create one more parameter node s and click on empty space and rename it to translucency transparency sorry and change the default value to 0.5 and plug to not to Max to mean value that's important and that's all we need to for opacity let's comment it and rename it as opacity and then plug in it to opacity so that's all we need to have for this material let's save it we can close it and now let's create material instance uh choose this material right Mouse button click create material instance let's rename it Mi Water 2 I will apply this material to water that I already have in my seam as you can see the appearances has changed and now we will set up our material so um as you can see now all my parameters are mixed up they don't have any groups so I suggest you to return to the our material again and let's create groups so our material instance will look like this and it will help us to work with material in the future okay let's open our material again and go here so first of all let's create group color select this note and in parameter group let's type color and change the priority number to one then the second node change to color and set priority to two and the form let's choose let's let's select uh the group color and change the priority to three so this will be Color Group now let's create um a Shor line group to do so let's select uh first parameter for our distance and create the group Shor line and change the priority number to one then select the SE parameter select priority two then choose Short Line of priority three for mask scale choose the Shor line and set parameter four then choose for mask contrast Shor line five form contrast Shor line six and also for uh mask also do not forget to Cho choose shorter line and choose the priority seven so that's the Shor line group um now let's create um okay roughness specular for one node group let's name it roughness and change priority to one um now let's create fight distance group select this note and let's name group fight distance and set priority number to one then choose uh F distance cont node and select group F distance and sub priority number to Two Also let's go to opacity and choose the depth fade transparen note also to this group fade distance and priority number three and transparen also group fight distance and sort priority number four so what else left uh now we need to create a group for normal map so normal map scale uh let's name group normal and set priority uh number one then normal speed let's choose group normal and priority two normal flatness and priority three and also normal mask group normal and priority four okay and the last group for refraction choose the first one rename it to refraction priority to one and the second note to two and that's all let's say our material and now when we will open our new material instance as you can see now we have everything sorted and that's look much better so um now we can turn on all these parameters and start setting up it so um as I told you you can experiment with normal and fo mask I don't know we can do it now um as a test for example okay let's take I don't know this one might be this one let's make normal lesson tense like this and let's create note um BL blue Rush Q gray scale and blue res note a bit um now we can export outputs by scolar and normal go to our folder and let's rename it to for mask 02 and normal mask 02 open and real engine and just for mask 02 purple mask and just drag and drop it here and don't forget to change the compression to mask no sgb on the Bas color so um let's set up our material and then we will experiment a bit so first of all color as you can see we can change the color as you can see after changing the watercolor to Pink nothing change this because I saw that F distance parameters is set to zero let's return to our um material and change this F distance parameter to 600 and save this material now when we will return to our material as you can see pink color became visible so the pink uh the first color it's the actual color of the water so we can leave it for example green and the another color it's the bottom water color okay let's let's leave it blue as it is and now we can go to fade distance parameter so fade distance it's a parameter that regulates the depth of the water that reflected by color so let's leave it as it is depth contrast it's uh how smooth uh the transition between the um depth uh and mid water color uh is going then depth Fades distance transparency it's U how transparent the water is so as you can see let's leave it something in the middle and transparency it's the parameter that show how much transparent is water near the border so as you can see now it's almost invisible and now we can make it almost not transparent so let's let's leave it transparent something like this so now we can go to the normal as you can see uh we don't see any repulses because the normal mask scale is very small and when I change this parameter to one we start see this let's change it to 05 and then we need to regulate normal speed let let's change it to 0.01 and normal mask scale is inent we need to go from what I see this side is optimal for this texture but it also depends on texture you have and also we have parameters normal flatness uh if you will set up this parameter to one uh we will not see any repuls but if you change this parameter you will start see in them and if we change the texture for example for this one this effect will all also change as you can see but previous one works better for me so um what else now we can go to the form part and uh let's adjust it so form our distance it's the distance when the water uh when the form starts for example the bigger is distance and the bigger distance form starts uh so let's make it a bit smaller because it's too much okay let's leave it as it is 100 um we can change the speed of the lines for example two they will we will see them faster maybe six they will be smaller amount of lines I like to have more lines for example uh four lines uh then uh for mask scale it's um as you can see now we start masking some parts uh of the foam for example like here so we need to find the best size of this mask to mask as much as we want and now we can also set up contrast as you can see now we see everything but when we create this parameter the mask became more obvious and also if we want to have this transition more contrast we can also play with form contrast with high parameter everything became more visible but I like to have it uh smooth as it was uh before like this so as you can see it masked here here but now we can change the texture as well for this one and now we need to adjust the contrast and the scale of the mask for example like this so now this transition is not so nice but anyway you can experiment I will return everything as it was before and um refraction I will not touch because theault parameters works good but as you can see everything is working so um that's basically all I wanted to show I wish you good luck with your water material and goodbye

Channel: Victoria Zavhorodnia (akbutea)

Views: 4,014

Keywords: UE, Unreal Engine, Tutorial, Water, Stylized, Simple, UE5, UE4, Material, Blueprint, Master, Instance, Depth Fade, Refraction, Tranperent, Translucent, Foam, Shoreline, Color, Environment, Art, Game, Genshin Impact, 3D, Engine, Styl, Cartoonish, Anime, Lake, River, Ocean, Waves, Mask, Texture, Node, Akbutea, Game Magic

Id: bIEB85ITmEo

Length: 41min 8sec (2468 seconds)

Published: Mon Apr 15 2024