Connecting two boxes with an edge and update the edge endpoints on box drags?

Questions
1

Hello again,

I have another question and i think, the community is able to give me the right hint.

I like to have two dragable objects (boxes) connected with an edge (tube). When I drag one of the boxes to a new position, I also like to keep the edge endpoints get updated.

I couldn’t find something, which point me to the right solution, thats why I set hope on the help of the community. I already made a little draft:

https://www.babylonjs-playground.com/#AYHCIP

I really appreciate any helpful hints and thank you in advance for your patience.

M.

2

Something like this but with improvements https://www.babylonjs-playground.com/#AYHCIP#1

The important parts are creating your tube as updatable and using the instance parameter

3 Likes
3

Thank you so much.

I tried a lot of stuff before but i never stumbled upon the {instance: edge} thingy.

So easy, if you know how!

Again, thank you!

M.

4

Hi M! Good to see you again.

I found a demo playground.

https://www.babylonjs-playground.com/#1VSQHF#3

It is an older playground, with older DOM pointer events, but tube-updating system is the same way.

Let’s tour it.

A tube named mesh is created in line 29.
A custom function named updatePath() is declared in lines 32-36.

In the constantly-fast-running renderLoop area (lines 46-53)… a VERY special tube-updater happens.

BREAK: You know what? Let’s just install the important parts of that OLD-STYLE playground… into your newer-style drag-behavior playground, and see if we can make it work.

https://www.babylonjs-playground.com/#AYHCIP#4

I did a LOT of adjustments on your playground… adjusting the function styles and positions within the code… and I installed the tube updater code. I put-in many comments.

Study it for a while… experiment and play… see if you like it. (I think you will). If you have questions about HOW and WHY it works, just ask… we’ll do our best.

I think you now have the most-modern version of “tube connecting two mesh” in the entire BabylonJS community. (No more old DOM event handlers like seen in that older playground. Yours is modern drag-behavior… very good. I’m book-marking it - twice.) :slight_smile:

Oh my, JohnK was faster. I thought he might be nearby and typing… I could hear his keyboard clicking. heh. Hi JK!

2 Likes
5

Thank you, Wingnut!

This is a solution I tried before.

My question now: which of the two solutions is the better one, from the performance perspective?

Sigh.

I think, Wingut’s solution gives me more freedom on how I can manipulate the edges. I really hope, that both solutions are performance like equaly.

Greetings,

M.

1 Like
6

Both solutions are actually the same solution. The playground JohnK reffed… was the same one that I reffed. Same tube-updater part.

For pointer-moving, the drag-behavior version is more performant/wiser than the older onPointerMove version, for sure. Thanks for providing that part of it, Metin. Essentially, I just merged your initial drag-behavior playground, with the playground Johnk showed us.

1 Like
7

Metin, are you concerned about wisdom and performance difference of the functions I changed (to being anonymous)?

If so, let’s wait for some more comments… because I am not a JS pro. I like anonymous functions ONLY because I think they look prettier. :slight_smile:

1 Like
8

Hello Wingnut.

No, I’m not concerned. But I don’t see the similarity in both solutions. Yours uses scene.onBeforeRenderObservable, while JohnK uses the {instance: edge} parameter. I’m not sure if both variants use the same background services…

I will experiment with both solutions. My original edges are a bit shorter and didn’t connect directly to the boxes center and my guess is, that your solution with the observer might fit better to my project…

Again, thanks for both solutions. I will let you know which version goes into the project.

Have a nice weekend,

M.

1 Like
9

Oh, I didn’t notice that. I should pay more attention. Maybe more coffee. :slight_smile: Sorry about that.

1 Like