How do I make the color of dynamic terrain vary based on the height of the terrain

Questions
1

I want to change the color of the terrain based on the height of the region. For example - if the y-position of the region is less than 10, then it will be green, if it’s more than 10 but less than 50, it’ll be brown, if it’s more than 30 then the terrain will be white. Is there any way to achieve this?

2

Example:

3

Yes, that’s totally possible. You could color the vertices individually or generate a Texture. DynamicTexture is simply a HTML5 canvas that you can draw upon. Pretty sure i’ve seen a playground that does more or less what you want to do, but can’t find it. For now i’ll leave a few links to the documentation that should be relevant. Hope that helps.

creating ground meshes from a height map:



coloring vertices: Create Custom Meshes From Scratch | Babylon.js Documentation
dynamic texture:
Dynamic Textures | Babylon.js Documentation
4

Found the time to make a small playground to illustrate the idea of coloring vertices. It’s not commented, so please ask if something is unclear.

https://playground.babylonjs.com/#LQ4LI1#9

5

Found the playground i originally wanted to share. Much prettier than what i came up with. Uses node materials and raw textures. Here’s the link to the documentation page which has a brief video as well as the link to the playground.

6

Thanks, @taulmarill ! I don’t think I can use it for dynamic terrain, guess I’m going to have to use these chunks to make my own terrain generation system

7

Do you know a place where I could steal some co- I mean learn how to implement this?

8

Maybe https://forum.babylonjs.com/t/dynamic-terrain-with-height-dependent-textures/5320&ved=2ahUKEwjN4M-P-b3tAhUOFTQIHSReApsQFjAAegQIAxAC&usg=AOvVaw2Ms0pjjqnVKvHsSiKNP3F2

9

Using a shader: https://cyos.babylonjs.com/#GUTW10#8

10

Can you explain how to change the color to make it similar to the picture I gave?

11

https://cyos.babylonjs.com/#GUTW10#9

At fragment shader you can state which height should use a specific color:

    if (vPosition.y < 0.01) {
        col = vec3(0., 0., 0.75);
    } else if (vPosition.y < 0.15) {
        col = vec3(0., 0., 1.);
    } else if (vPosition.y < 0.3) {
        col = vec3(1., 1., 0.);
    } else if (vPosition.y < 0.6) {
        col = vec3(0., 0.75, 0.);
    } else if (vPosition.y < 0.9) {
        col = vec3(0., 0.5, 0.);
    } else if (vPosition.y < 1.75) {
        col = vec3(0.35, 0.35, 0.35);
    } else {
        col = vec3(1., 1., 1.);
    }
12

Have you all seen this by Pirate JC? It seems pretty close to what you were looking for Interactive Hex Tiles: Part 6 - Generating Island Terrain - YouTube

1 Like
13

How do I make the transition between two colors smoother? I don’t want to keep a 100 more else if statements in between the already existing ones

14

nvm, used the mix function for the gradient

2 Likes
15

@samevision - How do I implement this in this playground? I’ve been trying, but haven’t been able to implement it so far