BabylonJS MeshLine - a port of THREE.MeshLine

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!

1 Like

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

2 Likes

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

2 Likes

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.

2 Likes

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:

2 Likes

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…

3 Likes

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

1 Like

Any chance this can be adapted to work with WebGPU?

Switching to WebGPU yields these errors:

BJS - [22:49:42]: Sampler “mapSampler” could not be bound. entry={“binding”:2,“visibility”:2,“sampler”:{“type”:“filtering”}}, materialContext={“uniqueId”:7,“updateId”:0,“textureState”:0,“samplers”:{},“textures”:{},“isDirty”:false,“_numFloatOrDepthTextures”:0,“_numExternalTextures”:0}
e._LogEnabled @ logger.ts:107

BJS - [22:49:42]: Texture “map” could not be bound. entry={“binding”:1,“visibility”:2,“texture”:{“sampleType”:“float”,“viewDimension”:“2d”,“multisampled”:false}}, materialContext={“uniqueId”:7,“updateId”:0,“textureState”:0,“samplers”:{},“textures”:{},“isDirty”:false,“_numFloatOrDepthTextures”:0,“_numExternalTextures”:0}
e._LogEnabled @ logger.ts:107

BJS - [22:49:42]: Sampler “alphaMapSampler” could not be bound. entry={“binding”:4,“visibility”:2,“sampler”:{“type”:“filtering”}}, materialContext={“uniqueId”:7,“updateId”:0,“textureState”:0,“samplers”:{},“textures”:{},“isDirty”:false,“_numFloatOrDepthTextures”:0,“_numExternalTextures”:0}
e._LogEnabled @ logger.ts:107

BJS - [22:49:42]: Texture “alphaMap” could not be bound. entry={“binding”:3,“visibility”:2,“texture”:{“sampleType”:“float”,“viewDimension”:“2d”,“multisampled”:false}}, materialContext={“uniqueId”:7,“updateId”:0,“textureState”:0,“samplers”:{},“textures”:{},“isDirty”:false,“_numFloatOrDepthTextures”:0,“_numExternalTextures”:0}

Greased lines are now part of Babylon, see:

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line/

The implementation is compatible with WebGPU.

4 Likes