AttachToBox/Bounding Box Strange Behavior

I’m seeing some things I do not understand when trying to use AttachToBox. In the PG I created a toolbar with some buttons, a plane to attach them to, and a bounding box. If I attach the behavior to the bounding box, the toolbar ends up where I would expect, at the top of the plane. But if I attach the box behavior to the plane (comment 79 and uncomment 80), the toolbar ends up far above the plane. This happens whether I determine the bounds using the bounding box or the plane. Indeed they are the same in terms of world bounds. However, I noticed something strange, which may be why the attach to box behavior is doing something different. When I wrap the plane with a bounding box, it sets the x, y, and z scale for the plane. The x scale is set to 0.25 which interestingly is the size of the toolbar panel, y is set to 0.44 which is the width corresponding to 0.25 height at the original plane aspect ratio, and z is set to 1000. After playing with some of the sizes for the plane, I think I see where these numbers come from. The x scale is the inverse of the width (4 became 0.25) and the y scale is the inverse of the plane height. I assume that the z scale is also the inverse of 0 or a number close to it which is leading to the large number of 1000.

Could someone explain why wrapping a plane with a bounding box changes the scale at all and why the inverse of the plane dimensions ( Is it trying to normalize the plane size to make it 1,1,1?) and why the AttachToBox behavior only seems to do the right thing when applied to a bounding box versus the actual mesh?

cc @carolhmj and @RaananW

This is actually a question for @Cedric:

The general gist is - why is there a difference between this:

Testing AttachToBox | Babylon.js Playground (babylonjs.com)

and this:

Testing AttachToBox | Babylon.js Playground (babylonjs.com)

Any why, in the 2nd playground (#3), the plane scaling.z turns to 1000

I have no idea why it’s happening. I need to investigate…

1 Like

@Cedric I think the 1000 is related to this part of MakeNotPickableAndWrapInBoundingBox, where it sets the bounding box scale to 0.001 if it is 0: Babylon.js/boundingBoxGizmo.ts at 05cfaeb1126481a66e9523a8afc1410869dde466 · BabylonJS/Babylon.js · GitHub. That feels a bit weird to me, as 0.001 isn’t that small of a epsilon…

1 Like

I think the AttachToBox behavior is always expecting a mesh that has been “wrapped” in a bounding box mesh, as it is treating the mesh scaling as its absolute size, which would only be true in that case: Babylon.js/attachToBoxBehavior.ts at 05cfaeb1126481a66e9523a8afc1410869dde466 · BabylonJS/Babylon.js · GitHub. You can see it failing to attach directly to a box too: AttachToBox | Babylon.js Playground (babylonjs.com). We could put a warning in the documentation explaining that, or we could change the behavior to fetch the mesh bounds and use that instead (which would be slower).

2 Likes

Carol, can you explain this a bit more? It seems to be related to what I am seeing which is that the scaling in x, y, and z is the inverse of the size I create the plane with, which would make the actual size 1 in x, y, and z when the scaling is applied.

I think I might understand. So the bounding box intrinsic size is 1 so you scale it to be the same size as the mesh it’s wrapping. But then you parent the mesh under the box, which would scale up the mesh, so you apply the inverse scale to keep the mesh the same size. The AttachToBox behavior then uses the scale to determine the size, so if I try to attach it to the mesh without the bounding box, it thinks its size is 1. The 1000 comes because that’s the inverse of the epsilon value. Otherwise it would divide by 0. The problem is a plane has no z extents, so that is where the zero comes from.

You got it perfectly! :smiley:

Thanks for the explanation. Not sure this will work for me then. I am using the pane to display an image from a server. So the plane gets created at scale 1 and then gets scaled according to the size of the image. Then I bake the transform into the vertices and a calculate an inverse transform. When the user changes the size using the bounding box gizmo, I multiply the original image size times the mesh scale to get the new image size. When the server sends an updated image size, I apply the inverse transform to get the scale back to 1, then I apply the updated image size, bake the transform into the vertices and get a new inverse transform. If I am understanding correctly, if I use AttachToBox to attach a GUI to my meshes, I’ll have to wrap them in a bounding box, which will alter the scale of my mesh, which in turn will make the image size I send to the server incorrect.