BabylonJS MeshLine - a port of THREE.MeshLine

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:

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:

2 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

I don’t know what are you talking about hehehe!

I am helping my son to complete his first paid job as a freelancer. Pawnshop software in Quasar/Vue/Dexie on this great Sunday and fixing the ribbon greased line… So that much about a great sunny Sunday… :see_no_evil:

Enjoy the day ‘off’ as well!

It’s comiiiing… :wink:

GreasedLine non camera facing beta version.

A little demo of Tie fighter drones created by GreasedLines flying aroung in space:

@mawa - it seems that everything is working, but I have to do more tests so we can utilize this new stuff in the analyzer demo…

All rights to have bugs reserved :smiley:

@Calsa

1 Like

So basically it has the same inputs as the camera facing GreasedLine plus ribbonOptions in adition.

    const wingsPoints =
        [
            [
                4, -4, 0,
                5, -2, 0,
                5, 2, 0,
                3.5, 7, 0
            ],
            [
                -4, -4, 0,
                -5, -2, 0,
                -5, 2, 0,
                -3.5, 7, 0
            ]
        ]

    const tieDrone = BABYLON.CreateGreasedLine("tie-drone", {
        points: wingsPoints,
        ribbonOptions: {
            pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS,
            direction: new BABYLON.Vector3(0, 0, 1),
        },
    }, {
        color: BABYLON.Color3.Gray(),
        cameraFacing: false,
        width: 4,
        colorMode: BABYLON.GreasedLineMeshColorMode.COLOR_MODE_MULTIPLY

    })

In pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS it needs a second parameter called direction: Vector3. The line will be stretched along the line defined by the points to both sides in the direction defined by this vector. One can visualize the line points easily:

    BABYLON.CreateGreasedLine("debug", {
        points: wingsPoints
    })

The cockpit is drawn in pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_PATHS where each line in points represents a path. These path are connected to create the mesh.

This is how you get the final mesh:

All info about the new mode will be in the docs next week. Hope you all will enjoy it and find it cool!

@Calsa

This is the most awesome tech demo ever. Sort of makes me want to toss in some HAVOK asteroids and an X-wing or two to challenge all those greased tie interceptors.

3 Likes

@Calsa Video gif. A puppet with googly eyes says, "Do it, do it, do it!" while shaking with gusto at his words of encouragement and looking at us.

1 Like

This is probably what you will need as first:

https://yuka.babylonpress.org/examples/js/steering/offsetPursuit/

Check other Steering behaviors:

1 Like

If we don’t have permission to link the music, would be recommended not to use it as an official example.

Music changed on the offciial documentation page:

@mawa I think you already put a lot of effort into your demo. It is not an official Babylon.js demo so I don’t think you will have to change it.

1 Like

Well, I’m not gonna lie. That’s pretty sad, if you ask me. :disappointed_relieved: The alternate soundtrack is a lot ‘flatter’ on the equalizer and is also a lot less ‘emotional’ (or ‘engaging’). I suppose it will sure do for a PG…yet… we can discuss this further by PM for this eventual featuring that’s WIP. In case, I’d like to understand where the original soundtrack came from and how I can eventually make contact with the creator (or agent or editor) to see how we can eventually make some arrangement for a courtesy featuring of the original audio soundtrack? As I said, I shall PM you about that, so no need to reply here. Meanwhile, have a great day :sunglasses:

1 Like

Started to write the docs for the non camera facing line :muscle:

1 Like

Hi @roland did this make it into master yet? Some of the new properties like pointsMode: seemed to not be detected by VS autocomplete (via NPM packages). I have been itching to give the new mode a try.

Sorry it didn’t.
https://forum.babylonjs.com/t/weve-been-examplary-hacked/44054?u=roland

@Calsa @sebavan

What another great use for GreasedLine, the drones are already shooting…

It will be an x-wings vs ties battlescene by the way… With thousands of them. I am pretty curious how many spaceships will squeeze my gpu’s balls. :smiley:

@sebavan have you eve encountered a BabylonJS fitted collision compute shader? If not, it will be fun to write one… Wish I had more time…

2 Likes

Nope never seen one but wish you had one as it sounds really fun

1 Like