# How to change roll of bone?

**URL:** <https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015>\
**Category:** Questions\
**Created:** [December 13, 2021, 5:14am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015 "2021-12-13T05:14:00Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [December 13, 2021, 5:14am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/1 "2021-12-13T05:14:00Z")

</div>

I have some animations that work for this avatar I built. I found another avatar with the exact same bone hierarchy but the bones had different roll values. In the animation this resulted in twisted limbs. I solved this in Blender by unparenting the armature, changing the roll of the bones (some to 0, some to -180 or 180) then re-parenting. Is there a way to do this with BabylonJS code?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 13, 2021, 4:18pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/2 "2021-12-13T16:18:53Z")

</div>

Basically bones are simple matrices. So it should be “the same”. You have to edit every bone and set the matrix to apply the the correct roll

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [December 14, 2021, 12:32am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/3 "2021-12-14T00:32:48Z")

</div>

So I just have to alter the bone’s local matrix once?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 14, 2021, 4:15pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/4 "2021-12-14T16:15:42Z")

</div>

Correct

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [December 14, 2021, 6:50pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/7 "2021-12-14T18:50:08Z")

</div>

> [@ozRocker](#):
>
> So I just have to alter the bone’s local matrix once?

Actually I think it’s the difference matrix that should be changed, not the local matrix, because if you just change the local matrix then those changes will be overwritten when you animate the bone…

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

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [December 14, 2021, 7:03pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/8 "2021-12-14T19:03:34Z")

</div>

This is good catch:)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 12, 2022, 11:47am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/9 "2022-01-12T11:47:32Z")

</div>

Hi @ozRocker just checking in, were you able to solve your problem? 😃

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [January 17, 2022, 12:23am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/10 "2022-01-17T00:23:18Z")

</div>

Not yet. Unfortunately the playground example doesn’t work for me. Applying a new rotation matrix to my avatar screws up scale and position

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 17, 2022, 1:02am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/11 "2022-01-17T01:02:44Z")

</div>

What about doing it like below to update the existing base matrix instead of replacing it? (You might have to start an animation to see the effect).

```auto
const scale = new BABYLON.Vector3();
const rotationQuaternion = new BABYLON.Quaternion();
const position = new BABYLON.Vector3();

const differenceMatrix = bone._baseMatrix;
differenceMatrix.decompose(scale, rotationQuaternion, position);

const rotation = rotationQuaternion.toEulerAngles();
rotation.y += Math.PI;
BABYLON.Quaternion.FromEulerVectorToRef(rotation, rotationQuaternion);

BABYLON.Matrix.ComposeToRef(scale, rotationQuaternion, position, differenceMatrix);
bone.updateMatrix(differenceMatrix);

```

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [January 18, 2022, 12:50am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/12 "2022-01-18T00:50:12Z")

</div>

I’ve implemented those changes and I can partially get it working.  
You can see my efforts here. This first playground is using the GLB with the original roll values. I’m attempting to untwist the bones [https://playground.babylonjs.com/#63T6K7#1](https://playground.babylonjs.com/#63T6K7#1)  
In the second playground I’m using a GLB where I corrected the roll values in Blender and it works perfectly, so this is how it should look [https://playground.babylonjs.com/#63T6K7#2](https://playground.babylonjs.com/#63T6K7#2)

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [January 18, 2022, 1:30am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/13 "2022-01-18T01:30:35Z")

</div>

This looks better [https://playground.babylonjs.com/#63T6K7#3](https://playground.babylonjs.com/#63T6K7#3) but there is still some serious warping going on. If you change the animation to “sitting.glb” you’ll notice it clearly.

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [January 18, 2022, 2:50am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/14 "2022-01-18T02:50:39Z")

</div>

I get a load error trying to use these PG links but I downloaded the models and then the code woks fine so maybe the server settings are blocking it somehow? It looks better but IDK why it isn’t working - I ran out of ideas for now but if I think of something I’ll give it another try. 🙂

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [January 18, 2022, 3:04am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/15 "2022-01-18T03:04:51Z")

</div>

Whoops! Sorry about the CORS errors. I just added an .htaccess that should fix that

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [February 15, 2022, 6:28am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/16 "2022-02-15T06:28:05Z")

</div>

When I look closely at the results of this playground I see that this warps the foot bone. If you change RotationY to RotationX or RotationZ (like here [https://playground.babylonjs.com/#BCU1XR#4770](https://playground.babylonjs.com/#BCU1XR#4770)) you’ll see that the warping is more obvious. This is the bit I’m stuck at. I cannot seem to change the roll of the bone without warping the other bones. Has anyone figured out how to not warp the other bones?

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [February 15, 2022, 12:12pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/17 "2022-02-15T12:12:17Z")

</div>

I don’t see any warping of the foot as the leg rotates. Just the ground was covering part of it before…

EDIT: oh I see, you have to start an animation to see the deformation… IDK what the fix is then, I bet @bghgary is good person to ask for help thou. 🙂

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [February 15, 2022, 8:49pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/18 "2022-02-15T20:49:53Z")

</div>

I’m not exactly sure what you are trying to do, but maybe this?

PG: [https://playground.babylonjs.com/#BCU1XR#4803](https://playground.babylonjs.com/#BCU1XR#4803)

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [February 15, 2022, 11:47pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/19 "2022-02-15T23:47:18Z")

</div>

I’m trying to permanently change the roll of the bone so it affects how its animated, but without warping the mesh. In all the examples I’ve seen, rolling the bone is fine until you run the animation. The reason I’m doing this is because I’m trying to copy an animation from one avatar to another but sometimes the target avatar has bones with different roll value. Here is an example of the problem I’m facing [https://playground.babylonjs.com/#79BG1H#2](https://playground.babylonjs.com/#79BG1H#2) Original avatar is the grey one, target avatar is the white one.

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [February 16, 2022, 2:19am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/20 "2022-02-16T02:19:36Z")

</div>

I haven’t looked at the new playground yet, but what you are doing with `updateMatrix` seems like it’s correct.

PG: [https://playground.babylonjs.com/#BCU1XR#4804](https://playground.babylonjs.com/#BCU1XR#4804)

---

<div class="post-metadata">

**Author:** ![ozRocker](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ozrocker/32/186_2.png) [@ozRocker](https://forum.babylonjs.com/u/ozRocker)\
**Post date:** [February 16, 2022, 4:37am UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/21 "2022-02-16T04:37:45Z")

</div>

This method warps the mesh. I increased the rotation a bit on your playground [https://playground.babylonjs.com/#BCU1XR#4805](https://playground.babylonjs.com/#BCU1XR#4805) Press WALK and you can see some negative side effects

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [February 16, 2022, 11:07pm UTC](https://forum.babylonjs.com/t/how-to-change-roll-of-bone/26015/22 "2022-02-16T23:07:36Z")

</div>

I tried a bunch of things, but I don’t know the right math to do this. The problem with just updating the base matrix and difference matrix in isolation is that the bone position doesn’t change. You can see this if you try to show the position of `mixamorig:RightLeg`.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/9/b9dd2cffa3e701d2a2fa9ff462a9724a09944798.jpeg)