3D World Generation: Heightmap Tutorial

[@simondev758]

Thanks for watching! Remember to hit like & subscribe! Any requests for followups?

[@coloradoboy1014]

Show us how to make a water simulation…

[@S.I.L.E.N.C.E33]

I have viewed all of your videos. on this topic, but I am respectfully requesting your assistance with implementing this in Unity 3D. I have been attempting to do so for the past two years without success. Please, I am in dire need of your help

[@zahell]

"This does an incredible job of making a simple idea into an unapproachably complex one." - best quote ever

[@simondev758]

😀

[@blackcitadel37]

The programmer's finest skill

[@shadow.7842]

@@blackcitadel37 procrastination.

[@kanpekiken2481]

I was trying to do this today after finally getting my character and his 3D camera setup. Got all his movements down. Decoupled everything. “Time for the easy terrain generation” spent hours on it. Finally decided to go back to my roots and watch this video lol.

[@kanpekiken2481]

Hi Simon. I don’t know if you covered this in a previous video but I was having trouble getting my player object to be on top of the terrain while it moved. Right now the terrain is affected by the normal map values but then the player object just clips through it instead of staying on top of the terrain. I believe this is because the Y position to be affected by the height values on the terrain depending on the X and Z coordinates but I was having trouble getting it to work accurately. My object was going up and down all randomly.

[@blackcitadel37]

This is the motivation I needed to return to the programming world. Awesome series.

[@wittgensteinaficionados4253]

Your tutorials really balance brevity, comprehensiveness & concepts masterfully. This is the first of your tutorials that I'm following to code something similar myself, and I feel like I'm progressing much faster than usual. Appreciate your effort man!

[@simondev758]

That's awesome!

[@j.c.murillo]

Excellent work. It has been a blast finding this tutorial.

[@yoctometric]

Really high production value on this one. Excited for the rest of the series!

[@simondev758]

Thanks, is there anything in particular you'd like to see in future ones?

[@yoctometric]

@@simondev758 This might be way out of scope, but it would be interesting to see how to handle overhangs / caves

[@simondev758]

@@yoctometric That could be really interesting. A cursory search and it sounds like this is a difficult problem for heightmap based generation algorithms. I'll look into it more and get it on the roadmap for this.

[@animationspace8550]

@@simondev758 How would you handle digging on the planet? Would this only rely on voxels? How do you modify this system to allow such or what new system would I have to create?

[@radosawczuj1054]

this series is the thing i was looking for

[@webghoul]

I was really looking forward to this series thanks a lot simon

[@Kobraisten]

beautiful, and all this in js, can't wait to watch it all! congrats man, ppl like you make youtube worthwhile despite all the trash content it has

[@simpleprogramming4671]

Holy moly. what is this channel? amaaaaaaaaaaaaaaaaazing I haven't seen a channel like this. :o

[@simondev758]

:D Glad you're enjoying it! Got anything you want to see in the future?

[@KerishaStewart]

Thanks much for the great content! Can you do a video showing how to apply the bilinear filtering to blend the heightmap to the size of the plane and apply this to the plane to give the terrain effect? I'm looking at the code and having a hard time understanding what's going on. I understand the concept but not getting through with the implementation.

[@simondev758]

Watch my video on Lerp to understand bilinear filtering: kzbin.info/www/bejne/j3ulYoSketKfitU

[@ralfderijcke]

Thank you for explaining my/the resolution difference issue 😊

[@simondev758]

Happy to help!

[@bigmistqke]

My new favorite tv show

[@trevorsmith3283]

Hey! Awesome videos! I'm pretty new to Threejs so this is pretty advanced for me haha, but out of curiosity what is the "math.sat" function at 4:22?

[@simondev758]

Just a function I'm used to using in shaders. It just clamps to the range [0, 1] Here's the actual code: github.com/simondevyoutube/Quick_3D_RPG/blob/main/src/math.js#L34 It's a recreation of the HLSL shader function, docs.microsoft.com/en-us/windows/win32/direct3dhlsl/dx-graphics-hlsl-saturate

[@trevorsmith3283]

@@simondev758 Thank you! :)

[@noxen_studios3566]

I just felt on your tutorials here. Building a galaxy? Use procedural generation and lod. With ThreeJs. Insane! Exactly what I was looking for! I hope it will continue to a very long-term extent. You're my master now. ps: to manage multiple planetary bodies, why not include one of these bodies in an octree? Means the universe is composed by quadtree planetary bodies, which are themselves included in an octree. Just a thought. Anyway, big thanks for this Simon!

[@simondev758]

Definitely doing a universe at some point :)

[@noxen_studios3566]

@@simondev758 I'm a beginner in ThreeJs (not in Js itself I'm using day to day for web dev). I'm also a big git user. Could be good for remove some beginner questions appearing time to time by using git branching and shows the code at the begining of a video and the result at the end. Could provide help if needed. It will help many to grasp all the logic.

[@bekalutilahun9398]

Hi Simon....I was trying to create a 3D terrain on a shape...I converted an svg of a country's map to (x, y) coordinates and created a shape of the country with it. I used ShapeGeometry to do so and I don't know how to apply a height mat on it. Is it possible and if so, how can i do it?

[@Hamptertin]

Is this usable for unreal engine I want to create a game and one of my developer friends says unreal engine is my best bet, this code is just what I was looking for, but I can't seem to find any way to implement this, either do you know how to get this into unreal or is there another engine I could use like the one used in the video

[@samrun0]

You're awesome!

[@smyrkphace]

Is there a way to use the height map output with cannon.js physics as a collider?

[@ChrisTharpArt]

