Advertisement

How to handle Quadtree cracks in WebGL / Threejs?

Started by May 30, 2022 02:02 PM
2 comments, last by myers.m007@gmail.com 2 years, 6 months ago

I'm creating a basic terrain simulation using chunk base LOD quadtree in threejs. I'm running into the issue of seams due to higher and lower resolution. Does anyone know of implantation in Threejs or WebGL to stitch my chunks together. At this point, even a skirt implementation would do.

It's been solved since the mid-90s, with improvements around about 2002. After that people moved to GPU techniques. Rendering large terrains on the GeForce 3 was one of Nvidia's big demos of the era, which among other things pulled the rug out of the research work I was doing at the time.

Since you're doing quadtree terrain, this paper explains a great method in technical terms, or if you've decided to break the quadtree form, use this one if you are using an irregular mesh, by some folks I studied with back in grad school, also this paper, and plenty of research contemporaries. There's also a bunch of research selecting which tiles to replace based on visual error, prioritized by squared visual error on the horizon lines.

In simple form: You split the grid in a way that avoids T-junctions on the tile's borders. In order to keep the transition smooth you can morph between LOD resolutions. When splitting, start with the split mesh at the same shape as the original, and morph it to the target shape, or if you're removing a LOD step, morph the tiles back down to the lower layer's position then replace with the parent tile.

I'm still pained when I look at Google Earth and other programs where they had the budget to know better, but suffer from the problems that were solved nearly 30 years ago.

Advertisement

@frob hmm, ill take a look. right now I think I'm making progress by doing LERP on the neighboring chunks that are not the same resolution

This topic is closed to new replies.

Advertisement