# Inconsistent billboard/parenting 4.21 vs 5.27

**URL:** <https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594>\
**Category:** Questions\
**Created:** [October 8, 2022, 4:37am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594 "2022-10-08T04:37:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 8, 2022, 4:37am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/1 "2022-10-08T04:37:38Z")

</div>

repro: [https://playground.babylonjs.com/#92Y727#292](https://playground.babylonjs.com/#92Y727#292)

comment/uncomment line 39 which is the offset. Switch to 4.21, you’ll notice that  
a) the axes have changed !  
b) no worries, simply edit line 39 to `AIlabel.position.z = 0.4*100;` Now, you’ll notice the motion of the AILabel is different from 5.27 !

First noted in 5.23 and then 5.27 is still showing the same inconsistency. I can live with the axes change since its a small edit in my codes but the seasickness is making me dizzy. Was something new introduced to billboard/parenting that I missed ?

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 8, 2022, 5:29am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/2 "2022-10-08T05:29:38Z")

</div>

repro: [https://playground.babylonjs.com/#NRNBMM#533](https://playground.babylonjs.com/#NRNBMM#533)

Switch between 4.21 and latest. It seems that parenting and billboard mode has changed between 4.21 and 5.27. I guess the question is: what if I don’t want my child to be affected by the parent’s rotation while the child is in billboard mode? Is there a switch to turn it off ?

---

<div class="post-metadata">

**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\
**Post date:** [October 8, 2022, 2:24pm UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/3 "2022-10-08T14:24:35Z")

</div>

My approach would be, to create a TransformNode inbetween (because you want offset and rotation), then set node as parent of small1. At last set `node.position` to `absolutePosition` of box. This might give results you want?

PG:

> **[Babylon.js Playground](https://playground.babylonjs.com/#146I9R)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Edit: It would even work without TransformNode, but you will have to update the position manually, because of offset:

> **[Babylon.js Playground](https://playground.babylonjs.com/#146I9R%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 9, 2022, 2:18am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/4 "2022-10-09T02:18:48Z")

</div>

Thanks, there are indeed many workarounds/hacks. I dimly recall that when billboard mode was created, it was intentionally made to exclude some parent transforms. I fail to understand the application for the billboard in its current incarnation (other than some fringe use cases). Regardless, my reason for this thread is that 5.27 broke back compat. There must be a reason the team made the decision, I want to understand what it is.

It is not difficult for me to submit a PR, but I would not know why. Pls help me understand the reason.

---

<div class="post-metadata">

**Author:** ![Takemura](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/takemura/32/25836_2.png) [@Takemura](https://forum.babylonjs.com/u/Takemura)\
**Post date:** [October 9, 2022, 3:07pm UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/5 "2022-10-09T15:07:34Z")

</div>

This seems to be the reason:

> [@BillboardMode rotation bug](https://forum.babylonjs.com/t/billboardmode-rotation-bug/33908/6):
>
> PR [Fix billboard translation with parenting by CedricGuillemet · Pull Request #12984 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/12984)

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 10, 2022, 3:43am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/6 "2022-10-10T03:43:05Z")

</div>

I see now. I think there wasn’t a bug, @brightMoon use case could simply be implemented using an intermediate transform node: [https://playground.babylonjs.com/#NRNBMM#534](https://playground.babylonjs.com/#NRNBMM#534)

@cedric I presume its too late to revert the PR ? Can we have a programmatic switch to bypass/turn off whatever was added ? Do we open any can of worms if we do so ?

@Takemura Thanks for the follow-up ! On a weekend, no less !

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [October 10, 2022, 6:12am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/7 "2022-10-10T06:12:21Z")

</div>

Adding a transform can also solve the problem. However, for my demonstration, parent scaling is just a bug for billboard.

5.27 Did fix the bug.

After 5.24, the bug appeared  
[https://github.com/BabylonJS/Babylon.js/releases/tag/5.24.0](https://github.com/BabylonJS/Babylon.js/releases/tag/5.24.0)  
[https://github.com/BabylonJS/Babylon.js/pull/12984](https://github.com/BabylonJS/Babylon.js/pull/12984)

Therefore, it needs to be maintained by the official. It needs to be compatible with your and our cases at the same time

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 10, 2022, 6:52am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/8 "2022-10-10T06:52:55Z")

</div>

Lemme get your application right, you want to  
a) parent a plane to a cylinder,  
b) have the plane face the camera  
c) have the plane maintain its position and size when you scale the cylinder  
d) have the plane rotate around the y-axis when you rotate the cylinder and still face the camera ?

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [October 10, 2022, 7:08am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/9 "2022-10-10T07:08:33Z")

</div>

> [@phaselock](#):
>
> a) parent a plane to a cylinder,

no, Cylinder and icon plane have the same parent, they are a whole.

> [@phaselock](#):
>
> d) have the plane rotate around the y-axis when you rotate the cylinder and still face the camera ?

Keep it always facing the camera

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 10, 2022, 7:20am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/10 "2022-10-10T07:20:17Z")

</div>

ok, so a picture is worth a thousand words:  
a) parent a plane to a transform node, parent a cylinder to same transform node?  
b) have the plane face the camera  
c) have the plane maintain its position and size when you scale the cylinder  
d) have the plane rotate around the y-axis when you rotate the cylinder and still face the camera ?

 ![tmp](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/9/d96219b9bf02da8d7faa2b59f9766ca832b369cd.jpeg)

