BabylonJS MeshLine - a port of THREE.MeshLine

Another candidate for the featured PG in the docs. Where will it end? I think the greased lines page in doc has already more examples than any other feature :yum: Is there anything you cannot do with greasedLines? :stuck_out_tongue_winking_eye:

Actually this will go to a new page called Advanced examples.

I faced a lot of imperfections of GreasedLine already but I donā€™t like to talk about them :rofl: :rofl: :rofl: Iā€™m trying to find solutions but first of all Iā€™d like to add animation support for offsets, widths and colors and add a SimpleGreasedLine material. The animation support means simply adding offsets to offsets, widths and colors table so you can provide a bigger table as needed and you can move/animate trough it specifiying an offset. SimpleGreased material will be based on ShaderMaterial (no lighting, no base material) and will be very fast.

2 Likes

Thatā€™s sound yummy :yum: :smile:

2 Likes

I had to drop these ideas because offset and widths animation is not possible technicaly in the vertex shader but can be achieved by modifyin the underlying vertex buffers. There will be examples for this. Animation of colors can be achieved by modifying the color texture offset so there is no need to add an extra shader attribute for this. Iā€™ll create an example for this as well. The SimpleGreasedLine material is the only candidate for an update and it makes sense to have an ultra fast material just for drawing plain colored lines especially in digital twin projects where I use the GreasedLine to draw electrical wires, water, plubmbing in the buildingsā€¦

I am working on the examples in my spare time and there is stuff worth to wait for :smiley:

1 Like

FLOWER POWER:

:vulcan_salute:

13 Likes

Amazing beauty!

1 Like

This is so cool! :heart_eyes:

1 Like

Lightning bolts v1.0:

The recursive algorithm for creating the lighting branches was in my code library for years already so I canā€™t remember who is the authorā€¦ Sorryā€¦

:vulcan_salute:

10 Likes

Man, this is real COOL. :+1: Iā€™m sure many people will want to see that. :smiley:

1 Like

Thanks, :partying_face: this one with the others were created for the advanced doc examples.

1 Like

So pretty !!!

1 Like

HIi everyone! New examples are available:

@mawa
Now itā€™s ready to publish :slight_smile: Can you please add to the text that it was created by roland@babylonjs.xyz (not a team member e-mail address). It will help to raise my reputation and make it easier to find another jobs in the future for sure.

Thank you!

3 Likes

Great to hear that :smiley:. Let me ā€˜polishā€™ the content a little and update the featured examples, now that they have extended. BtW, any suggestion for the best/most diverse examples to feature?

I will do a rev version shortly and let me come back to you before I publish so we can fine-tune this togetherā€¦ Meanwhile, have a great WE :sunglasses:

1 Like

Hmm, nope :slight_smile: They all look trivial to me after spending so many time playing around with GreasedLine. Maybe the circular audio analyzer is the one. Itā€™s just one circular line with dashing enabled and widths set to the audio analyzers output.

Anyway, Iā€™m going to release the non camera facing version today. As you already know itā€™s based on the ribbon mesh and this opens a lot new possibilites.

Yes, I like the audio analyzer because of wellā€¦ the audio. Audio has up to 15 times more impact than visual. Reason why I selected this. Are you saying the copyrighting/rights issue of the soundtrack is now fixed and we are good to feature this?

1 Like

I hope so. What worst can happen? :slight_smile:

EDIT:
Maybe itā€™s a good idea to ask the team.

@Deltakosh @RaananW @sebavan @Evgeni_Popov ā€¦ donā€™t know who elseā€¦

Guys, we have this PG which features a music by Alan Walker. Is it ok to use it in our official PG example?

1 Like

Iā€™ll PM you something in a minute. Hope you donā€™t mind. Iā€™ve being going somewhat ā€˜deleriousā€™ this afternoon with this audio analyzer thingy. Did some design thinking around it (I admit under influence of a couple beers :joy: :beer:) Iā€™d like to have your opinion on it, see if this is something I should work out with a clear mind? :woozy_face: :rofl: Cheers,

1 Like

Non camera facing GreasedLine - DRAFT, so things can and probably will change:
https://playground.babylonjs.com/?snapshot=refs/pull/14184/merge

If you want to use a non camera facing line you have to use the ribbonOptions property.
There are two modes available to define the coordinates:

  1. BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS
    You just define a line with the points and with the direction (itā€™ll be renamed to slope) you define the slope of the line thickness. Basically it thickens the line in the direction of slope by width/2 and to -slope by width/2.
  2. BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_PATHS
    You have to define two paths with the same number of points. The right side of the line and the left side of the line. Thus you can define the slope and the width using these paths.
    You can define more than two paths to create non-flat lines. In this mode you canā€™t use the widths property for altering the segment widths.

In both cases you need to set the cameraFacing material property to false. Defaults to true.

It uses CreateRibbonVertexData under the hood.

If you donā€™t need a double-sided mesh, set that option to false. Defaults to true.

    const mesh = BABYLON.CreateGreasedLine("line-widths", {
        points,

        ribbonOptions: {
            pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS,
            direction: new BABYLON.Vector3(0, 0, 1),
            width: 0.1,
            doubleSided: true
        },
    }, {
        cameraFacing: false,
    })

All the features of the GreasedLine will be supported. You can check the current implementation status here:


More PGs:

Has an UV(?) issue?



Has an width issue: EDIT: fixed


PATHS mode, two paths - two edges of the line


PATH mode with 4, paths creating a non flat line (actually itā€™s not a line anymore) with dashing:


If you have any comments, please let me know, Iā€™ll gladly and thankfuly use your ideas/improvements!

:vulcan_salute:

1 Like

Hey everyone!

I donā€™t want to spoil anything here but @mawa is pushing the circular audio analyzer (https://playground.babylonjs.com/#H1LRZ3#232) to an insanely cool level!! :heart_eyes_cat:

4 Likes

You sure know how to commit people to your project, donā€™t ya? :rofl: I will try my best - Iā€™m not sure ā€˜insanely coolā€™ will really apply here :face_with_hand_over_mouth: Weā€™ll see how it goesā€¦ Meanwhile, have a great sunday :beach_umbrella: :sunglasses:

1 Like