Looks great man. Make a no man's sky. Playing that now.

[@simondev758]

I love the idea of a fully explorable universe. How are you finding the game?

[@ChrisTharpArt]

@@simondev758 it's my favorite. Not perfect but just an amazing experience.

[@noxen_studios3566]

@@ChrisTharpArt Could add plenty of games on this topic, Star Citizen mostly, Elite Dangerous, Dual Universe (octrees and voxels), plenty others

[@pist5343]

Got here from MrDoob's recommendation :D

[@simondev758]

Oh wow, very cool! Did he mention this somewhere?

[@pist5343]

@@simondev758 Yeah, on the official Three.js discourse

[@Chevifier]

What is the Math.sat(v) function exactly? Im following along and I dont see a sat function in GD script

[@simondev758]

Saturate is just a clamp to [0, 1], super common to see it in shader code.

[@GarronArgentina]

I just realize that working with vertexshaders to make terrains is a bad approach because it just create an image but the vertex still at the same original position. Tha is way you use external javascript librearies to generate noises.

[@simondev758]

I don't follow

[@GarronArgentina]

​ @SimonDev I mean that if I use shaders to make a terrain the raycast detect the plane as a plane instead of a terrain. It looks like terrain but the collision behave as a plane mesh. JavaScript vertices are still in the same place.

[@baliyachtservices7505]

Nice!

[@michelleokolie6470]

why did you divide the distanceFromCenter by 250? Also Whenever I implement this, I get a raised bump but straight through the middle instead of just in the center. Any help? Thanks!

[@simondev758]

It's been a couple years since I made this vid, so I don't have much memory of what I was doing here. Is it the part around 4:30'ish? If so, I was just demonstrating how to build a bump that was centered in one of the terrain chunks, which are 500 m wide. So the max radius from the center is 250, so divide by 250.

[@michelleokolie6470]

@@simondev758 Thank you so much, I've been following this tutorial and converting everything to the new threejs has been a journey. Thanks so much once again!

[@simondev758]

@@michelleokolie6470 Good luck!

[@supaera2568]

Amazing channel! Can you give anymore idea about how you initially implemented the plain?

[@simondev758]

It's just part of Three.js

[@kirayt249]

can i do that on unity c#? and how ?

[@cedericprivat]

Can you make a video on how to even get a 3D world to render with javascript? Do you use any libraries and if yes, which ones? :)

[@simondev758]

Hmm, I'd be glad to make any tutorial that'd help people out. A little unclear what you're asking for here, do you mean how to get an entire planet rendering?

[@cedericprivat]

SimonDev I mean like getting 3D objects to render in the browser. I don‘t even know how to render a rectangle in javascript 🙈

[@simondev758]

@@cedericprivat So I used a library, Three.js, to handle webgl, there's a bunch of super short examples on their website that will get you started: threejs.org/examples/ Here's a really basic one to just get a cube on the screen: threejs.org/examples/#webgl_geometry_cube Here's the source code: github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_cube.html Now three.js is a wrapper over webgl, did you want to learn webgl directly?

[@cedericprivat]

SimonDev First of all, thanks! And yeah, a tutorial on webGL would be awesome! 😊

[@victorisrael6191]

AWESOME😫

[@Classical4Piano]

100% like ratio is amazing for a yt video with 1.9k views!

[@simondev758]

ty

[@vinaygodara2549]

will you please convert your project to unity

[@simondev758]

It's on my TODO list, work is slow though since I only spend a bit of time on these tutorials. House isn't going to renovate itself.

[@erich_l4644]

@@simondev758 It's almost October. Did the house renovate itself?

[@noxen_studios3566]

@@simondev758 I would chose Unreal IMO. Especially incoming version 5 which gives incredible capabilities. Did you see the demo? Lot more procedural related games have been achieved with Unreal. But that's just my opinion ^^

[@simondev758]

@@noxen_studios3566 Yeah I might fiddle around with Unreal at some point. The point of these is just to explore and play around with ideas, not to try to make the most awesome thing ever, so JS and WebGL are just fine for the most part.

[@noxen_studios3566]

@@simondev758 I agree. Putting our hands in code that is more close to how the machine is thinking and treating hardware permit to embrace more the meaning of what we are trying to achieve, and permit to understand more the key-concepts. Big up for Three.Js that definitely have huge potential. Pretty happy to see someone dealing with lod and procedural using a webgl framework. That is just great

[@TheBuny1p]

Nice video. How are you compositing the two windows (the source code and the 3D scene)? And is it live-updating as you change the code or is that just some fancy video editing?

[@simondev758]

Man, I swear I answered this a while back but the comment seems to be gone and this is popping up again in my "haven't responded" section again. Comment seems to have disappeared into /dev/null, sorry about that. Just an attempt at fancy editing, record myself typing some code in the editor. Make an alpha'd box in Gimp the same colour as the editor background, crop the code video and position them together over the recording of the 3d scene.

[@TheBuny1p]

@@simondev758 yep, I got a notification about that reply too, then couldn't see it in the comments.

[@VoidloniXaarii]

Thank you!

[@miguelmyers9546]

the code you have here vs github is nothing a like I cant even follow along

[@simondev758]

github.com/simondevyoutube/ProceduralTerrain_Part1 Is this what you're looking at? There are very few differences between what was presented in the video, and the version uploaded, although there is extra code that initializes, and does other things. This channel, as a general rule of thumb when watching one of the videos, presents the concept, and only the code relating to implementing that concept.

[@miguelmyers9546]

@@simondev758 got it thanks

[@tathagatnegi5923]

Tysm❤️

[@kingdan6046]

below