3D Mesh Generation, Gaps, and Stitching (3D World Generation #10)
Вставка
- Опубліковано 4 кві 2021
- Support me on:
Patreon: / simondevyt
Follow me on:
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
Fixing the gaps, slivers, and lighting discontinuities in our 3d terrain meshes.
In this project, we're looking at fixing the gaps and lighting discontinuities between different levels of detail. This is a natural problem that arises when placing 3d meshes of different resolutions side by side. Since we use generate different levels of detail using a quadtree, each chunk is a separate renderable which leads to natural problems when they're placed side by side.
This is a continuation of our series on 3d world generation and procedural terrain, which started with height maps and basic 3d worlds. In the last video in the series, we tackled using logarithmic depth buffers to fix planetary scale problems with the dept buffer, as well as tackling issues with precision in the fragment shaders.
This is all Three.js/WebGL/JavaScript, but should be easy enough to port to Unity or Godot or whatever your working environment is.
Full playlist for 3D World Generation: • 3D World Generation (J...
Various resources:
Intro Music: www.bensound.com
Misc:
stackoverflow.com/questions/4...
en.wikipedia.org/wiki/Finite_... - Наука та технологія
This series is really great. Web devs need more game dev in their life. Follow your whimsy, my man.
MIGHTY LORD SIMON, BLESS ME WITH THIS KNOWLEDGE
BBABABABbbbLESSSSS!!!!
Thanks Simon for Such Tutorials
It really helps , on UA-cam no one teaches this Stuff.
Thanks again❤️😃
I had the same problem with finding neighboring areas, nicely done!
After this Tutorial series, I will be glad if the full series of space game come😍😍.Thank You
Another ultra-cheap method that I used in a project of mine was just to vertically lower the more distant, low-poly chunks. The gap is still very much there, only now the higher-resolution chunk obscures it. This only works with heightmap-style terrain though, and requires a bit of tweaking to get the effect right. You also have to lower the terrain more and more at each new level of detail. A similar technique would be to incline/rotate the terrain toward the camera just a hair, and this rotation doesn't need to be modified at the different LODs, only the first. Obviously messing with the physical location of the entire terrain chunk invites other issues like the visibility of things placed on the terrain and snapping between different LODs, but you only need a very shallow angle for this technique, so in theory it should be hard to notice. Not that I've actually tested it lmao.
Interesting, hadn't thought of that.
While I don't understand half of the mathematics or terminology it's really enlightening to follow along. Amazing stuff you're creating using JavaScript. While watching I kept thinking how one could ever reach such high levels of knowledge. For me personally it's just a sweet reminder that no matter how senior a developer you get - there is always more knowledge to obtain. Love the series Simon.
Pretty much, there's a never ending list of things to learn heh.
Holy shit, you're way to smart. I have a degree in CSET and watching your videos makes me feel like I know nothing.
best series on youtube by far
Your video's on procedural terrain are the best!
Things look easy when you explain. Incredible. Thanks for the content
You my good sir are what I like to call, a beast. Continuing to blow my mind with genius solutions every episode - I love it!
So amazing to see you think through problems... You're so kind to share this! Thank you!
Quality content. Videos like this make UA-cam 10 times more useful.
Yoo, this is such great content! I love the pace of your videos, it's more like a really concise university lecture instead of a "take-me-by-the-hand" youtube video! Great stuff :)
Dude this series is awesome! My main language is JavaScript and this really inspires me!
Amazing video I didnt know how to solve this problem and you explained it so easy, you are the best!
Loving this series, please keep going on this world generation topic! Would be interested to see how you tackle adding water with realistic waves or perhaps physics applied to a planet of this scale
Hi Simon. I started working on an engine using flat terrain a couple weeks ago after watching most of your videos and just the other day concluded with these problems. After I saw this video today I thought I should share my approach in case it helps anyone. I built a quadtree but I really struggled with the surgery because when you move a vertex, it's not as simple as just moving that one vertex on an edge to fix a seam, if it is also a corner to other smaller children. So you need to then find the edges this adjustment affected, and this can chain through the tree.
After some time I decided to drop the quadtree and use a grid of about 20x20 equal terrain patches. This really simplified stitching. I then tried to set normals on all edges by calculating from the actual mesh vertices. This required a multi step process: (a) stitch vertex heights so there's no seams (b) calculate normals for just the corners (c) update normals for all inner vertices that are shared along an edge (d) finally interpolate normals for vertices not shared. I'm generating patches using 2-3 worker threads that pull from a queue that is sorted by distance to the camera.
It's super satisfying to fly around the world at high speed and see terrain loading dynamically without any stuttering.
My next challenge is realistic terrain. It's one thing to have noise but another to produce terrain with appropriately sized areas of flat, hills, and mountains that have believable scale and detail. Instead of just progressively increasing frequency I'm dedicating each simplex call to a specific purpose: one for continents / ocean regions, then a few layers of hills and mountains, one for rivers. I've written some helper functions based on a sine curve to for example smoothly isolate the point where the noise crosses zero which can be then used to pull down the terrain to form a river or a road. Even still, with 8 or 9 simplex steps per vertex it's getting slower and still the result is pretty repetitive. I haven't seen many resources dedicated to the application of noise and it would be really helpful if maybe you could explain how you applied these concepts to games you've worked on.
Thanks for keeping the series going, you're doing great work with these videos.
That is what I did when I had my procedural terrain. There is a significant drawback that will eventually force you to use quad tree. You cannot double the distance without doubling the cost. If you have 4x4 grid and go to 8x8 grid, you are rendering 64 chunks instead of 16.
If you are using quad tree, you are rendering 2x2 big chunks (4) but one of these is subdivided into a more detailed 2x2 (4-1+2x2 =7) and one of these is subdivided more ( 10 chunks) and one of these is subdivided more = 13 chunks in total. You can have the details of 8x8 grid, while using only 13 draw calls/meshes.
@@GonziHere True, but consider having a 40x40 grid with 5km view distance. Terrain chunks are 256x256m and a list of 1600 chunks is manageable. LOD 2^7 on the nearest 9 chunks gives you 256 to 512m of high detail. It depends on how much you need detail to fall off near the player and how you handle LOD transitions. You might need smaller chunks. What I learned from this exercise was that whether you need a quadtree or not depends on whether you can get away with big terrain chunks near the player.
I also considered using a higher res inner grid near the player and an outer grid further away.
Simon you are awesome . I like your teaching. Very attractive and easy to understand.👏👍
You make this look so easy
Amazing fixing up those graphical issues. I probably would have been content with the glitchy bits so it's great to see you commit.
Alright, Simon, you flexed on me. Going to have to watch this one a few times to grasp everything.
The mvp of great content
this man is a wizard
Thank you for the wonderful videos
Thanks for sharing the code on Github, wish more devs would do that so that people can learn from their code
This is exactly what I have been struggling with in the past few weeks for a project I am working on. I had stitched tile edges together but still had normals giving a strange edge. Your video gave me new inspiration on how to solve that issue. Thanks Simon! Keep up the work 👌
Awesome, lemme know if you use this, would love to see it in action.
@@simondev758 Will do!
Just found your channel, its great!
This is gold!!
Fascinating stuff! I’d wonder how far you could get with a skirt at like 30 or 45 degrees, instead of the cliff-esque 90 ones
Great stuff
It would be really great if you could talk about working with vertices and common math. Your videos inspired me to take a stab at some Threejs but where I struggle is how to work with quaternions, when to normalize getting the angles of normals and applying those to other objects etc. I think as someone who jumped in without knowing any 3D coding, I find myself spending a lot of time building helpers and test projects to understand what I am seeing before I can ask myself how to fix the problem (likely a good thing as its learning). With all that said I am actually surprised that I have been able to get 3D terrain working with buildings and some collision detection so you can drive around, but I am obsessing over making the collision detection a lot better before continuing ha
I'll see what I can do, but you're on the right track. Hitting all the frustrating/wrong ways of doing things is helpful, pretty much how I learned.
can u make a video on how to make a 2d procedurally generated map like the one in "oxygen not included" or "dont'starve together" in unity?
Simon, I'm pretty new to your channel but I'm loving your content! It's really well presented and explained and I'm grateful to you for expanding my knowledge of JS and JS game dev. I do have to ask you though....are you the guy that does the voiceover for ""Bob" from "Bobs Burgers"? 😁
Hah no
If you did use the direct calculation of the noise function's normal, you could get some extra lighting effectiveness by using it as a normal map, perhaps?
Do destructible terrain next
what i did was to close gaps is
i stored the vertex index offset of every children before creating them so i know where every child starts.
and i made them return if they created triangles or splited.
then after 4 children are generated
one by one i check if they got splitted. if they did i checked their neighbour siblings, if their siblings didn't get splited we close the gap on that side.
for outer neighbours i simply calculated the position of the neighbours using current quad's center, applied noise and stuff to it and checked if a quad there would split or not.
so uhh i just calculated everything on the fly without map and stuff
good thing is it works between faces too.
might be slower because i call noise function more. didn't measure it tho but it was fast.
Hi ! Amazing video as usual, very instructive. I was wondering how you would go to add some instanced grass / trees on the terrain ? On a flat plane it's easy but adding some noise and making a sphere instead makes it harder to find out where to positionate things. Thanks !
You can get height by sampling the noise function, so it shouldn't be much harder than a flat plane.
@@simondev758 Thanks for the answer. Do you plan to release a video about that kind of stuff ? Like rendering grass with instanced rendering when the camera is close enough etc. ? Thanks!
I've been trying to do something similar, and run into annoying problems (they annoyed me at least). The problem is Nyquist, and that the mesh is effectively a sampling of a signal with a frequency component too high. Transitioning the materials to capture the higher frequency features is something I haven't managed to get working in at all well in general. Objects in the distance don't look like the detail is smudged and too small to make out, it looks like they are flat and that the detail has disappeared.
Possibly it is something I just don't know, and that there is a way to correctly map a Fourier transform to a PBR material, but I just cannot get it looking right.
One thing I did consider trying to do was to try to generate the mesh based on making it roughly regular and even sized in screen space. The tris would be long and thin along the ground radially out from the player. This avoids any welding, discontinuity, or boundary issues, at the cost of introducing a whole heap of complexity on the mesh building side. One problem was that hillsides would have stretched tris on them and it might screw up the silhouette, but now that I think about it, I guess I could just march outwards a distance based on the normal of the previous vertex if I did it as a compute rather than a shader. As long as I filter the highest frequency displacements first (by just not adding those octaves), it should hit the peak pretty accurately... Guess that's my weekend booked!
I love this series! I have one question though: there are 2 private videos in the 3D World Generation playlist. Are they some future, not yet listed videos?
2 previous versions of this video I uploaded with various problems heh. I already deleted them, surprised they're still showing up in the playlist.
A third option (maybe more complex) - somewhere between the first solution and the second - construct a polygon to fill the gap by looking for nearby open vertices? As the camera moves closer to the edge of a map chunk, the "seam" polygon is not drawn. Can't say how to implement it though.
Didn't think of that, yeah sounds tough to implement. If you try it, lemme know how it turns out!
great heccin video! I wish I could get into that mind space of being able to optimize and get my mind to work with a 3d space applying these formulas as tools to creating these amazing worlds. I find it difficult to learn how to apply or simulate these equations to be able to get a 3d space work with me. I strongly struggle like I was trying to do Lorenzo attractor simulation but I couldn't figure out how to break up those differiencal equations into code and apply it in that space. its amazing how u can visualize the data infront of you on a multidimensional scale.
do you have any resources that can help me with the problem I am facing with that mindset or do I just learn it off of experience?
I don't have any good advice other than it takes time.
Maybe you should read the book Math for Programmers by Paul Orland, He implements a lot of mathematics from scratch in python
Skirts?! :D nice! Had no clue such a technique is being practiced, I've been stiching my whole life and surprisingly I either have'nt noticed or never ran into lightning issues :O but either way this video was a great insight!
The lighting issues are hard to see, you could probably get away with not fixing them. But I knew they were there and it was bothering me heh.
I've seen another world generator tutorial where, to remove the seams, they removed the outermost strip of polys from the two adjoining quads and then connected them together. That's probably even more work but makes for really nice seams.
But, having watched your video, I don't think it needed anything more than the basic fill-in. What you could see of the seams was very little to begin with, so once you filled them in with *something*, I feel that was enough. You'd have to pay really close attention to see them at that point. Especially if atmospheric hazing is added in.
That feels like it would work, but at the same time, if you have corners where multiple resolutions end up touching, I feel like you'd be back in the same boat. Albeit with smaller problems to fix. And yeah, complexity wise, no idea how to implement that nicely heh.
I can't see this in your end result (great!) but I was worried that your solution of creating T-junctions might result in "sparkles" as the triangles of differing edge lengths are rasterized next to one another. Perhaps the fact that the subdivision is a power of two prevents this?
It might! I didn't see any problems when I tested, but let me know if you do.
The point in LOD is keep the low resolution far from the camera. How can someone see those details-issues that you fix? By the way, I like it!
Just a guess. I suppose it depends on how fast the level of detail changes. The errors become obvious when lowering settings for slower machines. So maybe the trade off to blend the LODs is much faster than just pushing the LOD further out?
They're hard to see, but not impossible. These are the kind of issues I'd have to fix all the time on production games. From ground view, hard to see them, but go up on a cliff, or high in the air, and you'll start to notice them.
Is there a way to render diamond in a convincing manner?
A problem with the surgery idea is that it depends on manipulating the meshes at runtime. So... what if you DIDN'T have to do that? Can we assume that neighboring cells won't ever differ by more than one LOD? I wonder if it would work efficiently to constructing edge meshes for transitioning (or not) between LODs, so you draw the cell and two edge meshes based on whether or not you know that there's an LOD transition happening. (You only need two because e.g. the cell to the north / west will handle transitioning into the current cell, so the current cell only needs to transition into the cell to the south / east.)
Like a fancy skirt?
@@simondev758 Yeah, you could look at it that way, I suppose. I mostly work in 2D but I know my way around building meshes so maybe I'll try it.
Simon, will you be able to recreate the recently died game? Kings and Legends
I'm trying to lear some code...
[Some about me - you can Ignore it]
I have been making some simple projects on Arduino, some simple CLI exercises in C++, some web making involving simple JS and PHP, and of course Python because everyone recommend it for beginners (actually I started from Arduino and C++, and I really liked C++, but JS is also really good, because it's really intuitive?).
And I have spent some time on learning all of it...
I'm pretty slow in typing and in "thinking", so it takes a while...
[End of about me]
When I watch your videos I'm extremely confused ._.
It's too genius for my small brain.
Also you have voice that even matches with that all genius things you explain (sadly I don't get half of them).
I wish I will somehow learn to code better and maybe find some people that I can write with.
Maybe it's too hard for me .-.
Normally I don't make any comments on anything, but I wanted to write something. Maybe someone will see me?
If someone made it to the end - thank you!
Have a great day ;)
Good luck, and don't worry about getting things on the first try! Just be determined to understand things eventually.
Hey Simon can you make a fullcourse of three.Js
Sure
Generating a texture for the normal map is probably the only thing that would improve it further?
Oh I just disabled all the normal/diffuse maps to illustrate the problem further. Look at other videos in the series for the normal maps.
No Man's Sky just makes the chunks 2 vertices larger in each direction to fix the gap problem.
Hence if you move around too fast on a planet you might find a place where one part of the terrain is on top of another
Interesting, how do you know this? Did they have a tech talk?
@SimonDev They spoke about it on gdc 3 years ago in either "Continous world generation in No Mans Sky" or in "Building worlds in No Mans Sky using math(s)"
@@marcasrealaccount Awesome, I'll go watch that. Thanks!
please write a SSR shader. or any cheap reflection shader.
May not a very interesting topic but i am out of ideas:
I tried to highlight single triangles in different ways, but faced a huge lack of performance, my browser is melting down. Do you have an idea how to implement single triangles highlighting in wireframe mode?
What do you mean? Like have a mesh (or meshes) and highlight individual triangles on them with the mouse?
@@simondev758 ohh sorry, yeah it’s meant to be highlighted within mouseover.
Could you make a course or tutorial about game development in Js or how to be like you in game development
Like more in depth, or fundamentals, or what?
@@simondev758 fundamentals pleas.
oh hey!
Nice! I did notice a gap appear around this timestamp: ua-cam.com/video/sXFxfqGPR-c/v-deo.html
It just popped in for a single frame - do you maybe have some async stuff going on, where the edge-vertex fix doesn't get applied on the same frame as the LOD change?
Aw man, now I see it. I swap the chunks out, but I thought I did it the same frame as I hid the old one. Maybe the timing isn't perfect.
Have you ever thought about procedure generation in multiplayer mode? I have broken my brain.
How does the no man sky works?
Procedure generated world but two people see the same place in the same condition.
Could you please explain that?
P.S. sorry for my english)
The random number generation is reproducible, given the same seed.
what if you didnt just use the low res as reference for the border, but for the entire mesh of the same detail and linearly interpolate from high to low res. this way there would be absolutely no visible seams what so ever. you'd simply habe to compute normal and position twice for every resolution and get the distance to the detail change border
Hmm having trouble following that, maybe you can draw a picture or something?
Hello sir,
I'm a new coder and doesn't know much about coding can you make a video on how to add a pre-created
Model to the JavaScript. If it is possible to do please make a video on it it will help me a lot , and probably help a bunch of more new coder...
Warm Thanks.....
There's a bunch of beginner ones on my channel, just watch the model loading one.
I think you totally knocked it out of the planet! And went into more detail than Sebastian Lague's series on the topic.
If you're looking for more inspiration on what to look into next, I can highly recommend Leah's ET-Engine project.
leah-lindner.com/blog/et_engine/
Oh sweet, I'll check it out, thanks!
Are you Madseasonshow’s brother/uncle/dad?
MadSeasonShow?
I found your channel through a comment saying your worked at google, could I bother you with some questions in your pm/linkedin/whatever you prefer? :)
Sure, grab me on Twitter
@@simondev758 Thank you!
I did this a bit differently. On the CPU my mess is just one giant quad-tree. I'm subdividing triangles since I start with an icosahedron, but you could do the same thing with squares. My triangles also have shared edges so it's super easy to detect when I splitting an edge from one chunk to the next. Also chunks vary in size. They are just pointers into the quad-tree. I only actually make them separate meshes when I go to the GPU and and that point each chunk is two meshes. A center mesh and a border mesh. That way if I change an adjacent mesh I only have to send down the border part of the mesh I'm on and not the whole thing. I used it below. Sorry my video is so crappy.
ua-cam.com/video/oRO1IGcWIwg/v-deo.html
I do something similar with voxel planets (marching prisms) but it's quit a bit more complex as it uses shared voxel walls and octrees and so forth.
Video
Looks like kerbal space program planets
,
Cctv
5th comment