How can I add height to my tiled map?

Questions
1

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: https://playground.babylonjs.com/#X2ULQN#1

2

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

2 Likes
3

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

https://playground.babylonjs.com/#X2ULQN#3

1 Like
4

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?

5

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

1 Like
6

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
8

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.
https://playground.babylonjs.com/#X2ULQN#11

9

i am looking now

10

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

11

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

https://playground.babylonjs.com/#X2ULQN#11

  var satURL = "https://api.mapbox.com/v4/mapbox.satellite/" + 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;
12

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

13

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 = "https://api.mapbox.com/v4/mapbox.satellite/" + id + ".jpg90?access_token=" + token // heightmap url texture
        var heightMap = new BABYLON.StandardMaterial('heightMat', scene);
        heightMap.diffuseTexture = new BABYLON.Texture(satURL, scene);

https://playground.babylonjs.com/#X2ULQN#11

should I use
heightMap.Vertex_Before_PositionUpdated ?

14

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

15

or you can use lowpoly details
https://www.babylonjs-playground.com/#1ZEABJ#198
(watch with vpn if you see this from iran )

16

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

1 Like
17

https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=YOUR_API_KEY

18

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

https://api.open-elevation.com/api/v1/lookup?locations=41.161758,-8.583933

19

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

20

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

21

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

1 Like