Why is it when we generate high quality terrain with threejs it take too much toll on the cpu on webgl, can we make high quality and high detailed mountainous terrain with threejs like this webgl mountains propject?
Yes, that is possible without lagging. But it is common to use a LOD geometry instead of a geometry that has maximum resolution everywhere. Having the same vertex density 10 km away as in the immediate vicinity is a waste of resources.
An massive mountainous terrain or metaverse like would provide a great place for virtual life where the inhabitants is separated by large mountainous barriers for players to climb and explore a massive land that is actually endless for providing virtual properties in the coming years.
The problem with large area environment is the texture it get to pixelated on close up.
I made this a while ago:
w or s to raise/lower balloon. e to get out and walk around.
wind direction changes based on distance to ground.
I went back on the threejs + cannonjs engine and update it to r177 and I am surprised that its now even faster, before it could not drive normally but the new update is even faster and feel lighter, I am beginning to imagine to like to make new open world cities on my free time.
I went to survey the Crateria terrain to plan for development, it’ll be cool to have roads and communities of players, that can come and explore this place, tour around and just chill out.
Resources:
City Assets
I missed this, It is really fun!!
Managed to land in a different island and walk. I really like the idea of height-based wind direction ![]()
Thank youuu!! It was a weird idea I couldn’t get out of my head. The terrain is all generated on the gpu, but I had problems with terrain reproducibility on different GPUs, so got bored with it. but there were some POIs and things you could find.. I kinda liked the terrain generation approach though.. very low overhead, but a bit clunky to interact with.
I would lookup Blender GIS. With that, you can use NASA SRTM data at a 30 meter resolution to displace the mountains properly. I am not sure if you can directly access SRTM data from within THREE, however, you might be able to using some javascript, and displace the mesh during runtime. You can also get a api key from MYOPENTOPO. Since the blender plugin is almost certainly using their API or similar for the SRTM data, you could do the same with your key and have a major portion of this done. After, you can user color deltas in the image to refine the pooints between the 30 meter points provided by SRTM data…
Level of detail has to be implemented, I wish it were already a part of the library, however, it is something that must be done manually.
We are implementing LOD using the threejs mesh simplifier as discussed in topic virtually geometry where we crunched down meshes to its simple poly proportional to the distance from the camera, this is how we are able to load large scale assets in threejs. It is part of threejs samples mesh simplifier is a very useful feature combine with mipmapping as demonstrated in this image:
The method using the mesh simplifier is pretty straightforward where you just reduce the mesh vertices then reapply back the texture, unlike LOD where you have 3 to 5 different mesh that adds to the gltf file size, simplifier only have the original mesh.


