Unity Ocean Shader Tutorial with Amplify Shader Editor: Part 1

hello and welcome back to poly toots today we are going to be building an ocean shader with shoreline depths and some other sweet bits included I should probably clarify that this is not using unities shader graph I will certainly do an update for that when Sheila Graff updates allow me to but that said i basically just be porting over the knowledge that I'm about to bestow upon you now so even if you're 100 percent in the shader graph this tutorial will still benefit you I mean even shader tutorials using the Unreal Engine would do the same it's all it's all the same stuff pretty much so moving on future me will put a time on the screen now for you to skip through if if you want to just jump right into the into the tutorial thanks future me but current me is going to spend a minute or two covering what this shader actually does and what it is you'll be learning so just to run through what this shader does real quick one of the biggest points for me is that it's fully title meaning no seams but it's also not just a clone of each water plane so you can get a lot of mileage out of this as you can see here new ocean plane snapped into place no seams and in my opinion no visible repetition either so pretty sweet of course we have edge detection with a tiled foam texture it's probably a bit small here but we can always tweak that and I'm using the same texture for that as I do with the sea foam itself which is always moving around and being masked out so it's never quite the same which is always nice means you can stare out on this water and never quite be able to tell where the repetition exists unless you look for it I suppose but you know what they say if you go looking for trouble you'll find it so please don't look for my repetition we've also got depth so you can have things super clear or super murky and you may have noticed the refraction happening under the water here too and so that's based on the depth which limits the weird refraction issues you may have already seen in other games it doesn't completely fix it and I'll explain more about that as we build it but it's a good compromise considering there's no manual coding in here we've also got the ability to create some waves and adjust the speeds of those two these may not be the most realistic ways in the world but the method is pretty solid so you should be able to play about an experiment with it yourself once you know how and if anyone watching happens to know how to make Gerstner waves using only node based shader things than I am all is if anyone also knows how to pronounce Gerstner then that is also of interest to me it's probably worth mentioning that my waves are tied in with tessellation so right off the bat we've got some tessellation based on distance meaning what are that's further away won't need as much geometry and amplify actually make this super simple as there's literally a single node for it I will discuss how to do this manually though so don't worry if you're not using amplify and on top of that I've hooked it into the wave height itself so calm waters won't require a boatload of triangles but as things get intense then it creates the geometry as needed then there's also the normal map panning pretty standard stuff you can adjust intensity and speeds this affects the overall glimmer of the water but also the refraction and so lastly only because I know people will ask we're not going to be doing any sort of interaction here like floating objects on the water's surface that's mostly a code or scripting job and since I don't teach that I won't teach that but there's plenty of buoyancy scripts and plugins on the SS store if that floats your boat we're also not doing anything underwater I do have my water surface is two-sided and from here you could set triggers so that if you enter the water then the other lighting changes fog is introduced some post process if X can be enabled you know etc but yeah again I'm not going to be covering that this tutorial is just for the water surface as you see here so that about wraps it up I think not sure if I've missed anything or not but it doesn't matter too much because we're going to build this entire thing right now this tutorial will likely be in separate parts but I'll try my best to keep it condensed and informative so alright let's do it okay so first things first as always we'll create a new amplify shader create a shada and then we'll just give it some names then I'm just gonna right-click it and create a material and that way it propagates correctly also should have committed that before doing that so now if I remove this now if I do it will actually give it the correct name as well so there we go and I'm gonna select all of the waters in this scene so we can say goodbye to the previous water and I'm gonna replace it with this new material so yeah back to basics so yeah the first thing that I'm going to tackle today will be the the actual waves and then provided that we have enough time will kind of move into some edge stuff and some normal stuff but yeah anyway for my waves I am relying on a noise generator and just get that out and just as a sort of a quick example I'll feed some UV coordinates into there just give it some random stuff and I'll stick that into the the debug so we can kind of like watch what happens kind of as we go and so obviously there's a couple things that's wrong with this one you know it's not tiling - it's not moving three it's not at all remotely related to the shape of waves so those are the three things that we need to kind of fix with this but this is our starting point at least so what we can do first of all is we'll deal with the the panning so we'll get ourselves a pan a node that in there and now we want some some nodes for like the other speed and the time and the speed in this case will actually be the direction so let's just say sorry not affected one we won't affect the two because it's x and y so we can specify basically which way it moves on the X all the Y you know minus or plus for the time let's just get ourselves a time node and we'll multiply this by a vector one and this will be our caller wave speed actually this one I'll call wave direction I won't make this a property though you can if you want I'm just not going to my wave speed however will definitely be a property give it a default value of say one and put that into time and now you can see nothing's moving because we haven't specified which way we want it to move so if you want on the X it will move on the X if we want on the Y it'll move on the Y so for now let's just leave it on the X and this has already hooked up so I just hit this so we can see that it's panning great that's one of the problems solved but still yeah we got some seams and it still doesn't look like waves so that's basically we can fix two of these issues in kind of one go by using world space movies and within there we'll also tweak the actual to kind of scale of these and what I mean by that is basically if I were to come here on the tiling and not really sure which one of these it will be but it's not that one try to say five and one you know something like so basically the idea here that we will do is basically just stretch out this noise so that it looks more like waves so yeah let's just go ahead and do that so let's get ourselves some world space you these first so we're going to need a world position node and we're going to append the X and the Z and this will basically just sort of like project your movies along the x and the z-axis and I know I interchange set and Z all the time it's I can't help it or watch too much American TV and what I'm gonna do is actually I'm going to get down a register node just by holding the power key there and I'm just going to call this I don't really like wave with no I'm just call this not world space well space tile and the reason I'm doing that is we're going to kind of use the world space you v's a lot so at least I have those there and yeah so for now I mean let's just comment this this this can't speak today and I'll just say world space these so this can basically just exist anywhere and then we'll get the reference that we've made so I'll say G to get and then we'll choose world space tile I guess that was what I called it okay makes sense and what we're gonna do is actually going to multiply this by the the wave no sorry not not any of this stuff not yet I'm kind of skipping too far ahead so I should really just slow down and collect my thoughts this one is actually going to be the other wave stretch so again it's going to be a vector two and we'll put that into there for now let's leave it at one on one because we probably want to be able to test this before kind of you know applying it basically because there's no need for this to be a property but I will make it property temporarily just to kind of tweak the other values so yeah let's multiply this and then what we can actually do this is what I was gonna do before I know yeah I haven't created it yet so sorry about that this is going to be the wave tile so this will define as well this will actually be our tiling so put that as a default of one stick that in there and now basically we can just drop the UV coordinates that we had before and yeah for now what I'm just gonna do is just hook this straight into the UVs you can see already things have changed but I think it kind of went the other way so a photo hit that okay yeah and as so obviously is messed with the like the tile scale and it's flipped the way that it moves but the tiling you know like the seams are gone so yeah wave direction we probably want this to be minus one so it's actually coming in toward our coast I will do and now yeah now we kind of want to tweak actually select the right one we want to tweak the actual the value of the waves so they're going to need to be like a lot smaller wouldn't want to go like zero on the why because it might just create these like super straight lines but this is gonna be like a pretty low number maybe even something like that could be okay yeah I could work and then we also have you know the tiles so we can specify basically how many of them there would be but that depending on what kind of style that you're after you know I kind of leave this up to you so for me though see if that is a one okay I'm happy with that so what I'm going to do is I'm going to come back to this vector zero and I'm just going to put in these values as the defaults and so this was point zero one and now that can can just be a constant I mean if you wanted to keep it as a property and then just like change it to you know whatever you want it then that's fine but for me I'm okay with that so okay that's kind of okay for the wave shape but what we're going to do is we're going to need to actually make it offset the actual vote so let's get this out of the debug and let's put it into local vertex offset and also into a mission so we can kind of see what's going on okay so you see here pretty crazy stuff let me just actually no sorry get down a float one I just call this tessellation basically I think we need to be looking at a lot more geometry to kind of see what's going on here so hook that into there give it a default value of eight or so and if I were to just hit apply now on this it won't do anything because it's defaulted me to the the shader model 3 but you want to be a think at least four point six for the tessellation to work so I'll just hit that okay so now we probably have enough geometry but you can see that there's some other weird stuff going on okay I mean we have a lot of geometry but this is offsetting kind of like in both the Y and maybe there's ed I don't know either way it's going in two ways which is not what we want so put that back to shaded pretty quick fix though let's get a vector3 and this will basically just be a wave up we don't need to make this a property you can if you want it basically just specifies which direction your verts will move in and we can just kind of multiply this in fact just for now just kind of just keep it as is and we'll specify one on the Y because that's the way that we want it to move we wanted to go up on the Y so if I feed that into local verdicts offset you can see that now and it has actually made those waves but yeah they're pretty they're pretty boring that you know missing a lot of stuff there's no Abin flow it's all kind of say me say me so we can look into fixing net first of all because basically I mean I'm planning ahead I know that I'm gonna need these UVs again so this was basically if you remember the end of the world space you v's so let me have this and now I've created you in these other nodes with the stretched water tile although at the wave tile and then the actual tiling amount for it so I'm going to create another register here and I'm just going to call this one actually like wave tile UV and then what I can do is actually just tidy this up a bit and stick that there because I'm going to need it again so I can kinda just get that a bit out of the way and so from here let's just copy this pana and also the other noise because basically to create that Evan flow you might be tempted to kind of throw down like a sign to time so it kind of just like fades in a now but then I don't know it still looks a bit strange to me so the solution that I kind of came up with is what I'm going to do is basically just use the same waves that we already have but I'm going to like scale them down and then they'll basically come across the whole thing a lot quicker this will make sense in a second so potential speed the speed can stay the same and so the UV s Direction will also stay the same but what I wanted - is I'm going to drop down a multiply node but that there I'm going to reduce this maybe like down to like point one or something like I want it to be it will scale it down but it will be larger that makes sense either way I mean you'll see what what will happen so it's gonna be messy already isn't it so what I can do here is I'll just add these two together I'll ignore the the wave up for now and I'll just stick this into the mission okay so the tiling is kind of crazy and the speed is also kind of crazy so let's just try and fix that up okay yeah something's gone a little bit wrong okay yeah I've accidentally given this the the same UVs that was why I guess it appeared all strange so yeah I apologize for that I'm trying to make this sort of concise and informative but I keep making those weird mistakes so yeah it's get the wait tile and now so yeah oh I liked how I made this whole thing but because I was going to use it again but then I didn't so this is actually the I've got the reference of the whale tout whale whale no wave tile UV so I'm gonna do that again so I can naturally clean this up a bit so if I'd have done this first we wouldn't have run into this mistake because I accidentally put this multiplied into both of them so yeah let's just get that in there okay and so now maybe it's a little bit more obvious what's up what's happening although probably still a little bit difficult to tell but there's sort of like a secondary mask that's coming through and it's causing like a change of the initial waves which is sort of a more ideal version of that ebb and flow I'm wondering though if perhaps we should go back to our wave yeah the UVs here so the wave I'll call this wave stretch maybe maybe maybe I'm gonna just play about with these numbers again see if I can get something a little bit better I'll be back when or if I even decide to change them okay so yeah just ended up with these numbers instead so 0.15 and point zero two it's not too much different than what it was so that probably wasn't necessary in the slightest but there we go so yeah it will have this other kind of wave kind of run through the whole thing which kind of affects all the other waves which to my mind looks looks a lot better than kind of like sticking a sign time on them to try and like fade them in and out so yeah that's that so what we can do from this point is actually start hooking this up into the the vertex offset and that's actually kind of maybe think about hiding some of this stuff up so but the worldspace you v's will keep over there this is going to be this is all of our basically after the worldspace UVs we have our wave tiling which is all this happening down here might as well unhook this for now because I think basically this is just a wave pattern which we're going to need later so yeah from now I'm gonna get another reference and I'm just gonna call this wave pattern stick that and that just as a register but we won't actually use it because what we're going to do instead is because we've got this added in here I'm basically just going to throw this up so we can actually control the scale of the waves sort of independently of all of this so we already have the direction that we want this to go in so we'll just actually multiply this by like the 1 and this will be our wave height I give that like a default of 1 as opposed which will probably be quite big but that's fine and then what we can do is just multiply this again but we're going to use the combined pattern that we have down here so it's you know it's pretty sort of neat and tidy because this is basically just where we will control the height and then this all of this other stuff is the pattern itself so we can throw off another register here and we'll actually just call this wave height because this one actually contains the height information whereas this is just the black and white grayscale so yeah let's grab this let's just grab all of this actually not you you can go back there so yeah from here they'll get and we'll grab our wave height and we'll stick that into the local verdicts off set and then let's have a look at that okay so yeah so I forgot my but I can just stick that in just as an example so yeah you can kind of see what's happening I forgot to make my wave height a property so I could just do that now okay yeah so now we can control basically the height of the wave so you can have them you know basically be pretty much nil which basically means you know there's not enough power there for it to like lift up the verts then yeah obviously you can kind of go as crazy with that as you want but I don't recommend too crazy and then the tiling amount which will just basically make the waves larger or smaller and then the speed of them so you know you can have really fast ones or not yeah so that's pretty cool and this is kind of like the the foundation for a lot of other stuff so I'll take this comment these I'm pressing the the C key another way to do that and I call this one just wave pattern so yeah pretty cool but yeah at the moment if I just take out the emission and then just hit that it's pretty pretty hard to see what's going on so quickly and do two things one just put in a smoothness maybe default value at the PowerPoint 9 it's down there this isn't going to make too much of a difference but it does kind of help yeah we're just going to get in a normal map but we're not going to do anything anything too crazy with it because running out of time for this part but will basically just say unpack normal map and we'll throw that into normal so this will basically just help us see what's happening on the surface of this water a bit better so I'll just apply that and come here and I think is called water or something I will be providing this stuff see okay there's a normal map and you know immediately there's like a massive change which is pretty cool but yeah moving on like before we close out this part I want to just cover the the actual sort of albedo the like the change in tents and so what we can do with that is will basically get two colors call you know one of them say water color mechanical spell and the other one will be our top color and make these both properties because we're going to want them exposed for now I will just give them just you know a sort of random value of whatever I want the water to be so this one will be that kind of blue and then I always have the top color just sort of like a slightly lighter so that'll be fine and what we're going to do is just loop these together perform and we're going to get the the wave pattern so not the one that we use for the height but the one that we made here which is just the black and white pattern so yeah let's get that wave pattern and I can't just stick this right in because it will kind of mess with the colors a bit right maybe hopefully I can just show you an example if I just put this straight into the albedo so we can actually see it I mean it looks okay but it is there's there's like some there we go like some strange dogs coming in and that's just because we need to decline pout the pattern that's coming in because we're adding two values together which is fine for our height we kind of want them to kind of play with each other like that but for the color we do not so we want to introduce a clamp in here that way you know if we specify a color it will remain as that color and so there we go I mean already you know it's looking close to to the previous one but yeah so let's just register this again just because I like to keep things neat and tidy so close albedo and then we'll get albedo and I'm gonna track that down in there and then this guy basically okay so that that was actually pretty quick so as a little extra bonus I suppose what I'm going to do is actually do a little bit of the intersection like the actual sort of edge from and this is going to be pretty straightforward like I won't introduce the textures and stuff yet but will will basically just set up the basics and we'll use a depth fade for this so yeah we have this and I get a vector one and this one as a property this will be the the distance so say edge distance give it a default of one I suppose it's probably gonna be too much but it'll do so yeah stick that into the distance and then we're going to want to one minus this I could show you what happens if you don't or you could just take my word for it and then we're going to multiply it again by another vector one but this time this is going to be the actual are the strength of it so we'll call this just edge power and then put that in there and then we might as well just register this and we'll just call it vertical edge but a being bit of boom so now let's say get and then we'll find our edge stick that into the emission and it would probably help if your edge power was a property and had a default value so there we go try that again okay so that's pretty ginormous so let's tone that down a lot so edge distance and yes power oh yeah no so this is the point where you actually need to disable the car shadows and receive shadows because it does not play nicely with the depth fade so yeah that's kind of working still one more thing that we always always need to do so if you ever see like these crazy blown out colors it always means that you need to use a clamp so it's often it's easy to forget but we'll just stick a clamp in there and okay there we go so that's that's done it quite nicely so we have the other distance which will basically just you know it'll go down an object and then the power itself controls obviously the power but you probably do want that to be a slider because there's no real need for the edge power to go beyond one so yeah one zero one zero neat yeah so I'm gonna wrap that up for this part of the tutorial because you know try and keep these kind of short but for the next part we'll probably look into you know more kind of normal map stuff we'll actually have like the panning we're look at the depths refraction basically probably try to just finish the shader I hope this isn't going to be three parts so we'll see so that's that for now it's already looking pretty good I think but yet we will continue in the next part [Music]

Channel: PolyToots

Views: 53,791

Keywords: unity, game dev, texturing, uv, game art, shaders, amplify shader editor, tutorial, Ocean, water, shoreline, waves, tide, refraction, depth, tiled, sea, shader, foam, stylised, realistic, pbr

Id: bl8sAEDpiTs

Length: 28min 15sec (1695 seconds)

Published: Wed Apr 17 2019