How can I add height to my tiled map?

Hi everyone

I want to know what is the best way to add actual height to my tiled map? is there any example of 3d tiled map?
here is my tiled map PG:

@jerome is the king of dynamic tiled terrain with @nasimiasl and @MackeyK24


thanks for ping me @sebavan
@Arash_Bagheri where is your height map texture?

1 Like

Hi @nasimiasl , Thank you so much. its great. is it need to use the earth radius to get the actual height? how can I change this sinusoidal height map to actual Earth height map?
should I use satellite for the texture?

Thanks a lot @sebavan. :pray: :pray: :pray: :pray:

1 Like

you need get height map too as a tile map you don’t need add earth radius just a texture can be enough

1 Like

Hi @nasimiasl

I’m so sorry for pinging you again. sorry for taking your precious time.
I added height map as a tile map , but there are some problems , is it possible to let me know what is my problems. what should I put for the y position of heightmap.
Here is my PG, is it possible to see it again.

i am looking now

i dont see the heightmap texture
please add height map texture (replace that by diffuse then send me a new link)

thanks a lot. I added heightmap texture in line 421. is it wrong?

  var satURL = "" + id + ".jpg90?access_token=" + token // heightmap url texture
            var heightMaterial = new BABYLON.StandardMaterial('heightMat', scene);
            heightMaterial.diffuseTexture = new BABYLON.Texture(satURL, scene);

            heightMaterial.diffuseTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
            heightMaterial.diffuseTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
            heightMaterial.specularColor = new BABYLON.Color4(0, 0, 0, 0);

            var heightmap = BABYLON.MeshBuilder.CreateGroundFromHeightMap('heightmap', satURL, { width: width * factor, height: width * factor,subdivisions: 100., minHeight:0, maxHeight:30 });
            heightmap.position = new BABYLON.Vector3(
                (tileX * factor - xTileBase + factor / 2) * width,
                -factor * 0.1,
                -(tileY * factor - yTileBase + factor / 2) * width

            heightmap.material = heightMaterial;

you dont need recreate mesh by height map
you can create height on GPU side (that is optimize for map solutions )
if you set just height map to diffuseTexture i make it for you

did you mean build it with shader? I just added these lines for diffuseTexture but I don’t know how can I do it with shader.

        var satURL = "" + id + ".jpg90?access_token=" + token // heightmap url texture
        var heightMap = new BABYLON.StandardMaterial('heightMat', scene);
        heightMap.diffuseTexture = new BABYLON.Texture(satURL, scene);

should I use
heightMap.Vertex_Before_PositionUpdated ?

yes but you use satellite texture as height map
you need ‘World Elevation services’ texturing for have height map

i don’t see that part in your code

or you can use lowpoly details
(watch with vpn if you see this from iran )

I’m from iran. i find google elevation api but its filter from iran to get api access key

1 Like,-104.9847034&key=YOUR_API_KEY

i find a free api for openstreet but its in terms of lat and long, can I use it ?,-8.583933

its great can I use tiled api instead of one jpg texture to get high resolution?

you can because hight map changes is so low also yo can make high details for a city
but it is a bit work you can define as a service job request in babylon i guess

should I just add the api in texture and do the rest of it by shader?

1 Like