gfxfundamentals / webgl2-fundamentals

WebGL 2 lessons starting from the basics
https://webgl2fundamentals.org
BSD 3-Clause "New" or "Revised" License
1.72k stars 217 forks source link

Incorrect matrix component order #33

Open max-ch9i opened 6 years ago

max-ch9i commented 6 years ago

On the page https://github.com/greggman/webgl2-fundamentals/blob/master/webgl/lessons/webgl-2d-matrices.md the rotation matrix generator is incorrectly defined as:

  rotation: function(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);
    return [
      c,-s, 0,
      s, c, 0,
      0, 0, 1,
    ];
  },

This results in rotation in the reverse direction. Matrix components in GLSL are defined in column-major order, so the correct definition should be:

  rotation: function(angleInRadians) {
    var c = Math.cos(angleInRadians);
    var s = Math.sin(angleInRadians);
    return [
      c, s, 0,
      -s, c, 0,
      0, 0, 1,
    ];
  },
stefnotch commented 6 years ago

https://github.com/greggman/webgl2-fundamentals/blob/1f7d9ffa675b242be07475f042cf11a30471aaa9/webgl/resources/2d-math.js#L169

^Same issue

greggman commented 6 years ago

Sorry everyone. You are right.

Unfortunately it's not as simple as making that one change. I have to go fix all the samples using these libraries on both webgl2 and webgl1. I also have to rename the libraries to like 2d-math-v2.js so as not to break anyone using the old versions (since people link directly). The short of that is I've just been too lazy to fix since it will talk a while.

It's on my todo list but no ETA ATM