Hello everyone,
I am planning to implement “lines drawing” on an elevated terrain.
I want to achieve something like this (it’s a screenshot from some map application):
but I want to make it look nicer.
With babylon, I can easily pick points on the elevated terrain, the problem is drawing of the lines.
So far I was thinking about
A) dynamically creating a texture and use it as an emissive texture on the terrain.
B) using CSG operations to identify the geometry of the line and render the line over the terrain
C) create some custom shader solution for this - I don’t have any idea so far
A bit of context:
- once the line drawing is done, I would like to close the resulting polyline and carve the area out of the elevated terrain with CSG, that’s why the CSG even for line visualization might be a good idea. But I think that CSG only works well with closed meshes.
I will post update on my progress, but I would love to hear how would you guys approach this problem.
Maybe there is some obvious solution I didn’t think of?
hey that have simple way in shader for draw line between 2 point but i need a PG
and know what is your material type then i can try if
So I got some proof of concept for version A, here’s a PG
@nasimiasl I would like the solution to be independent of chosen material. But since you asked, let’s say the material is PBR
Yep, CSG is pretty finnicky with open meshes and especially with more complex shapes like a mountain, so a solution that doesn’t rely on it will be more reliable.
A decal might work too and it’s relatively simple: Drawing HTMLCanvasElement as Decal | Babylon.js Playground (babylonjs.com), but I think the shader approach would be the fastest.
1 Like
float dot2(vec3 a , vec3 b ){
return -(dot(normalize(a),normalize(b))) ;
}
float rectXZ(vec3 a1 , vec3 b1 ,vec3 a2 , vec3 b2 ,float stork , float calib ){
vec3 c = pos;
c.y = 0.0;
float angle0 = dot2(a1-c,b1-c) ;
float angle1 = dot2(a2-c,b2-c) ;
float angle2 = dot2(a1-c,a2-c) ;
float angle3 = dot2(b2-c,b1-c) ;
return ( (angle0+angle1) + (angle2+angle3) ) > -1.*calib ? 1. :0. ;
}
float lineXZ(vec3 a , vec3 b , float stork , float calib){
vec3 dir = r_y(normalize(a-b),-90. ,vec3(0.))*stork;
vec3 a1 = a+dir ;
vec3 b1 = b+dir ;
vec3 a2 = a-dir ;
vec3 b2 = b-dir ;
float l1 = length(pos-a)<stork?1.:0.;
float l2 = length(pos-b)<stork?1.:0.;
return max(l1,max(l2,rectXZ(a1,b1, a2,b2 ,stork ,calib ))) ;
}
// using
lineXZ(vec3(-2.,0.,2.),vec3(0.,0.,-2.),0.1,0.005) // if return 1. mean your pos is in the line elase pos out of line
you can add this functions in customShader or NodeMaterial
*inprogress : parameter calib:calibration can be removed but i need calculate that
1 Like
i work on other optimized sample use GeometryBuilder
Thank you guys for inputs!
@carolhmj I am not sure how I would use the decals to draw lines 
And about carving the lines into the mesh - I realized that I don’t need to use CSG, since this problem can be +/- easily reduced to 2D, where I can try to employ some contrained triangulation library. This would solve the problem much faster and more reliably than CSG.
At least I think 
I’ll try to post it here once I find time to actually implement it.
@nasimiasl looks really cool 
But I’ll need a bit more time understanding what’s going on and how to control it. I’ll check it out later.
1 Like
i can explain it in post if you intrested
You could draw the shape of the line you want in a canvas, and then apply that to the mesh as a decal. I think getting the positioning of the decal correct might be a bit of a pain through, so ShaderMaterial still sounds like the best bet
1 Like
