Working LinesMesh example?

[jeti]

Hello!

Can anyone provide me with an example of how to use the LinesMesh class?

Simply instantiating it does not seem to do the trick: http://www.babylonjs-playground.com/#LBRTP#0

 

Thank you,

jeti

[Temechon]

Hi ! 

You have one example here : http://babylonjs.com/Demos/Lines/
Check the source code of the page to see the corresponding babylon code.

 

[Wingnut]

Hi Jeti... welcome to the forum!
The 'createLines' constructor... instantiates a LinesMesh.  So, the #2 built-in playground demo... shows a working LinesMesh:

http://www.babylonjs-playground.com/?2  (code lines 35-40)

Want to see the trail?

It all starts here:  https://github.com/BabylonJS/Babylon.js/tree/master/src
Even though you see the babylon.linesMesh.ts and .js in that folder, we won't visit there yet.
Instead, choose  babylon.mesh.js  and scroll to line 1383
See line 1389?  Yep, we're off to BABYLON.MeshBuilder.CreateLines  We went from Mesh class, to MeshBuilder class.  It adds more features to the Mesh Class
Notice line 146.  There's our BABYLON.LinesMesh instance, but we still have no "shape".  Shapes are often formed with BABYLON.VertexData object
Notice line 147.  Essentially, this says go to BABYLON.VertexData.CreateLines(options) and retrieve some vertexData based on 'options', then return here.
So, lets go visit a VertexData object... BABYLON.VertexData.CreateLines  
    [odd thing: Notice we are in the BABYLON.Mesh.VertexData class, even though line 147 calls BABYLON.VertexData.CreateLines.  I'm not sure why.]
Then VertexData.CreateLines does some serious work, and returns the resulting VertexData object in line 932
Now back to BABYLON.MeshBuilder.CreateLines line 148.  A VertexData object has a function called ApplyToMesh()
That is called in line 148.  VertexData holds data that it created with its own CreateLines() method.  That data is applied to the LinesMesh we instanced in line 146.
Line 149, we are headed back home... to https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.mesh.js#L1389 and done.

Gruesome trail, eh?  TMI, eh?    Hope this helps.  Again, welcome... good to have you with us. 

[adam]

The docs are helpful too:

http://doc.babylonjs.com/search?q=linemesh

http://doc.babylonjs.com/playground?q=LinesMesh

   that first result on the playground search is a nice simple example:

   http://www.babylonjs-playground.com/#1DKDYG#0

 

[jerome]

http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#lines

 

you need at least to pass an array populated with successive points to draw a line

[Temechon]

So much help in so little time <3

[Wingnut]

haha.  Jeti's question sits unanswered for 6 hours, and then suddenly FOUR of us answer at once?  What the heck?

[jerome]

maybe some galactic time zone ...

[jeti]

59 minutes ago, Wingnut said:

haha.  Jeti's question sits unanswered for 6 hours, and then suddenly FOUR of us answer at once?  What the heck?

This is my first post. It had been hidden until a moderator cleared it. I assume it's to avoid link spam.

This community seems to be crazy helpful. Thank you and give me some time to work through the replies.

[jeti]

I saw the LinesMesh mentioned in a thread on how to create a grid. The initial solutions made use of shaders and textures. Therefore I got the idea that the LinesMesh is something different than what Mesh.createLines produces. Feels a bit stupid in retrospect.

Now I have a followup question: Is there a way to draw line segments instead of a continuous line? 

 

 

[jerome]

for now, no

you have to do as many lines as you want the number of segments

 

soon, I'll implement a LineSystem to solve this

[jeti]

Drawing two ladders provides a decent result using two meshes. I'm still trying to use a dashed line to get rid of the extra segments. It's a bit fiddly.

http://www.babylonjs-playground.com/#LBRTP#2

Support for line segments would definitively be nice to have.

 

[Wingnut]

Hey Jeti... you can use parametric tube shapes as the segments of your grid.  http://playground.babylonjs.com/#TDUK0#24   As you can see, they are nice and straight, and they have barbs sticking out to keep woodland critters from walking on your grid at night, and leaving mounds of...

Okay, okay, just joking around with you a little. 

Keep in mind that textures can do grids, too.  http://playground.babylonjs.com/#1O9A7#1

With some creative use of alpha/transparency, you can command your grid planes to show, partially-show, or hide... the surface between the lines.

Don't forget what Adam mentioned... our cool Playground Search.  http://doc.babylonjs.com/playground?q=grid   Have fun!

 

[jeti]

Searching the playground sounds useful. I'll keep that in mind.

For now, I'll stick with this solution: http://www.babylonjs-playground.com/#LBRTP#3

It uses only one LineMesh. The drawback is that parts of the outer edges are drawn twice, which becomes visible if alpha is used. It's good enough for now. I don't think there's support for vertex colors on LineMeshes.

[jerome]

just PRed the new mesh type : LineSystem

var lineArray = [line1, line2, ..., lineN]; // each line is an array of successive Vector3
var ls = BABYLON.MeshBuilder.CreateLineSystem("ls", {lines: lineArray}, scene);

This will create a single mesh composed with all the lines declared in the array lineArray. So only one draw call.

[jerome]

yet in the PG :

flush your browser cache ...

[Wingnut]

But but but... hmm.  Jeti, I realize that there is 45 LBS of "fancy" draped atop Jerome's demos, but, I just bet... Jerome's solution does not satisfy your request.

Jerome, can your system do...

 BABYLON.Mesh.CreateLines("lines", [
     [new V3(someXYZ), new V3(someXYZ), new V3(someXYZ)],   // a 3 point line somewhere in space
     [new V3(someXYZ), new V3(someXYZ)],   // a 2 point line somewhere in space, maybe not attached to the first
     [new V3(someXYZ), new V3(someXYZ), new V3(someXYZ), new V3(someXYZ)],   // a 4 point line (possibly detached) somewhere in space
     [new V3(someXYZ)]  // a dot? 
]);

?? 

And then... how about LinesMesh.vertMarker = var of any mesh... that gets instanced/cloned and placed at each vertex of all the lines!  Wow!

Anyway, the above code template might be what Jeti seeks.  Maybe your new system can do this.  I don't think so.  As best I can tell, your system does programmable auto-instancing.  Still learning, though. 

[adam]

http://www.babylonjs-playground.com/#2K1IS4#3

 

[Wingnut]

Uhn, thanks Adam!  I stand erected.  errr... corrected.  Cooooool.

Please allow me to ruin it's simplicity for us, yet again. 

[Wingnut]

  So now, let's see, we need each line to have its own color.  Later, we'll try for each segment of line to be a different color. 

Then, what?  A line weaving contest?  Cloth-making... with lines?  Yeah!

Speaking of balls, they have a street in Las Vegas (Fremont Street) that has a domed roof for about 4 blocks, with a few (million) RGB light bulbs attached.

http://www.emol.org/nevada/lasvegas/images/freemontstreet.jpg

Something made me think about it, recently.    But I suppose the lines would be unnecessary for that.  Just balls-to-the-walls to simulate that thing (and an image buffer-to-balls function).  Dementedly delicious, and retro!  Why use pixels when we have spheres, eh?

Oh yeah, this is a thread about lines, not spheres.  I forgot.

[gryff]

Quote

Then, what?  A line weaving contest?  Cloth-making... with lines?

Don't stop at cloth making Wingy  - virtual quilting!!

cheers, gryff

[jerome]

@Wingnut about the LineSystem :

1 ) yes, each line can be absolutely independant from the others, so you can design a ladder, a grid, a ruler, hairs ...whatever you want what is composed with lines actually. It just will build a single mesh instead of one mesh per line as with the current CreateLines() method.

2 ) for now, the LineSystem color is limited to a single one for the whole system. I intend to provide per-line, per-segment, per-point colors also. This needs to recode the shader used by the LineMesh class... so I first need to lean how to do this. Temechon will teach me this ;-)

 

BTW, I just PRed a fix so the UserFunction _showNormals()_ now uses a LineSystem instead of hundreds or thousands individual line meshes : https://github.com/BabylonJS/UserFunctions/blob/master/showNormals.js

documented also, very soon here : http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter

[jerome]

example of hair (not goog though) : http://www.babylonjs-playground.com/#1KBCTW#2

2000 hair waving at 60 fps

[Wingnut]

Ahh, I have seen this before.  It is Scott's "Smart Grass"... a special hybrid breed of lawn grass.  You can't mow it.  It has learned to flex its stem to avoid lawn mower blades. 

[jerome]