# Painting objects on a terrain

Hi guys,

Could someone help me with a function. I can’t find the logical solution to do it.

• I would like to paint on a ground a certain number of meshes (trees, rock …) (name the density)
• and with a given space radius between each object (name the Radius by mesh).

I started a PG but it is not complete. Can someone help me with this?

I also failed in my PG to have the correct display of the brush radius. (I tried to use a spot light to see the ray, but the ray is not good and I don’t know how to make it correct.

https://www.babylonjs-playground.com/#DJQYJW#1

Something like this ? https://www.babylonjs-playground.com/#DJQYJW#2

If you want better distribution (instead of random), you can check Poisson Distribution Poisson distribution - Wikipedia
But it might be difficult as you might need precomputed values.
Also, you can try to use a regular grid and then add a small noise (parametrized), so you’ll get coordinates almost at the same distance one from another but easier to compute.

2 Likes

It’s a good start. Thanks

I did not understand to get a distance between each mesh?
Also if we repaint in the same place other meshes are added. Is it possible to prevent new meshes from being added in the same place?

What is this value of 6321.325 ?
var angle = i*6321.325;

Thank you very much Cédric for your help.

If you want to respect distance between meshes for all meshes, then you have to keep a list of position and be sure when adding a new mesh that it respects that distance or you discard it.
that 6321 value is a big number that gives pseudo random values when used with cos/sin. Any big enough value is enough. Totaly arbitrary.
Also, check Fibonacci/spiral/sunflower:
https://www.babylonjs-playground.com/#DJQYJW#3
More explanation here :

1 Like

Another possibility I’m thinking about is to do you paint density in a texture or a 2D array.
Then, do a full processing on that array and if density> threshold, then you add a mesh at the position.
The good part is you don’t have to check if a mesh is too close to another. Second good part is you can adjust distance after painting.
It would be easier to use that technic IMHO. Also, you can modulate the density with the terrain slope.

Thanks again. I wouldn’t have been able to move forward on this on my own. It seems quite complicated to me.

I don’t understand what you mean with paint density in texture or 2d array. I am not very good at mathematics.
I do agree that for you the technique seems easier to use, but it seems more complicated for me because I don’t know what it is technically.

thank you very much

It’s a 2D array that maps the world where each element is a density (let’s say 0 to 1). when you paint, you fill those values.
Then, after you’ve painted, you process that array and based on the density, you add a mesh.

Sorry Cedric, but I still don’t understand. Your explanation seems too technical for my understanding.

I know what a 2d array is, but which maps the world, I don’t see how this is done, or what that means. I am a bit lost.

Your PG with the Volgel spirals, seems to work better and I think I understand better the fact of rejecting the new meshes which do not respect the distance. But I’m also afraid that this function is ultimately greedy after.

Do you have an example to help me understand your solution to map the world? Hoping not to abuse your time.

Thank you

by “mapping to the world” I mean like a map. a topdown projection. It’s simpler than you think

I succeeded in eliminating the objects at a distance less than that given. I always have the desired distance between each mesh for a given radius and a given density.

Now I’m trying to see the radius of my gizmo (spot light), I’m not sure what I’ve done so far. So i have someone check if what is being done is good or if it could be optimized.

Thank you in advance and thanks Cédric for the help until there.

https://www.babylonjs-playground.com/#DJQYJW#13

1 Like

It’s looking good!
For more performance, rendering wise, you can use thin instances. Instead of `createInstance`, you add the position to an array and create thin instances from these positions.

Thin Instances | Babylon.js Documentation (babylonjs.com)

Also, I would add a mesh (a Torus?) to represent the radius and increase/decrease the radius with the mouse wheel.