Using a Gizmo in Orthographic Camera Mode (with rotation)

Questions
1

Hi all,

I’m trying to get a text plane Gizmo to work with an orthographic arc camera on a rotated mesh. I seem to lose the correct scaling of the gizmo text plane when zooming. And when I apply the rotation to the parent mesh, the billboard mode of the text Gizmo seems to break.

I’m trying to build something similar to this example (Z text character in the scene): https://playground.babylonjs.com/#P89ASS#17 - but using an orthographic mode camera.

In this playground: https://playground.babylonjs.com/#P89ASS#18 - I’ve got the ortho camera working, but the scaling of the gizmo text doesn’t work like the first example. I’m trying to get the text size to maintain 12px on the screen no matter how far you zoom. Is there something I’m missing?

There’s also an issue when I apply a rotation to the parent mesh in both playgrounds above:

Line 114: sphere.rotate(BABYLON.Axis.X, Math.PI / 2, BABYLON.Space.LOCAL)

It seems to break the gizmo billboard. Have I implemented the Billboard incorrectly?

Thanks in advance - I appreciate any help/guidance anyone can give :slight_smile:

2

@Cedric is the king of Gizmos

1 Like
3

Let me take a look.

1 Like
4

Hi @jcoop

I think you might over engineer your playground in ortho.
First thing is aligning toward the camera, this can be done without gizmo, only with billboard mode. For example like this:
Billboard Behaviour | Babylon.js Playground (babylonjs.com)

Then, when zooming in/out. I would simply apply the same delta to the mesh (or a parent transform) scaling. If view bounds is twice bigger, then scale the mesh twice bigger.

Adding a gizmo in ortho will not help because at its core, it compute the gizmo scale based on distance to eye. But in Ortho, view size doesn’t depend on camera distance but view bounds.

2 Likes
5

Hi @Cedric,

Thank you for your guidance!

I didn’t realise the gizmo relied on the camera distance. I’ll try a new approach to see how I can scale the text in the scene instead.

I’ll also try adding the pivot to the billboard, like in the example above, to see if that fixes the parent rotation issue.

Thanks for all your help :slight_smile:

1 Like