Creating Constant-Width 2D Lines

[Jean-Philippe Côté]

Hey guys!

I need to create 2D lines with constant widths. As you can see on the playground, using BABYLON.MeshBuilder.CreateTube(), I managed to get very close to what I need to achieve:

http://www.babylonjs-playground.com/#165IV6#181

However, I need the lines' width to say constant. As you can see in my example, the width of the resulting 2D line varies with the angle between the line segments. Being 3D cylinders and not 2D lines, this is to be expected.

Do you guys have suggestions as to how I could achieve what I want? I saw some mentions of a Lines2D builder but I cannot find any documentation for it. 

TIA.

[Wingnut]

Hiya JPC, welcome to the forum! 

We have some thin lines that might be useful.

http://doc.babylonjs.com/babylon101/parametric_shapes

They aren't allowed to change thickness, but they do have color options, and append-more-lines-onto-current-lines features, too.

A playground search for linesMesh returns a few examples.

As far thicker stuff...  I guess we'll need to wait for more ideas, because I don't have any.

Tube-bendings that I have tried... look similar to yours.    https://www.babylonjs-playground.com/#Z1SIC 

Can we ask how these lines will be used? 

Are they for a floor-plan/blueprint, that will always be viewed straight-on or overhead? 

If so, we have some GUI tools that will let you draw nice 2D lines on a texture/plane... any thickness/color.  But, not sure if that's appropriate for your project. 

I hope I've been helpful.  Stay tuned... others are sure to comment soon.  Welcome again!

PS:  Lines2d was part of a now-deprecated Canvas2D system.  Babylon GUI has now superseded it.  (Actually, to be fair, Canvas2d system is still safe, and stored-away in a nearby closet.  Project flesh-out was interrupted due to unfortunate circumstances beyond anyone's control.)

[Jean-Philippe Côté]

Quote

Can we ask how these lines will be used? 

I'm working on an interactive installation that will algorithmically draw faces using such lines. While, theoretically, it's a 2D project, I want to be able to animate the lines in 3D to transition between different faces.

I looked at Babylon GUI but it's not really what I need. I just hope I will not be forced to calculate all vertices by hand... Hopefully someone out there can point me in the right direction. 

Thanks a lot for you help.

[Jean-Philippe Côté]

I found a solution. I'm using the radiusFunction callback to enlarge the radius of the tube proportionally to the narrowness of the angle between segments. It works pretty good. Cheers!

[JohnK]

@Jean-Philippe Côté Hi and welcome to the forum. Well done in finding a solution to your problem. It set me thinking and I had a play around and made a line2D function for drawing lines of fixed width in the XY plane. The line is a mesh so can be positioned and rotated in 3D. Probably have a play with colours and textures for it next. Also need to be thinking about closing the line. Much fun yet to be had.

Just two options currently, the path for the line and the width of the line.

https://www.babylonjs-playground.com/#FA2H7X

 

 

[Jean-Philippe Côté]

@JohnK This is exactly what I originally was looking for. Thanks!  It would be nice to see something like this added to the MeshBuilder object. 

P.S. The BabylonJS community is awesome!

[GameMonetize]

Quote

P.S. The BabylonJS community is awesome!

I keep telling that to everyone ;D

[JohnK]

Still having fun with my line2D function.

Two more options

1. closed, a boolean, defaults to false, when true will close the path.

2. standardUV, a boolean, defaults to true. When true imagine scaling the line so that it fits on the texture, placing the line on the texture and cutting the texture around the line. When false the texture is squeezed onto each line segment. When the line is closed and there is are an odd number of segments the texture on the first and closing segments need to match.

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

EDIT When you want a line drawn in 3D space then as others have said in other topics the best way is with a tube.

[Jean-Philippe Côté]

That's pretty cool! 

[MarianG]

Good job @JohnK 
What about to use it on XoZ axis?
I tried to do some changes on 2dLine system but witout succes 

[JohnK]

4 hours ago, MarianG said:

What about to use it on XoZ axis?

Simplest way is probably just rotate the line about x axis https://www.babylonjs-playground.com/#FA2H7X#7

 

[MarianG]

I know, but I have to draw lines on a plane on XoZ using only x anz z values, and I can't use simple lines because I have to chenge line width. 
Thanks anyway, I'll try with a dynamic texture.

[MarianG]

Finally, I figure it out using simple plane, here is:

function createLine(p1,p2)
{
	var line =  BABYLON.MeshBuilder.CreatePlane("wire", {height: 1, width: 1, sideOrientation: BABYLON.Mesh.DOUBLESIDE}, scene);
	var dist = BABYLON.Vector3.Distance(p1, p2);
	var rotAngle = Math.atan((p1.x - p2.x)/(p1.z - p2.z));
	
	line.position = BABYLON.Vector3.Center(p1, p2);
	line.rotation = new BABYLON.Vector3(Math.PI/2, rotAngle + Math.PI/2, 0);
	line.scaling = new BABYLON.Vector3(dist, customWidth, 1);
	
	line.material = new BABYLON.StandardMaterial("mat", scene);
	line.material.diffuseColor = BABYLON.Color3.White();
	
	return line;
}