Re: [csswg-drafts] [css-transforms] New quaternion CSS transform option (#9243)

Quaternions encode rotations only when they are normalized. Then the 4 dimensional vector looks like `[cos(phi), v  * sin(phi)`. Intuitively they encode a 3 dimensional (unit) vector that points into a certain direction and the angle around this vector. There is an extension called dual-quaternions, which also add a translational part besides the rotation in a 8 dimensional vector. I think the math there is getting a bit too heavy so that a broad audience is maybe scared - what I think many people are already of the `matrix() / matrix3d()` value.

Sure, you can use exactly the formula I already mentioned. For example to rotate 45° around the X axis, you would enter:

```
[w, [x, y, z]] = [cos(45°), [1, 0, 0] * sin(45°)]
```

which is a bit tedious in practice, but it opens a lot of benefits, some of them were already mentioned.

BTW, implementing a "trackball" is also super simple using quaternions. Maybe something I implemented here with [Trackball.js](https://raw.org/article/trackball-rotation-using-quaternions/) would be possible to implement (almost) natively in the future.

Decomposing a quat out of a rotation3d() matrix is no problem. Basically you do the same steps as usually, 1) remove tx, ty, tz from the matrix, 2) calculate the norm of the rows to get the scaling and 3) divide the matrix by these scalings to get the rotation matrix. This rotation matrix can then be translated to a quaternion, like I did here https://github.com/rawify/Quaternion.js/blob/master/quaternion.js#L1391 . Please note, the typical implementation you'll find on the internet scales the quaternions directly for a unit quaternion, which makes the code a bit unreadable imho.

I'm always available to help if you're a little rusty with the math.



-- 
GitHub Notification of comment by infusion
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9243#issuecomment-1694451942 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 26 August 2023 18:32:30 UTC