Billboard mode vs lookAt - how to avoid roll?

Hello all - im trying to achieve an effect where a box is always directed at the viewer, but without any rotation on its roll axis (as it will have text on it)

If i use the billboard mode, the roll is correct (ie the box/face is always upright and aligned with the screen), BUT it isnt exactly facing the screen in terms of its yaw - it appears to just be taking the camera angle and copying that, so when the box is not in the centre of the view you can see this perspective/parralax issue.

If I use the lookAt method, I get the face of the box flat on to the screen regardless of its position in the view, which is what I want, but then it will rotate and not be aligned with the screen, so any text on it would be tilted.

heres a playground showing both effects side by side: Babylon.js Playground

is there a way to combine these, to get essentially an upright square wherever its viewed on screen?

Thanks :pray:


heres an image to explain the issue - with the billboard mode cube its aligned correctly to the screen, but the angle is parralel to the camera angle not pointing at the camera, so you see the side faces. With the lookat cube its aligned face-on so appears as a sqaure, but isn’t aligned with the screen so is tilted…

been trying so many variations of rotate, rotation, rotationquaternion, matrix … but im finding it really hard to reason with :face_with_head_bandage:

I suppose you have to pass a value for the rollCor parameter of the lookAt method, but I don’t know how to calculate this value…

A bit of a cheat, but is it right?
https://playground.babylonjs.com/#EPJSQQ#2

1 Like

Thanks, but no, this is not what i need - i basically want a cube to appear as a square (so no perspective, facing the camera), perpendicular to the screen, without any tilting - like in this image:


currently if it uses billboard mode their is perspective, and if it uses lookAt there is tilting (and in your playground, there is both), but I want neither