Scale child meshes with maintained aspect ratio

[Hersir 51]

Hi,

trying to achieve mesh scaling from parent but with maintained aspect ratio, so if parent is scaled, child mesh will scale together but will maintain aspect ratio.

would it be possible to do that by overriding `computeWorldMatrix` or there is better way to override default scaling behaviour ?

I tried to override `_afterComputeWorldMatrix` to update world and local matrix, but no luck , probably doing something totally wrong  

 protected _afterComputeWorldMatrix() {
        super._afterComputeWorldMatrix();
        const min = Math.min(this._worldMatrix.m[0], this._worldMatrix.m[10]);
        this._worldMatrix.m[0] = min;
        this._worldMatrix.m[10] = min;
        this._localWorld.m[0] = min;
        this._localWorld.m[10] = min;
    }

thanks for any hint

[Deltakosh 4,307]

Hey! what do you mean by maintain aspect ratio? Like if I scale the parent with (1,5,1) the children should scale with what?

[Hersir 51]

Hey @Deltakosh, by that I mean if there is square plane with scaling (1,1,1) and it has child  square box scale (1,1,1), if plane is scaled box should still be square so it should react to changes on both axes (x,z) if just 1 axis is scaled it should not change.

Have small PG with example, if commented line is added, child box should still be square (scaled by smallest world scale ratio from x,z ?)

[Hersir 51]

Made some POC here just position is off (moved up from plane)

[BartW 0]

I would extend TransformNode as a container and add the plane and cube to it. This container should never actually scale itself but assign scales and positions to its child meshes..

So if you add a custom scale property or overwrite its scaling property and calculate the new positions and scales of the submeshes you would not have to mess with the worldMatrix per mesh.

Would that work for you?

[JohnK 991]

In this PG I made some changes. I changed the plane to a ground, simply because rotating the plane swapped reference to y and z when scaling plane and hence box and this confused my simple brain.

So a scaling of the ground by (2 , 1,  3) must scale the box also by (2, 1,  3) giving a box of course of width 2, height 1 and depth 3. So if you want a face (say the font and back faces) to be square then the height has to be 2 also, so the above PG scales the child's y by 2, since the scaling is carried out relative to the ground and the child is at 0.5 relative to the ground the child needs re-aligning to the ground.

A simpler way, given that you know you want a square face is to adjust y from the start as in this second PG

[Hersir 51]

@JohnK thanks for input, but looks like I have not explained correctly, I needed to scale parent lets say for (4, 2, 2) but child would scale all sides by 2 (min scale) and would remain square box not becoming rectangle box, like in my POC

[JohnK 991]

By square box I presume you mean cube (width, height and depth all the same), and by rectangle box a cuboid (width, height and depth not all the same)

Something like http://www.babylonjs-playground.com/#408PC9#7

[Hersir 51]

@JohnKYes, you are right, (should chose words more careful), looks close to what, need, will see how I can automate it, as I have approx 60 such children and need to animate parent scaling, so children will need to be updated during animation.

[adam 754]

The bone scale method might be helpful:

https://github.com/BabylonJS/Babylon.js/blob/master/src/Bones/babylon.bone.ts#L519

[Hersir 51]

Ok made working using @JohnK proposide solution, just added listener on parent for `onAfterWorldMatrixUpdateObservable`, cached scaling and looped through children and applied scale fix. Just 1 thing is that children can be rotated, any good ways to apply proper scaling on rotated meshes, as axes are fliped, on way what I thought was to wrap them in transform node that is not rotated and scale it but maybe there are other means to calculate proper scaling for rotated meshes ?

 

Big thank for help

[adam 754]

4 hours ago, Hersir said:

Just 1 thing is that children can be rotated, any good ways to apply proper scaling on rotated meshes

Look at bone scale code.  

Edit: Eh,  I thought about it some more and the lack of local matrix might be a problem. 

[adam 754]

I just found this function I wrote a while ago for dealing with this issue:

https://www.babylonjs-playground.com/#28IXSE#36

clicking the PG parents box1 to box2 using the parentMesh function.