Draw a line between two positions with a sprite

[fenomas]

This is a math question, or maybe a question for someone who understands how billboard modes work under the hood.

Given a long thin mesh with a texture of a chain, how can I position it so it looks like a chain stretches between two arbitrary positions?

Here is a playground that shows sort of what I'm shooting for (until you rotate the camera, anyway). Just imagine the mesh in the middle has a texture on it like a chain or a rope. The main point is to have the "chain" mesh appear to stretch from one position to the other, while keeping its planar surface facing the camera (so that it doesn't get thin and disappear depending on the viewing angle).

My instinct was this might be possible with some combination of rotation and billboard modes. If not, I guess it will be necessary to take the camera's position into account?  Or if there's a simpler way to achieve what I want, that'd be great.

Thanks!

[jerome]

Imho, RotationFromAxis() would be an easy way to go : http://doc.babylonjs.com/overviews/How_Rotations_and_Translations_Work#generating-a-rotation-from-a-target-system

(BTW, I need to fix the PG example)

You could have something like this : http://www.babylonjs-playground.com/#VYM1E#8

Note that this example uses a Ground mesh what is originally in the xOz world plane 

 

So in your case something like that with a Plane mesh (originally in the xOy world plane) : http://www.babylonjs-playground.com/#2EEK4O#1

I just did an extra cross product to have a +PI/2 local rotation

Hope it helps... this needs then to be optimized with no local vector allocation because it's called in the render loop (up to you )

 

[EDIT] the same with the light located at the cam position so it's more visible http://www.babylonjs-playground.com/#2EEK4O#2

[JohnK]

@fenomas this is a different way of drawing a chain between two points but doesn't involve sprites. A chain between two points form a catenry curve, so I made a function that creates a  tube following a catenry path. I also played with the UV scales to get a more rope like effect. Different texture could give a chain like effect. Hope it is of some use to you.

http://www.babylonjs-playground.com/#KMJCI#2

[Wingnut]

Hi guys.  This reminds me of Grayfox's and Alby's cylinder-between-two-points issue that we hammered to death (literally) about a year ago. 

http://www.html5gamedevs.com/topic/9015-cylinder-between-two-points/

Alby continued in another thread... trying to get text on a plane between 2 points, with billboarding and/or lookAt, and we never succeeded.

Alby's LONG "box rotation" thread - http://www.html5gamedevs.com/topic/12481-box-rotation/

Jerome's talk about something related to that - http://www.html5gamedevs.com/topic/14309-meshlocateorigin-axisx-axisy-axisz/

I don't know if any of that will help, but maybe.  It seems I remember a way to ONLY billboard on a specific axis, and I suspect it was talked to death in Alby's thread... but again, little success came from Alby's topic... after what seemed like 100 playground tests.  Shortly after that, Alby reported that he was sick, and then we never heard from him again.  Rest in peace, Alby, if you've moved-on to bigger frameworks.    I miss him.

How 'bout a standard incandescent light... on/off pull-chain, made of gold spheres butted against one another?  Would THAT kind of chain work for you, Fen?

I used to have some physics link demos that used ball-chains... http://playground.babylonjs.com/#A4HF3  ...but they are failing these days.  It's ok, you know what a ball chain looks like... without needing to see a physics demo that uses one.  Be well, guys.

[adam]

Interesting:

https://en.wikipedia.org/wiki/Catenary

I wanted to see how it looks when animated: 

http://www.babylonjs-playground.com/#KMJCI#6

[fenomas]

On 6/25/2016 at 5:51 PM, jerome said:

[EDIT] the same with the light located at the cam position so it's more visible http://www.babylonjs-playground.com/#2EEK4O#2

Hey folks, thanks for the various answers! Jerome's answer above is exactly what I was going for.

Except for one small problem: it doesn't work in the general case   It took me a long time to figure out why it works in the demo but not in my actual app, but it turns out to depend on the camera more or less looking at the origin. If you transpose stuff out a bit the effect breaks (demo)

The bug comes from using the camera's global position as one of the axes for rotation. The fix is, crossing the (p1 -> p2) vector with the (p1 -> camera.position) vector gets the correct axis2, and then crossing that with axis1 gets the correct axis3.

Fixed version: http://www.babylonjs-playground.com/#2EEK4O#4

Thanks for your help!  

[jerome]

yep, you're right : in my demo, I had the (implicit) assumption that the cam looked at the world origin and the mesh was set there also.

nice fix :-)