Contour line and Contour tree

Question

I want to create a contour line in a mesh (terrain) from the height map data/image that i have. I want my terrain to look like this.

I am in JS and open to use anything in Three.js.

I aim to make a took where user can upload heightmap and it will generate mesh like this.

I tried to check contour tree but couldn't understand what is that used for and how that would help for topological analysis.

I am lost in basic concept as well !

This is my terrain right now.

What i want is that when i click on anypoint in river or any height, the near pixel with similar height also should get selected.

and i thought using idea of contour line or tree would help me achieve that but no idea what can i do or how can i achieve that.

Answer 1

You do not need the elevation map for this, the model already contains the height information needed to calculate these lines (unless there's a very big resolution difference). You just need to put a shader on the geometry that renders lines at certain heights.

uniform float interval; // how far apart lines should be
uniform float thickness; // how thick the lines should be, in pixels

varying float vHeight; // height of the model passed from the vertex shader

void main() {

    float step = vHeight / interval;
    float f  = fract(step);
    float width = fwidth(step);
    float aa = smoothstep(width, width * thickness, f);
    float inv = 1.0 - aa;

    gl_FragColor = vec4(inv, inv, inv, 1.0);
}