WebGL matrix example is using atypical right-mul convention

HaluanUskoa commented 3 days ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web#translation_matrix

What specific section or headline is this issue about?

Translation matrix

What information was incorrect, unhelpful, or incomplete?

MDN describes the translate matrix with the following code:

let x = 50;
let y = 100;
let z = 0;

let translationMatrix =
[
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    x, y, z, 1
];

The specification on W3 describes the translation matrix as:

[
    1, 0, 0, x,
    0, 1, 0, y,
    0, 0, 1, z,
    0, 0, 0, 1
];

What did you expect to see?

The two sources describe the same matrices for rotate and scale, but the provided translate matrices are different. Which is correct? Based on what I've looked up, I think MDN is incorrect.

It would also be helpful if the MDN page included the perspective matrix as on W3.

As an additional note, it would be helpful if both pages included the transform-origin matrix.

Do you have any supporting links, references, or citations?

https://www.brainvoyager.com/bv/doc/UsersGuide/CoordsAndTransforms/SpatialTransformationMatrices.html

https://gamedev.stackexchange.com/a/124669

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web#translation_matrix

https://www.w3.org/TR/css-transforms-2/#mathematical-description

Do you have anything more you want to share?

No response

Josh-Cena commented 3 days ago

It is really confusing but it actually works. If you look closely at multiplyMatrixAndPoint, we are doing a right-multiplication and treating the point as a row vector, rather than the typical left-multiplication on a column vector. To be fair this probably makes more sense when written down as code, since you write an array horizontally, but maybe we should explain that? I'm not sure.

HaluanUskoa commented 3 days ago

@Josh-Cena Got it, that makes sense. Actually in the MDN page, the array is written horizontally, but I changed the formatting for the post. I think it would be helpful to explain it! Maybe a small note in the Translation matrix section that mentions this. For my part, I was using the page as a reference for what the matrices should look like, and hadn't actually looked too much into the multiplication methods MDN was using, so I missed that.

mdn / content