Hello Community !
I want to make a square with lines
I found this playground code that might be helpful
But I didn’t understand the code written
I would appreciate any help to understand all these calculations meaning
Thank You
This has many interpretations. The example PG you use has this interpretation.
Draw a square ground and using a shader produce material that has lines of different thickness and color and direction and apply it to the ground material.
Is this what you require?
This is one introduction to shaders
Introduction to Shaders | Babylon.js Documentation.
The code you see is that used in writing shaders,
vec4 is a vector4 variable, float a floating point variable.
@JohnK ,
Sorry for not explaining well what I wanted to do ; my need requirements is to add some details to my ground , I found decal as another solution to add some internal borders lines to my ground.
But at the first site and before doing more researches , I saw the playground example that I ask for explanation how they apply all these calculations
Actually I know what is vec4 and float but I didn’t understand how these lines of code are drawing the lines …
float line(vec2 point1 , vec2 point2,vec2 dir,float tick){
vec3 vUV = vec3(dir.x,dir.y,0.);
vec3 p1 = vec3(point1.x,point1.y,0.);
vec3 p2 = vec3(point2.x,point2.y,0.);
vec4 l1 = lineF3(p1,p2);
float len = length(p2-p1)>length(p2-vUV)?1. :0. ;
len = min(len,length(p2-p1)>length(p1-vUV)?1. :0. ) ;
float la = l1.x*vUV.x+l1.y*vUV.y+l1.z*vUV.z+l1.w;
return len*max( 1.-abs(la*(100.0/tick) ),0.);
If I can allow myself (no offense), but if you don’t understand the code for shaders at this point, that’s totally fine. Honestly, I do not understand it completely myself 
I can however understand this ‘simple’ example of shader code above. Explaining it would take someone more experienced and would be like a shader course. All the rest is just Maths.
Here, I’m just wondering when you say
or
What exactly do you want to achieve? Do you really need faen shaders for it? (just asking).
May be you could provide with a mock-up or similar example/pict to help us understand your goal?
Hello, no worries , when I said I didn’t understand the code , I meant the purpose of each parameter (not the Math Calculation)
and for my requirements , I don’t need shades anymore , decal was a good solution (I just want to put some details on my ground : like a square PNG image ) , but It’s good to understand the shades even if I don’t need it now, maybe later will be helpful
1 Like
Sure can be. There are some awesome things showing in the PG demo posts made with shaders. Makes you want to learn how to code them but the approach for taking the first steps is not very ‘inviting’ May be one day, I’ll see too it 
Meanwhile, have a great WE,
2 Likes
Hello @mawa
I am using now a 2d line to draw it on my ground 
as alternative of the decal
Do you have any idea how to let the line be as if it’s drawn on the ground
I make it as a child of the ground , but it’s not as expected
Thank You
Something like this (line 222, pushed it to the left)?
1 Like
Thank you for your quick response!
Yes I tried to change the position Y
But is there any other solution without making change to the Y position?
Well, there’s (nearly) always another solution. Yet, from the method you chose, the thing is you are using the ground to position your line and so it will blend in (unless the offset). What’s the issue with this solution?
1 Like
There are some meshes that will be placed on the ground , so their positions will change if it’s on the line or not
Actually there is no major problem as the position is incremented only by 0.01 which is not a big deal
But I thought it will be nice to solve it without changing the Y position
UPDATED
I added this line to the line material and it solved my problem
line.material.zOffset=-1
Thank you so much
The ground hasn’t changed position. Only the line got a tiny-mini offset from the parent (after parenting).
Depends what you mean by ‘nice’. I tend to call it ‘fancy’ There are other methods using the vertices, clearing the buffer and make a second pass, mess with rendering order… In fine, these are all likely to cause additional draw calls and additional problems as you build-up your scene. So, if there is no absolute necessity for it. If it works and can remain simple, I (as a simple designer and PM) would rather stick to this.
There’s this word from some great person from I think the modern era (i don’t remember who it was) saying:
“Normal people believe that if something is working, you shouldn’t touch it. Whereas, engineers think that when something is working, it’s simply because it doesn’t have enough features” 
1 Like
You would need to check this with your other meshes in the scene. It might help or it might not. Changing the z-offset (depth rendering) means your line is now drawing in the back of all your meshes. It might be what you want or it might not.
1 Like