Connecting two meshes with a dynamic connector

Thinking about how to implement gource with BabylonJS and in 3d.

Is there a straightforward way to connect two meshes and make sure that when either moves the connector adjusts?

Is this attempt the best way to go about it?

I think that’s an efficient way of doing that. I wouldn’t update the connection on each frame though, as it won’t scale to a very large set of connectors. So, in general, only run the updateConnector function when a specific node has moved.

Oherwise, just a suggestion, it would be more memory and garbage-collection optimized to have updateConnector implemented this way:

let direction = BABYLON.Vector3.Zero();
    function updateConnector() {
        sphere02.position.subtractToRef(sphere01.position, direction);
        var distance = direction.length();
        direction.scaleInPlace(0.5);
        sphere01.position.addToRef(direction, connector.position);
        connector.scaling.y = distance / 4;
        var angle = Math.atan2(direction.z, direction.x);
        connector.rotation.y = -angle;
        connector.rotation.x = Math.PI / 2;
    };
1 Like

Here is the gource evolution of the BabylonJS main repo:

4 Likes

I love what’s happening in your video. It’s pretty.

1 Like

That is so fun! Saw some names I have not seen in a really long time and got to watch my name bobble around for a bit! Pretty cool animation.

1 Like

You were there, at 0:32!
It’s like seeing life evolving, isn’t it?

It is super cool, and its interesting that it used both my alias and my legal name at times wonder why it picks between the two?

this is a awesome visualization tool, gonna for sure fire one of these up for another project!

It’s likely because the repository doesn’t have a .mailmap file to merge commits by author variations. You’ll also probably appear twice on the contributors’ page:

I would suggest greased line for this ?

cc @roland, the master mind behind greased lines!

1 Like

If you decide to use GreasedLine the fastest way to update the position of points of the line is to modify the offset table:

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

I’ve created a PG to demonstrate how can you use the offsets property to reposition the points of the line but I am facing an issue here as you can see here, the line starts to disappear:

After thinking a bit about what causes the issue I’ve realized that offsets must be calculated separatelly for each vertice taking the width and the rotation of the line into account. and that will be quite CPU consuming.

So you can use setPoints to update the line (see the PG below) for now. However this recalculates all buffers (it must do it because the number of points can be changed) every frame and that’s BAD… I think there should exist a function for example called updatePoints for fast updating when the number of points are not chaning only the positions of the points. I will have a look at the code whether I could implement it. What do you guys think about it?

:vulcan_salute:

2 Likes

Amazing, playing with it now

1 Like

Update on the progress made with this project:

2 Likes

For future reference, conecting two points on the surface of two meshes:

1 Like