Instanced Rendering of height map applied terrain mesh/geometry

Hi there,

Help Please !!!

I am making terrain from the heightmap data that i have in json file. I now have a chunk of mesh which add up to make a complete terrain but since multiple chunk make multiple draw call which i believe is expensive and making my system very slow.


This is my terrain after i apply the heightmap and is of size 4104x1856 madeup from chunk of size (256, 256)

I checked the documentation and example of instanced rendering in three.js but all ask for same geometry but in my case i have deformed the y value of each vertex according to the heightmap data from elevation json file.

I believe that i can make it perform better with instanced rendering but i dont know how can i implement that with each geometry in the chunk have altered y value.

Moreover, is there anything more you can suggest?

I am learning a lot from this group and i believe that i can get more insight from here.

Thank you everyone for being here and helping people like me !!

You could try to make the whole map using one chunk or merge chunks’ geometry into one.

Hi thank you for replying, I am making small chunk so that i can have frustum culling and apply LOD in each chunk. I dont know how wise it is to think of doing LOD in each chunk. My main aim for chunk is to apply frustum culling. What do you think?

It depends on how you create chunks. You could decide which chunks to include into the map based on their distance from the camera, then create chunks with different LODs and then merge them into one geometry to make one draw call?


This is a very old demo, but the concept behind it is interesting.

The only issue: it’s a shader driven solution, wich is not always optimal depending how you wish to interact with your terrain. Raycasting and physics may not work as intended or require hacks since the “real” position of vertex doesn’t change.