Javascript: Issue With 360deg Rotations And Matrix Composition

I asked previously about the proper function for perspective (to compute and compose a matrix), now I'm facing an older problem and I wasn't expecting this to be so much of an issu

Solution 1:

The issue here is the precision supported by the CSSMatrix polyfill's code. It supports upto 6 decimals and truncates any lesser value (positive or negative) to 0 i.e. anything less than 0.000001 will be converted to 0.

In your fiddle, if you just apply the rotateX(360deg) transform, it converts to this matrix3d:

matrix3d(1, 0, 0, 0, 0, 1, -2.44929e-16, 0, 0, 2.44929e-16, 1, 0, 0, 0, 0, 1)

The polyfill converts -2.44929e-16 and 2.44929e-16 to 0 thereby generating this matrix3d:

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

Increasing the decimal precision in the polyfill's code fixes this issue. Change line 35 from: CSSMatrix.SMALL_NUMBER = 1e-6;

to

CSSMatrix.SMALL_NUMBER = 1e-20; // 20 decimal point precision

I've fixed that in this fiddle.

---

Edit: Regarding the question in the comment about different matrices being generated when applying rotate along 2 axes: This is because the compose function used in the fiddle applies rotation along all axes at the same time - which would be equivalent to a single rotate3d(x, y, z) call.

But the transforms applied via CSS in the fiddle rotate on the X and Z axes separately which would be equivalent to applying rotate(x, 0, 0) followed by rotate(0, 0, z).

This can be verified by changing the compose function in the fiddle and comparing the matrix3d generated by the polyfill vs the one generated by the browser.