More rendering

[mbasaglia]

No description provided.

[mbasaglia]

@fmalita I've added some elements from https://github.com/lottie-animation-community/docs/blob/main/Lottie_Rendering_Model.md regarding the stacking context. I'm not entirely sure the wording is correct though.

[fmalita]

I know you mentioned there is a reason for using transposed notation, and there is no "right" answer, but it does read a bit weird to me mostly because I'm so used to the row-major approach. It also diverges from the other common specs and literature:

https://en.wikipedia.org/wiki/Transformation_matrix#Affine_transformations
https://drafts.csswg.org/css-transforms/#MatrixDefined
https://www.w3.org/TR/SVG11/coords.html#EstablishingANewUserSpace

We should be able to stick to the same convention, and just invert the defined order or operations, no?

$$CTM = Translate(position) \times Rotate(rotation) \times Skew(sa, sk) \times Scale(scale) \times Translate(-anchor)$$

(FWIW, LottieAndroid and Skottie use this aproach while LottieWeb seems to use the transposed convention)

[mbasaglia]

Yeah this is what I mentioned in the call, I used the transposed version to have left multiplication

[fmalita]

"left multiplication" - you mean when mapping a point/vector (row vector vs column vector)

$$V' = \begin{pmatrix}x & y & 0 & 1\end{pmatrix} \times T$$

vs

$$V' = T \times \begin{pmatrix} x \\ y \\ 0 \\ 1 \end{pmatrix}$$

?

I don't think either of them is inherently superior, but there is an argument for the latter: consistency with other specs, especially since we are referencing them explicitly. I would find it confusing to read the CSS spec and then have to transpose everything and reverse the order when dealing with Lottie.

[mbasaglia]

It's more for composition, if the order of operations is Rotation then Translation, with left multiplication you can do RotMat x TransMat, otherwise you need to do TransMat x RotMat

[mbasaglia]

I've kept the left multiplied version but added a note on the right multiplied matrix as well

[fmalita]

"left multiplication" - you mean when mapping a point/vector (row vector vs column vector)

$$V' = \begin{pmatrix}x & y & 0 & 1\end{pmatrix} \times T$$

vs

$$V' = T \times \begin{pmatrix} x \\ y \\ 0 \\ 1 \end{pmatrix}$$

?

I don't think either of them is inherently superior, but there is an argument for the latter: consistency with other specs, especially since we are referencing them explicitly. I would find it confusing to read the CSS spec and then have to transpose everything and reverse the order when dealing with Lottie.