red dot is the transform node, blue cylinder and orange plane are parented to red dot. theta is rotation about y-axis wrt red dot ?

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [October 10, 2022, 8:03am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/11 "2022-10-10T08:03:40Z")

</div>

> [@phaselock](#):
>
> d) have the plane rotate around the y-axis when you rotate the cylinder and still face the camera ?

The cylinder does not rotate. The position of the cylinder does not change, but when the camera rotates, the plane always faces the camera

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 10, 2022, 8:27am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/12 "2022-10-10T08:27:02Z")

</div>

Like this? [https://playground.babylonjs.com/#NRNBMM#535](https://playground.babylonjs.com/#NRNBMM#535)

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [October 10, 2022, 8:39am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/13 "2022-10-10T08:39:33Z")

</div>

Yes, but I don’t think it should be assigned in real time in onAfterRenderObservable

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 10, 2022, 9:03am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/14 "2022-10-10T09:03:20Z")

</div>

That is only for demonstration purposes. If you remove it, just add  
`small1.position = cylinder.position.add(group.position);` anywhere in your main code or after you scale yr cylinder in a callback to update the new position. You’ll also realize that even if you switch to 4.21, the codes still work. Hope it helps.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [October 10, 2022, 11:21am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/15 "2022-10-10T11:21:15Z")

</div>

I believe @Cedric made some changes (but I might be mistaken). I hope he has some input about this.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 10, 2022, 1:03pm UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/16 "2022-10-10T13:03:24Z")

</div>

Before my change, only the position was forwarded from the parent to the child. An oriented parent with a billboard child could result in the child to not appear as a billboard.  
To me, billboard affect the end result. If something is billboard, then whatever his parent hierarchy is, it should appear as a billboard.  
Now with Phaselock’s PG [https://playground.babylonjs.com/#92Y727#292](https://playground.babylonjs.com/#92Y727#292)  
I understand it can break back compat.  
To fix it for everyone, I can add a static flag in TransformNode to apply Rotation . Default would be off for back compat.

---

<div class="post-metadata">

**Author:** ![phaselock](https://avatars.discourse-cdn.com/v4/letter/p/da6949/32.png) [@phaselock](https://forum.babylonjs.com/u/phaselock)\
**Post date:** [October 10, 2022, 2:17pm UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/17 "2022-10-10T14:17:57Z")

</div>

Awesome, thanks for all the hard work! Looking forward to the fix ! 🙂

My turn to hit the sack… Cheers !

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 10, 2022, 4:28pm UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/18 "2022-10-10T16:28:06Z")

</div>

> <https://github.com/BabylonJS/Babylon.js/pull/13089>
>
> Hides changes in these PRs with a flag for better back compat:
> https://github.c…om/BabylonJS/Babylon.js/pull/12984
> https://github.com/BabylonJS/Babylon.js/pull/13042

New flag added so @brightMoon , you have to add this line:

```auto
BABYLON.TransformNode.BillboardUseParentOrientation = true;

```

---

<div class="post-metadata">

**Author:** ![brightMoon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brightmoon/32/9959_2.png) [@brightMoon](https://forum.babylonjs.com/u/brightMoon)\
**Post date:** [October 13, 2022, 7:28am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/19 "2022-10-13T07:28:37Z")

</div>

> [@Cedric](#):
>
> `BABYLON.TransformNode.BillboardUseParentOrientation = true;`

Yes, it seems to have no effect

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [October 14, 2022, 11:33am UTC](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594/20 "2022-10-14T11:33:05Z")

</div>

I just checked and it works for me. Do you have more details?

[Next page](https://forum.babylonjs.com/t/inconsistent-billboard-parenting-4-21-vs-5-27/34594.md?page=2)
