How to make a sphere that has land and water?

[mangomongo]

I am making an app that has planets and currently all my planets are all land, like this:

http://www.babylonjs-playground.com/#F6P9N4

You can place markers on the planet by clicking and you can rotate the planet with the arrow keys.

Any tips on how I would go about displaying planets that have both land and water? I imagine I could color the whole planet blue and then place brown "islands" on top. How can I procedurally generate the closed loops for the brown patches? I would also need to detect whether the user clicks land or water.

[Gijs]

You can use TerrainMaterial for the land and water:

https://doc.babylonjs.com/extensions/terrain

For the mixTexture you can use DynamicTexture:

https://doc.babylonjs.com/how_to/dynamictexture

Then to detect what the user clicked, you can use the texture coords from the pickResult to get the picked pixel from the canvas:

https://www.babylonjs-playground.com/#E6OZX#208

[mangomongo]

Cool...is it more challenging to do on a sphere?

Also, as I understand it, that method limits the # of "terrains" to 3 - what if I wanted to do more than three(eg. water, desert, jungle, forest and snow)?

[Gijs]

5 minutes ago, mangomongo said:

Cool...is it more challenging to do on a sphere?

Also, as I understand it, that method limits the # of "terrains" to 3 - what if I wanted to do more than three(eg. water, desert, jungle, forest and snow)?

It works the same on planets:

http://www.babylonjs-playground.com/#F6P9N4#1

If you want more terrains, have a look at MixMaterial:

https://doc.babylonjs.com/extensions/mix

[mangomongo]

Thanks!