Jump to content

Billboard mode (solved)


Recommended Posts

Is billboard mode working? If so, can anyone explain what it's doing conceptually, and how I can use it for a standard billboard effect (where the mesh is something like a hit point bar or a text label, that you want to be drawn un-rotated)?

I'm using it in what seems like the obvious way. http://www.babylonjs-playground.com/#UJEIL#0  But as shown, meshes rotate based on the relative vertical angle between them and the camera.

Is something broken, or is that not how you're meant to use it?

Link to comment
Share on other sites

Well, basically and whatever the mean used (billboard, lookAt(), rotationFromAxis() ), if you want to rotate the mesh in the World space, you need to describe your rotation constraints. Ex : the mesh z-axis must be the mesh-cam axis, the mesh y axis must be in the plane cam_axis O Y_world_axis, etc (or not). Those are your own choices according to the liberty you want to let to the camera movements. The more camera movement possibiliies, the less rotation constraints possible (or the more "unexpected" mesh rotations necessary).

The other way would be to quit the 3D world and to project directly your mesh in the 2D projected space, what sprites and canvas2d do... but they only manage planar meshes (sprite quads or canvas quad) afaik. I'm afraid there's no provided way to display directly a 3D mesh in the 2D space.

I personally would define my own constraints along the mesh local system : how should the mesh local x,y,z axis be set from the current camera position ?

And then I would just define from the camera and mesh positions these 3 orientated axis with simple cross products (say mesh z axis is the mesh-cam vector) and use RotationFromAxis() to compute the required mesh rotation : https://github.com/BabylonJS/Documentation/blob/master/content/overviews/Standard/How_Rotations_and_Translations_Work.md

(if it works ...)



Link to comment
Share on other sites

Erm, I seem to be speaking greek here. :huh:  Let me take another stab at it.

I know that it's possible to achieve many kinds of rotations, according to many kinds of constraints. I'm asking about the specific kind of rotation where a mesh is rotated towards the camera on all its axes. Like the green plane in this demo.

What I'm asking is:

  • Isn't BILLBOARD_ALL meant to do something like this?
  • If not, what is BILLBOARD_ALL doing?
  • Also if not, is there a built-in way of getting a standard billboard effect?


Link to comment
Share on other sites

Hey DK,

Thanks for looking at this. The current fix is definitely not right though. I think the billboard handling is reusing Tmp.Quaternion[1] without zeroing it first, which is leading to weird behavior where the behavior of each mesh depends on the billboard mode of previous meshes.

Demo: http://www.babylonjs-playground.com/#UJEIL#6 - uncomment lines 27-29 to see what I mean.

I'm trying to check if the behavior is right otherwise, but it's very hard to test in the current state.

Link to comment
Share on other sites

This seems like a problem crying out for a test suite, so I tried making one:


The red boxes have the four main billboard modes, and the blue boxes are manually rotated to what I would naively expect to be the correct behavior of that billboard mode. (Also includes a temp workaround for the reused quaternion issue noted above.)

I hope this helps make clear what I'm asking, and what I'd expected the behavior to be. Please note that I'm no expert on this, my expectation could be wrong! If so, somebody please jump in.

Link to comment
Share on other sites

56 minutes ago, Deltakosh said:

This is what happens when you fix a bug between meetings :)

It should be ok now :)

Did you check the test content in my last reply? Here's an updated version, without the bug workaround: http://www.babylonjs-playground.com/#UJEIL#9

With the bug fix, modes "ALL" and "Y" are now doing what I would have expected, but "X" and "Z" aren't. Is my expectation wrong? If so, it'd be really helpful if someone comment on how.



Link to comment
Share on other sites

X is doing what it is expected to do: align around X axis: http://www.babylonjs-playground.com/#UJEIL#10 (blue is false here)

Z is correct as well (but tough to check as we cannot rotate camera on Z axis): http://www.babylonjs-playground.com/#UJEIL#11



Edit: X seems correct only on one side...Need to check more

Link to comment
Share on other sites

  • fenomas changed the title to Billboard mode (solved)

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...