Billboard mode (solved)

[fenomas]

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?

[aWeirdo]

Hi @fenomas

billboard_all as you pointed out rotates slightly as you move the camera,

However, if your camera doesnt rotate, you can you use billboad_x or billboard_z depending on your cameras angle,

Otherwise you should look at canvas2d. 

[fenomas]

I'm not looking for a whole new mechanism like Canvas2D, just a way to face an existing mesh towards the camera.

[jerome]

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 ...)

 

 

[fenomas]

Erm, I seem to be speaking greek here.   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?

Thanks!

[GameMonetize]

I think there is a bug  Let me check

[GameMonetize]

Bug confirmed and fixed..you pg should work now (just clear your cache)

[fenomas]

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.

[fenomas]

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

http://www.babylonjs-playground.com/#UJEIL#8

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.

[GameMonetize]

This is what happens when you fix a bug between meetings

It should be ok now

[fenomas]

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.

Thanks!

 

[GameMonetize]

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

[GameMonetize]

Ok should be good now. I updated your test scene to add test for parenting as well:

http://www.babylonjs-playground.com/#UJEIL#13

Thank you very much for your help

The BillboardZ is still a bit weird but not a priority

[fenomas]

Thanks DK!

I have to admit, as this thread has gone on I've understood less and less what's going on behind the scenes, but I hope we've arrived at the right result.

Also the testbed PG should be a good resource for any future tweaks.

[GameMonetize]

No worry we did a good team here!