Fix rh issue with billboard (BabylonJS#16832)

Co-authored-by: David Catuhe <[email protected]>

Author: 2 people

packages/dev/core/src/Meshes/transformNode.ts

@@ -50,6 +50,8 @@ export class TransformNode extends Node {
     private static _TmpRotation = Quaternion.Zero();
     private static _TmpScaling = Vector3.Zero();
     private static _TmpTranslation = Vector3.Zero();
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    private static _TmpRHRestore = Matrix.Scaling(1, 1, -1);
 
     private _forward = new Vector3(0, 0, 1);
     private _up = new Vector3(0, 1, 0);
@@ -1206,9 +1208,16 @@ export class TransformNode extends Node {
                 const storedTranslation = TmpVectors.Vector3[0];
                 this._worldMatrix.getTranslationToRef(storedTranslation); // Save translation
 
-                // Cancel camera rotation
+                // Get camera view matrix
                 TmpVectors.Matrix[1].copyFrom(camera.getViewMatrix());
 
+                if (this.getScene().useRightHandedSystem) {
+                    // This operation is necessary to cancel out the scaling component of the matrix without decomposing it.
+                    // It's a trick to extract only the rotation part.
+                    TmpVectors.Matrix[1].multiplyToRef(TransformNode._TmpRHRestore, TmpVectors.Matrix[1]);
+                }
+
+                // This will cancel the camera rotation
                 TmpVectors.Matrix[1].setTranslationFromFloats(0, 0, 0);
                 TmpVectors.Matrix[1].invertToRef(TmpVectors.Matrix[0]);
 
@@ -1238,7 +1247,7 @@ export class TransformNode extends Node {
                 this._worldMatrix.setTranslation(TmpVectors.Vector3[0]);
             }
             // Billboarding based on camera position
-            else if (cache.useBillboardPosition) {
+            else {
                 const storedTranslation = TmpVectors.Vector3[0];
                 // Save translation
                 this._worldMatrix.getTranslationToRef(storedTranslation);

packages/tools/tests/test/visualization/ReferenceImages/rh-billboard.png

@@ -6,6 +6,11 @@
             "playgroundId": "#PDO1L6#1",
             "referenceImage": "rh-billboard.png"
         },
+        {
+            "title": "RH billboard2",
+            "playgroundId": "#QDVYS4#4",
+            "referenceImage": "rh-billboard2.png"
+        },
         {
             "title": "MSDF",
             "playgroundId": "#6RLCWP#20",