ThreeJS Displacement & AlphaMaps - Create a 3D Terrain!

Key Takeaways

what is up today we're going to be stepping back into 3js in order to do this cool little effect [Music] what is up everybody so today i'm going to be doing yet another 3js tutorial um for those of you who don't know last week i did the first 3js tutorial that i've done in several years um and i'm going to be really stepping into 3gs a lot more so today we're going to be doing another basically beginner's level sort of project and this is basically just our sort of like a fictional landing page and the idea behind this is using displacement maps textures and alpha maps to create this sort of cool effect that you see here like this fake mountainous terrain alright so as always make sure to subscribe and let's get started now wait one second you're about to watch me use 3js which is a part of front end development now if you're not a good friend and developer you should definitely check out scrimba.com they've recently launched their front of development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so check out the first link in the description below to get 50 off all right so we're gonna get started here click on the youtube description to get this link here which is the web 3.js webpack starter um i described by the way in the previous video that i did with 3js a week ago um about how this this project and this um this starter is set up i run through the code i'm not gonna be doing that this time so make sure you check out that video if you haven't seen that yet um so we're just gonna go ahead and copy this here and then we're gonna go to visual studio code and we're going to go to view terminal and we're going to hop into you know wherever you store your your projects at get clone right click to paste that in and then the name will give this we'll just call this three js hyphen terrain all right takes one second literally we're going to cd into three js hyphen terrain and we're going to run uh npm i just to install all of those dependencies that was in the package.json file finally we will run npm no yeah yeah we'll run npm run sorry the brain fart there just woke up um npm run build and then your browser will launch up magically um in a second or so oh what is happening here oh i'm an idiot npm run dev all right yeah definitely signs of having just woke up all right so this is what you're presented with this little ring um so let's go ahead and get started here so basically let's go over here um let's open the folder that we just created though so um we're going to type in code my code folder and then 3js terrain select folder and there we go so one thing well we'll do that in a bit um let's go to our script js that's where we're going to be working in and you can see there's a bunch of stuff that's you know already imported here we're actually not going to be using orbit controls um so let's hide that all right so we have a dat you know we have our dat.gui which we'll be using as a debug thing to help us position certain things um we have our canvas scene geometry here's the geometry for the tour so basically at this point i'm just going to go ahead and get rid of all of this stuff in the object material and mesh so just to reiterate your mesh is composed of an object and a material at all times you'll see how this works um well almost at all times or some other things are a little bit different um but for the most part your 3d objects are going to be you know you define the actual geometry the shape of it um the material think of that as like the skin of it and then your mesh is both with both of those things combined okay so objects uh what we're going to specify first is the plane uh buffer geometry now sometimes when you you look at um maybe if you go to google and you type in um playing i like like a certain type of uh geometry that's already provided by 3js like uh plain or sphere you'll see like two iterations of it like there's a plane geometry and then there's a plane buffer geometry so the buffer is just more performant basically so use that where possible um so in order to create our uh a plane which is going to be a flat plane i we have to create the actual geometry for it so const we're going to do uh we'll just call it geometry because we're only working literally literally with one uh 3d object here so you would probably want to use more specific names other than just geometry we're going to say new three dot plane buffer geometry right there and you could specify uh four different parameters here just to get started so we have as you can see up there and a little helper you have your width height and that defines their size uh we're gonna do a three by three and the size that you use is really dependent upon the camera's position in relation to it so if the camera's positioned back far and you want a bigger one you're gonna have to have a bigger you know size for your objects obviously um so three by three and then we have width segments and height segments which is we're just going to use um 64 by 64. we could probably get away with something smaller i think we can experiment with that just to show you the difference of what that does but basically the higher these are uh and they need to be in like multiples of two or whatever like so 2 4 6 8 16 32 64 128 whatever um the higher that is the the more smooth the more detail it will have especially for what we're doing with the displacement map but also the less performance it is so we have our geometry here it's already created now of course if we save nothing's going to happen because we haven't added it to the scene yet all we have is just this variable right here uh materials we're going to need a material to add on to this and this is where a lot of the work goes to achieve this specific effect so we're going to say const material it goes new three and there's you know a bunch of different materials out there um we're going to use mesh standard material uh it's it provides one of the most like realistic has a lot of options and stuff um so we're going to use that we're going to open that up in this object here and for now we're just going to give it a color of gray all right just so that we can see it and we're going to be adding more properties here to achieve that effect so now we have the two things that we need in order to add it to the scene or create in order to create a mesh in order to add it to the scene so that's going to be uh we're going to create our we're just going to call it a plane because that's what it is really we're going to new 3 dot mesh and inside of here we simply put those two parameters first the geometry then the material and then we have to add it to the scene and let's add the plane to the scene so let's save this and see what happened here and yes this is what happens sphere is not defined that's what that ring was called because we were rotating it so down later on in the code uh we have to go down here let's just do a ctrl f with sphere um we'll go ahead and let's just comment that out uh and now we refresh we don't see our plane um actually i think it is there um but what we it's we're having a hard time seeing it because i think of the the color let's uh probably gray was not the best idea um let's go to here make it red it's still going to be dark i think yeah there it is it's just really dark and it's also really big so we want to move the camera back um so for that we're just going to take our we're going to do search for camera right here let's move it back from three all right so now we can kind of see it in the middle um of course everything is really dark still um let's go ahead and try to rotate this down in such a way that it looks like it's almost flat but not um so one of the ways now i already know what the value is that i want to use but when i was creating this project i didn't so when you don't when you're not sure about the values that you should use instead of just screwing around and just inputting the values manually you can use dat.gui which allows you to easily use user interface controls or sliders to adjust various properties from colors to a lot of other things so let's go ahead and add that real quickly we already have the gui instantiated at the top of our code so now it's just a matter of just referencing gui dot add in order to add these different properties um so let's go ahead and add just under um i think we'll do it just under our uh where we add it to the the plane we'll do gui dot add plane right here and we want to adjust the rotation um so rotation and then right here is going to be the property that we want to rotate so there's x y z we're going to do on the x axis and you can see once we add this up here in our controls we're kind of pushing it around and you can kind of see slightly what's happening but if you want to make this easier to use with an actual slider you have to put a minimum of zero for perhaps or a max and a max rather of like 600 or something actually i don't think they think that's a value uh that's like way too high but anyhow um now you can see how we could start to add this so the rotation that i ended up uh sticking with is oh we're going to add it manually plain actually we're going to just underneath there we go plain dot rotation dot x equals 181 all right all right so now by default it's already at 181 as we can see here and this is the size that we want to use all right so for our point light the reason things are dark is because our point light right here is at point one intensity if we bump this to two now we're really gonna see this sucker all right um so another one of those things that we can do in order to figure out like lighting position and stuff is do the same thing with the gui so after adding it we can do gui add point light.position x y and z so you can add all three of those things and then finally in order to adjust color and as you can see by the way when we save this you know we can change this so this is on the x-axis so this is this would be like directly over it this would be over to the right y of course and z okay so let's add color like if we want to change the light color so this is a not a straightforward we have to see see for this the first parameter of dat.gui has to be basically um an object of some sort so this is an object and this is one of the properties within that object um so you can't just add gui dot add and then like a color of some some way so we have to do it is you have to create um an object first we'll call this call for color here's our object property of color and then you can give it just like some specific color first like red uh actually let's make it blue and then after doing that you can do gui dot add color not add and then you can simply say call you pass in and then the color property and then on change we have to notify 3js that we're changing we're attempting to change the color and then inside of here we're going to say point light because that's the color of the thing we want to change dot color dot set and then we pass in call dot color and this of course call that color gets updated in the interface of dat.gui um so that's good now what we can do is go back and what is happening here fail to interpret color arguments oh i guess you can't put just like straight up blue all right we could do hex values so like um f let's just do zero zero f zero zero i'm not even sure which one which color that is um let's refresh and if we change this something's weird's happening it's just like it's not changing color and this has to do with the fact that i believe that it we have color red here if we change it back to gray we can now see that this will begin to work based on the color value that we want all right so we'll experiment with that further but let's first start getting the actual texture onto here so i found this texture here kind of just like a weird mountainous texture that's what we're going to use here um and so i've downloaded that already and we're going to put that in our static folder so we're going to open this up and i'm just going to name it texture.jpg um so up here i've already just added these um and of course these aren't there yet but they will be so we're just using our texture loader and so that's i forward slash texture.jpg jpg is the one we want to use and then over here in mesh standard material we map the texture to it so let's go ahead and save this and there we go there is our texture and of course it is affected by the colors that we end up using um pretty cool in and of itself um so now let's do the actual displacement map and this is really fun i i personally find it very fun and so what it involves is just using an image that's black and white black is low and white or the lighter areas will push it up push things up in the actual geometry of the mesh um so there's a lot of ways you can do this but for us we want to kind of like a mountainous train we can do that with photoshop all right so i'm going to create a new um we could use something that's relatively small for this too like 200 by 200 all right so what we can do now is let's just make the um actually if we just go to filter with a white foreground and black background for these right there and we go to filter we go to render clouds we have something interesting here and you could do this a bunch of times and it comes up with something different each time all right something like that i'm going to go back to the first one now this it's kind of overall just squashed out like you know there's not a lot of difference in the values so what we can do is images adjustments i think curves is what we can use to really make some of it um like polarized so if we push this up and maybe this down there we go now we have you know significant differences in the actual color values something like that this might be a little bit too much so we can go to images adjust invert that might be a little bit more realistic where you have you know valleys that are in the darker values and then other areas that are you know whatever so you can really experiment with this so let's save this control shift alt s to save for web a png 8 and we're going to save this inside of our static folder of let's do date modified there we go we're going to go to static and we're going to call this height dot png all right so i've already referenced that up here height.png and so now what we'll do is put displacement map and height now let's just see what happens um after doing that okay so now it's a little strange looking what would be worth doing at this point is rotating this thing um so let's go down into um where we have our animation it's a function called tick right here so um clock is new 3d clock and we have a constant of elapsed time clock dot get elapsed time basically this is the different ways that it allows us to animate things based on time um so we have our plane and we're going to set rotation z by 0.5 times elapsed time now i'm going to take off that 0.5 just to show you what that does actually if we save it there we go i think it's personally a little bit too fast so 0.5 times that and that'll slow it down all right um so now what we'll do is let's see here let's adjust the displacement um what's it called it is the displacement scale so displacement scale will affect how high and low those values from the displacement map are affecting the mesh so we'll just do 0.1 here now the reason now of course let me adjust that a little bit more so if we go to like 0.6 you'll see what's happening that looks a little bit better um we are going to stick with point one though and you'll see why a little bit later but for now this is fine right here okay so now let's get an actual color that we think you know looks good so if we i i'd say this looks pretty good right there so now we have our color code which is zero zero b3 ff just copy that right there and then what we can do is let's close that out um we could put that and bake that right in our material um which is oh no it's our point light sorry so we could just put this here in just like that and now by default we have this going so now we can you know you could further adjust where exactly you want the lights and all that good stuff now another thing i want to do is i don't want it to look like there's hard edges like where there's four you know sides to this like it currently has like a hard edge here so we can also use what's called an alpha map um and again that's something that you can create you know in photoshop as you wish and um by the way i wanted to show you before we get there um another thing i forgot to show you um the the displacement maps are just in my opinion very fun um let's get to get this back over here um i just to show you how cool they are let me go to create a new layer and we'll make it black so we'll fill it in with the paint bucket tool with black um let's get out of a the shape the ellipse tool here shift alt from around the center it doesn't have to be perfect and we'll get the direct selection tool to gain access to the fill we don't want to fill but we do want a color here so it's make it white we can then duplicate it so ctrl t hit alt scale that in and this is just for a quick demonstration to show you how cool and you know all the different things that you can do with your displacement maps one more time we'll take all three of those ctrl e to merge uh no don't merge them go to rasterize layers first and then go to filter um then merge them ctrl e and then go to filter blur gaussian blur actually you know what i'm going to back up real quick we'll take um yeah we'll go ahead and filter blur gaussian blur take that one just a little bit because i don't want it to have hard edges do the same thing here um blur actually just use the last one and then take this one as well filter gaussian blur and then maybe on the outer ring will come down in terms of opacity so that means it won't be as high and then we'll do the same thing here slightly and then the middle one obviously will come in so it's just going to start like this and it's going to come up let's this is just for an experiment you don't really have to follow along let's overwrite our height and look at that look how cool that is so you can really affect and there's a million ideas that you can come up with you know in order to do this i'm going to go back though to the original all right height and there we are okay so now i want to fade it out so there's also something called an alpha map which works based on black and white values once again anything black you're not going to see anything you know lighter than black then you'll start to see um so let's go ahead and we'll create another one so a new you these can be very small by the way i'm just doing it so you can see um you know 200 200 is unnecessary for this purpose um so let's paste or not paste this but let's change that to uh black um and then there's probably a bunch of ways you could do this and you can take the paint brush tool use a soft round brush something that fits you know roughly in the center let's create a new layer first and we can just uh make sure you have black or white chosen yeah just like that and maybe duplicate the layer to make it a little bit um more light in the middle so now we can save this as alpha and png8 will work for that as well and we'll come back so now we have our alpha right here and so then we can do is specify alpha map alpha now in order for this to work because right now it won't work you don't see any change is you have to specify transparent true all right so now it has this sort of cool look to it essentially um we may want to bump up the intensity of the light so we can see it just a little bit more so and and the intensity by the way is a value that you could add in dat.gui if you wish so now we can start to you know see it a little bit better all right let's see if we can adjust any of these values to really get to see it like i think y on the 10 looks pretty good so like basically maybe 0.2 10 and 4.4 so point 2 10 4.4 so we just update that and now we get kind of you know what we think looks cool now you see what's happening here there's like a little blinder effect that's occurring you saw it right there and right there um i actually hit up bruno simon of 3js journey like why is that happening and it has to do with some of the um uh it's an issue with the the alpha map that we have and certain verses being rendered before or after so the way you could fix that is by specifying depth test false it's true by default so we're going to set this to false and when you do that that issue goes away very very very cool all right so this looks really cool um now let's let's kind of put the front end developer and not 3d developer hat um on and try to make it maybe a little bit of a user interface but before we do that before we get to that i'm jumping ahead um it would be cool to have some sort of interactivity um and so you can actually bind and animate the height map value which is displacement scale to for instance the y-axis of your mouse movement so let's do that real quick and then we'll get this finished up so we're going to come down here to around our animation area and for our animation area we're going to have a event listener on our document and it's going to be on mouse move and we're going to call function called animate mouse which that doesn't make sense it should be called animate let's do animate terrain there we go so then we're going to say let mouse y we only want the y axis for this effect it's zero and then we're going to say function animate terrain pass in the event and the event will be so it will be mouse y equals event dot client y and that gets us our value when we're moving our mouse up and down you can console.log event dot client y and you'll see how it works and then inside of here we have to do plain dot material because it's on the material the displacement scale values on the material and displacement scale equals mouse y now if we just do mouse y it's going to be insane i don't think it's going to be anything you can see um look at that that in and of itself is kind of like a cool i don't know wow i didn't see this when creating it um initially but that could be like some sort of weird no that's really cool i like that oh well that could be for another effect but this isn't what we want we don't only want it to subtly affect things so we could do times point zero zero zero zero eight so now there we go so that's a lot more subdued now i don't want to start out flat like this i want it to have a little bit of height already so we can just do 0.3 plus so now it has a little bit of height probably can go for more than that and there we go it's just like you know a little trick or whatever something that the user wasn't expecting perhaps all right so now let's go ahead and put our front and developer hat on and just you know get like a little area situated where we can um have like a a title a headline and a call to action real quickly um and so how would you do that really so let's figure that out well um let's change the background first and there's you could do this within 3js or just make the background of the canvas element transparent and do it in css on the body element and that's what we're going to do so we find the renderer which is right up here and inside of the renderer we put alpha true now this it's going to screw it up it's going to be white now all right because the background of a page by default is white so we're going to go to our css and we're going to make uh the background the specific specific rgb value it's like a desaturated blue it's like my favorite colors it's dark there we go so now you can see it's a slight change how cool is that all right um then let's get back to our html here so in our html above our canvas element we're gonna have a container inside of a container we'll say take the trek i don't know it's like a terrain 3d thing so maybe this is like for biking or something lorem like 15 will do and then a button go biking whatever that's it so now you're not going to be able to see that uh it's actually up here so what we'll do is reference our container this will be position absolute we'll do top zero left zero z index one make sure it's on top because the web webgl by fault is position fixed um and then color white margin um i should change this i'm gonna end up changing these values um i i had initially just 16m by like 8m of course this is not responsive at all and it would be pretty easy to make this responsive um but for now i'm just going to leave that there we'll be font size for ram font size oh nope i'm going ahead of myself uh our paragraph is gonna have a font size of 1.3 ram units but with the 55 colors gonna be rgb 107 107 122. now for the button you don't care to see me typing all this stuff out i'm just going to paste this it's just a simple button nothing's exciting is happening here i'll put i try to put the re remember to put the reference code up here so you just paste it if you want to follow along um so now if we do that here it is i think this is too much in the in the center though so i want to push it over here to the right we could do that by moving the model over or the mesh over within 3js but i found when i push it on the um the x-axis over to the right it screwed up the rotation so a quick way to do this just in this simple context if we didn't need a full screen canvas it's just to do this so we can come over here to our script um for our sizes of our width inner window inner width which is what's kind of um just scaling it all the way out to the width we can just time this or multiply this by 0.7 do this here as well in the resize event so 0.7 now we're going to have the opposite effect of what we want it's going to push it over here but then we just go to style we go to our webgl which is our canvas element and we can put in right zero and there we go look at that very very very cool now of course this is not very responsive i'll leave that guys you know up to you guys if you want to try to tackle that um but yeah very very cool all right hopefully you enjoyed that you learned something new if you did make sure to subscribe leave a comment and a like and i'll see you soon goodbye [Music] you