Tiled ground with height map for each tile?

Hi guys, I’m new to Babylon.js and I’ve been slowly but steadily learning it.
I’ve hit a wall now and hoped you guys would help me.

I’ve created a test scene in three.js which presents a vast plane with repeated mountain texture and displacement map for each plane segment. It looks ugly but serves it’s purpose.
https://astropilot97.github.io/threejs-test-scene/
In three.js it’s as simple as defining a texture with url to displacement map file, setting repeating for the texture with UV texture wrapping, assinging it to displacementMap property of a material, then creating a mesh with said material and plane geometry.

I’m trying to recreate it using Babylon.js and I can’t seem to find a way to repeat the displacement map.
I was trying to make use of a Tiled Ground mesh but I can’t apply the displacement map to it in any way.
https://playground.babylonjs.com/#WGAD39#1

The docs suggest CreateGroundFromHeightMap, but the height map applies to the ground as a whole.
I’ve seen someone do something similar to what I’m looking for but the code is hard to understand for me.
https://playground.babylonjs.com/#X2ULQN#3

Is there some way to create a ground with repeated texture and height map on each tile/segment?

@AstroPilot97, the way I would approach this is with a node material rather than a multi material which shines by being able to pass different materials to submeshes. Since you are passing the same material over and over, you simply need to tile the material and displace the verts. I created a simple shader for you to look at in this revision to your PG. The reason I like creating a node material is that I have full control over what the inputs are and what I am able to do with it. In this case, I could have used one tiling value for both textures, but I added an option to tile them separately since it looks like the height and texture are not locked pixel for pixel. You can then get extra flexibility in changing your tiling rates. There is also an intensity parameter to control the height of the displacement for you. All three of these parameters are exposed on the nodeMat material if you scroll down in the inspector.

The thing to concern yourself with when displacing is the resolution of the mesh. More resolution means a better displacement and a heavier mesh in scene. This ground is very heavy to handle the amount of tiling. So you will want to balance the amount of tiling with the resolution needed to get a good displacement.

The other reason I like the node material is that I can change the lighting model to anything I want depending on how I wire the nodes. You can use standard Blinn/Phong lighting, PBR, Unlit, or any combination you want. Hope this helps, but please ping me back with questions.

2 Likes

Hi, thanks for replying and thank you so much for that shader, it’s exactly what I’m looking for!

I didn’t get around node material yet, so I’ll start reading about it now. I’ve played around the subdivision, tiling and intensity values and got something very close to what I have in my three.js scene. I can finally proceed further with my Babylon scene.

Thanks a lot for your help!

1 Like