I’m quite new to three.js and to 3D in general, so I might be in over my head here.
I’ve generated a patch of terrain using plane and simplex noise, and would like to generate new terrain as a player moves across it.
What would be the best way to approach this? I was thinking I might be able to manipulate the vertices of the geometry, similar to the effect in this video, but I’m not sure how? Or would it be better to split it into chunks and add new chunks on movement? Or to generate a large geometry and somehow control how much of it is rendered?
I’ve also added randomly generated objects to the terrain, such as trees and plants. How would I continuously add them to the generated terrain in the example above?
It’s some sort of showcase that demonstrates the basic structure of an endless runner. If you have a look at the source code, you will encounter a run() function which responsible for the animation of the camera and particles but also for respawning objects in the virtual world. The ground actually consists of two separate objects which are changed at certain conditions. You might want to use a similar approach in your application.
This approach is definitely faster than manipulating vertices per frame. The problem is that your chunks have to match at the seams. Unlike in the forest demo, your terrain is not flat which makes this a bit more complicated. In general, you can achieve this by generating the entire terrain geometry and divide it into multiple sections. This can be done at application start or in advance with a tool. You can then render only the current section and the adjacent ones. A section would be represented in three.js as a separate mesh with its own geometry. If you want to speed up things a bit, you can try to use a single mesh by merging the current geometry data via BufferGeometryUtils.mergeBufferGeometries(). Or you give instanced rendering a try.
It depends on your particular use case if this approach is sufficient or if you need something smarter.
An advanced terrain rendering algorithm was presented by Florian Bösch in the book WebGL Insights. The related chapter is Terrain Geometry - LOD Adapting Concentric Rings. He presented a LOD technique which is very useful in context of terrain rendering since you want to show more details at the players position and less details at distant places. Maybe you can use some of his thoughts for your own application.
Position of a vertex could be converted from local to world (at the side of javascript or in shaders, depends on needs) and that value can be used in the noise algorithm.
I was thinking about that approach recently and plan to create a concept. We’ll see if it works at all
Before you create something by yourself, I suggest to study the related work. This area is actually very well researched and in most cases you can use something existing.
Yeah, it makes more fun but it’s also more time consuming. Consider a project with a limited amount of budget. In this context, you want to build your stuff based on components that are robust, reliable and performant. If a project would develop everything from scratch, it would never release its related product in time. Besides, a lot of development teams do not have the skill to develop let’s say a rendering or physics engine by themselves.
three.js is a ready-to-use 3D engine. You are using three.js, right?
Totally agree, i made Tesseract in my freetime and it took me about 2 years. Of course it isn’t just a basic solution, but if you want to make it serious itw will take more effort than time available, there is a lot prototyping, especially if your main product is something else and it’s just part of it, then out of box will be more reasonable.
