About 2D matrices about webgl-fundamentals

[greggman]

I really depends on your point of view.

There's 2 things that often get conflated

1. Interpretation order

2. Storage order

Matrices in WebGL, OpenGL and on these pages are stored in row major order.

Create a C/C++ OpenGL test, do glTranslate(11,22,33), then glGet the matrix and print it out and you`ll get

  1, 0, 0, 0
  0, 1, 0, 0,
  0, 0, 1, 0,
  10, 20, 30, 1,

That's clearly row-major storage.

This is the same in both OpenGL and DirectX. I've never worked in any code in my entire life that stored matrices in column major order. We can open the code for Unity or Unreal running in DirectX and see they all use row-major storage.

In other words

• elements 0,1,2 = xaxis
• elements 4,5,6 = yaxis
• elements 8,9,10 = zaxis
• elements 12,13,14 = translation

That is row major storage order by every computer programming book ever. Issue 2 above

The second issue is how the data is interpreted. Even though the matrices are clearly stored in row major order that's irrelevant to how multiplication works (which AFAIK is the only place row vs column interpretation matters). It's up to the the implementation of matrix * matrix and matrix * vector on how to use the data.

If we look at typical math book it will show a diagram like this for matrix * vector

   matrix     vector
 +---------+   +---+
 | a e i m |   | x |     = x * a + y * e + z * i + w * m 
 | b f j n |   | y |     = x * b + f * f + j * g + w * n
 | c g k o |   | z |     = x * c + y * g + z * k + w * o
 | d h l p |   | w |     = x * d + y * h + z * l + w * p
 +---------+   +---+

But you can clearly see that based on that diagram and the fact that the matrices are stored in row-major storage, the math implemented in GLSL and in OpenGL's math library is not using them as they are stored if you want that result.

So by the math definition it's using the data in a column major way but in the computer science definition the data is stored row-major

or something like that 😅

[PrincessGod]

@greggman , thanks , that's clear enough.
But what I was confused about is the transformation order.
In the article, you apply matrix in this order

// Compute the matrix
var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
matrix = m3.translate(matrix, translation[0], translation[1]);
matrix = m3.rotate(matrix, angleInRadians);
matrix = m3.scale(matrix, scale[0], scale[1]);

You can see it's something like var matrix = projMatrix * transMatrix * rotateMatrix * scaleMatrix right?
If put these matrices in shader, will be something like
...
var matrix = projMatrix * transMatrix * rotateMatrix * scaleMatrix;
gl_Position = vec4((matrix * vec3(a_position, 1)).xy, 0, 1);
...
So it should be scale first, then rotate, transport, projection. Am I right? And your explanation is the opposite order. Can you help me out? Thank you.

[greggman]

Maybe I missing what your saying.

The code above is in the same order in JS and GLSL and you'll get the same results in both

JS

var matrix = m3.projection(gl.canvas.clientWidth, gl.canvas.clientHeight);
matrix = m3.translate(matrix, translation[0], translation[1]);
matrix = m3.rotate(matrix, angleInRadians);
matrix = m3.scale(matrix, scale[0], scale[1]);

GLSL

mat4 matrix = projMatrix * transMatrix * rotateMatrix * scaleMatrix;

Is there somewhere I'm staying it's the opposite?

It goes both ways. You can look at it as

• first you scale the position

   scaledPosition = scaleMatrix * position
  

• then you rotate the scaledPosition

    rotatedPosition = rotateMatrix * scaledPosition
  

• then you translate the rotatedPosition

    translatedPosition = translateMatrix * rotatedPosition
  

• then you convert the translatedPosition to clipspace

    clipspacePosition = projectionMatrix * translationPosition
  

But most people read left to right. In that paradigm it as described in the article

• projMatrix

  converts clipspace to frustum space

• transMatrix

  moves the space

• rotateMatrix

  rotates the space

• scaleMatrix

  scales the space

It's that final space your positions exist in.

Maybe I should add the first explanation as well?

[PrincessGod]

@greggman , that's exactly what I want, maybe I am not good at English expression 😃.
I always use the first sequence to think about it, and now I understand it at all. And translation is base on deep understanding I think.
Thanks again. 🍻

[greggman]

I added the first explanation to that article. No diagrams yet.

[PrincessGod]

@greggman ，I saw it, and I will update the article after you updated.