m3.multiply returns the premultiplied rather than postmultiplied result about webgl2-fundamentals HOT 3 CLOSED

The code in the article is the same as glmatrix

https://github.com/toji/gl-matrix/blob/21b745f3a8b095c4a5304978fa8ab131b76a5f9e/src/mat3.js#L294

which is the same as glm

https://github.com/g-truc/glm

which is the same as opengl

https://www.khronos.org/registry/OpenGL-Refpages/gl2.1/xhtml/glMultMatrix.xml

It's not a bug. It's what pretty much every graphics library calls "multiply"

In glm (C++) your example of M = TRS is written as

matrix = translation * rotation * scale

The math applied is the same as in this article. The order of storage is the same as well, translation is in offsets 12,13,14 in the matrix (well, offsets 7,8 for a 3x3 matrix)

Also, the confusing part is WebGL consider rows to be columns as mentioned in the this article. No transposing is going on. Only how the data is interpreted

from webgl2-fundamentals.

Yeah, I realize now that in multiply(a, b), both a and b are treated as column-major rather than row-major. That makes the result a*b (a postmultiplied by b) as expected.

For the next person that gets tripped up here, I was thrown off because the naming of the variables is different than what you'd expect when using standard math notation, e.g. this series of variables:

    var a00 = a[0 * 3 + 0];
    var a01 = a[0 * 3 + 1];
    var a02 = a[0 * 3 + 2];
    ...

Which I assumed referenced a matrix layout like this (row-major), because usually the first subscript denotes the row and the second subscript denotes the column in math. For instance, naively you might expect a02 to select the first row and the third column:

a00 a01 a02
a10 a11 a12
a20 a21 a22

But actually the variables in the code reference a matrix layout like this (column-major):

a00 a10 a20
a01 a11 a21
a02 a12 a22

I was also thrown off because the diagrams in the articles have the rows where columns would normally be and vice versa, as you wrote about here: https://webgl2fundamentals.org/webgl/lessons/webgl-matrix-vs-math.html

Anyway closing this and thanks for the response. Hopefully the comment helps the next person who gets confused.

from webgl2-fundamentals.

Thanks. If/when I write WebGPU articles I'll try to use more "math"y diagrams and explanations and point out the "rows are columns"

In another github issue I pointed out if you want to see the rows as columns you can write it like this

const xaxis = [xx, xy, xz, 0];
const yaxis = [yx, yy, yz, 0];
const zaxis = [zx, zy, zz, 0];
const trans = [tx, ty, tz, 1];

const matrix = [...xaxis, ...yaxis, ...zaxis, ...trans];

or maybe clearer

const column1 = [
  xx,
  xy,
  xz,
  0,
];
const column2 = [
  yx,
  yy,
  yz,
  0,
];
const column3 = [
  zx,
  zy,
  zz,
  0,
];
const column4 = [
  tx,
  ty,
  tz,
  1,
];

const matrix = [...column1, ...column2, ...column3, ...column4];

which if you squint can look like columns 😅

from webgl2-fundamentals.