Is there a way to 'draw' lines on a mesh's surface?

Questions
1

I have a ground mesh with a texture. I am wanting to draw lines on top of the texture, to give the effect of a road or path. I can draw the path directly on the raw texture .png, and then load that into the mesh, but this does not give the desired effect I am looking for.

samplingmodes
samplingmodes.png500×582 83.4 KB

I want the texture to have crisp edges, so using ‘Texture.NEAREST_SAMPLINGMODE’ works; however, I also want the ‘curves’ to be crisp too, but as you can see it gives a jagged effect. The other sampling mode has a more smooth appearance, however I don’t want it to be blurry. So obviously drawing the paths directly onto the texture is not a solution; Also, because I need the path go over uneven terrain, seems like it adds to the complexity of my problem…

What I’d really like is to have a ribbon or something, where I can define the x & y coordinates for it’s “path”, and then apply a gravity-like effect to lay the ribbon on the ground.

Any help or ideas would be greatly appreciated. Thanks

Edit: I actually just found out about decals, perhaps this is exactly what I’m looking for (in my case, the ‘decal’ can be a seperate image containing only the path. I’ll try it out and see how it goes…

2

The standard solution to this problem in Unreal 4 and Unity has been to use a shader that mixes between a tiling grass and dirt texture based on vertex colors, but I’ll admit I’ve never tried implementing something like that from scratch before, let alone in Babylon :thinking:

I have a feeling the decal method will end up being kind of frustrating in itself, but let us know how it goes.

3

Why not define any # of brushes and draw on a dynamic texture? You could always buffer your (X,Y) coordinates from the canvas to intersect with your mesh(s) and then apply a shader to those coordinates.

Galen

4

hi
you can draw with shader
https://www.babylonjs-playground.com/#T9VI62#2
https://www.babylonjs-playground.com/#T9VI62#3

line( vec2 point1, // point 1
vec2 point2, // point 2
vec2 dir, // uniform dir ( uv1 or uv2 or position or and state
float tick // border tickness
)

     if(  line( p1 , p2 , vUV , 1.00 )>0.){
        color = vec4(1.0,0.,0.,1.);
    }

     if( line( p3 , p4 , pos.xz , 5.00)>0.){
        color = vec4(0.0,0.,1.,1.);
    }

draw svg path
https://www.babylonjs-playground.com/#T9VI62#9

best recommendation for make road make the path geometry
sample in progress

1 Like
6

Hi gang!

Using non-ShaderBuilder shaders, Naz? That’s unusual. :slight_smile:
Excellent playgrounds, as always, @nasimiasl. So cool!

The ideas from the others… are real interesting, too!

Here’s a playground from @MarianG, I believe: Babylon.js Playground Fun!

Naz made others, too… WITH shaderBuilder assistance:

https://www.babylonjs-playground.com/#1IAR36#15 (and #16)

I love this subject.

2 Likes
7

actually i import shaderBuilder helper method ( line and lineF3 )

1 Like
8

Wow, those are some good suggestions. Wish I came back to this topic earlier haha…

I ended up getting decals to work though, and I just use a seperate texture containing the path(s). The art style I’m going for is similar to Runescape Classic, so I really don’t need anything too fancy,.

Although there are some slight issues with the decale looking ‘wavy’, and shadows on the edges of the decal; although I managed to minimize the shadow effect by changing the materials alphaCutOff property, although I will need to look for a better solution…

decalpath
decalpath.png428×503 58.8 KB

2 Likes