Jean-Philippe Côté

Creating Constant-Width 2D Lines

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.)

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.