How to calculate the rotation from the billboard picked point position?

Questions
1

hi,

i like to get the x-y pick point of a billboard plane. simple, steady plane works OK, even billboard, if the cam just pans. but it did not work on the billboard with different cam view angle. i guess, i need to calculate the camera rotation out of it, somehow?

https://www.babylonjs-playground.com/#1U9QG3

can you please help me to solve the problem? maybe there is a better way to get the click point of a billboard and i didn’t get it…

thank you in advance

2

Hello and welcome!

I’m not sure to fully understand what you need. You already have the picked point on your plane with the pointerInfo.pickInfo.pickedPoint. What else do you need?

3

ty & hello,

i need the x-y coordinates relative to the upper left corner of the clicked billboard. there will be a icon row on the billboard texture and i need to distinguish which icon got clicked.

this means, when i click the upper left corner, i expect a click point of a bit more of 0,0, when i click the lower right corner, i expect something a bit less then 4,3.

thanks again.

4

Ok so why not simply using GUI?

https://www.babylonjs-playground.com/#ZI9AK7#1

Doc: Use the Babylon GUI - Babylon.js Documentation

5

this is not working in my case. i need to keep track of used vertices, etc. i just need to subtract the rotation and don’t need to throw more meshes on the problem.

6

They are not meshes. This is pure 2D accelerated rendering :slight_smile:

7

well…

do you think, it is impossible to make the calculation? or to complicated? even more complicated as to add 5 or 6 buttons to each plane, parent them to the plane and handle several hundret planes with 5 or 6 buttons on each plane?

i think, economicaly it would be better to do the calculation instead of handle a multitude of objects.

please let me know.

8

It is not complicated :slight_smile: I just wanted to share with you other out of the box options

To get the axis aligned version of your picked coordinates, you need to transform it by the inverse of the mesh world matrix

9

here we go! maybe there is already a method or function for doing that? i bet, there is. :wink:

but this hint is worth something!

ty. and please let me know if try to re-invent a wheel here.

10

Should be close to:

var inverse = BABYLON.Matrix.Invert(mesh.getWorldMatrix());
var local = BABYLON.Vector3.TransformCoordinates(pickedPoint, inverse)
1 Like
11

this is great! i will post a solution playground for the documentation.

ty!

12

here it is, the local click point of a billboard with upper left corner as origin:

https://www.babylonjs-playground.com/#1U9QG3#1

(as simple as expected, but one need to remember it. good community in here).

ty, deltakosh.

1 Like