为什么这个简单的翻译矩阵不起作用

Question

首先，这是翻译的工作版本：https://jsfiddle.net/zhenghaohe/5yc8exo3/4/

(代码取自https://webgl2fundamentals.org/webgl/lessons/webgl-2d-matrices.html)

在代码的工作版本中，翻译矩阵是

[
    1, 0, 0,
    0, 1, 0,    
    tx, ty, 1,
]

这是我的图形 class 中教授的平移矩阵的转置。在我的 class 中，翻译矩阵表示为

 [
        1, 0, tx,
        0, 1, ty,    
        0, 0, 1,
    ]

我试图找出差异的来源。所以我决定改变工作版本的顶点着色器，不再像这样从 js 文件发送转换矩阵

uniform mat3 u_matrix;
void main() {
  // Multiply the position by the matrix.
  vec2 position = (u_matrix * vec3(a_position, 1)).xy;
}

直接在顶点着色器中构造平移矩阵

uniform float tx;
uniform float ty;
void main() {
 mat3 u_matrix = mat3( 1, 0, tx,
            0, 1, ty,
            0, 0, 1,);
 vec2 position = (u_matrix * vec3(a_position, 1)).xy; 
...}

这里是修改后的版本https://jsfiddle.net/zhenghaohe/5yc8exo3/

但是似乎有一个错误，

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
webgl-utils.js:67 *** Error compiling shader '[object WebGLShader]':ERROR: 0:18: ')' : syntax error

任何人都可以指出修改后的代码版本错误的地方以及为什么存在翻译矩阵的差异？

Answer 1

您有 2 个问题

1。你打错了。

正如@Rabbid76 指出的那样

这个

 mat3 u_matrix = mat3( 1, 0, tx,
            0, 1, ty,
            0, 0, 1,);   // <=== remove the ending comma

2。 GL 矩阵的列指定为行

所以要么改成这个

 mat3 u_matrix = mat3(
     1,  0,  0,
     0,  1,  0,
    tx, ty,  1);

或者这个，如果它不那么令人困惑的话

 vec3 col0 = vec3(1, 0, 0);
 vec3 col1 = vec3(0, 1, 0);
 vec3 col2 = vec3(tx, ty, 1);

 mat3 u_matrix = mat3(col0, col1, col2);

见https://webgl2fundamentals.org/webgl/lessons/webgl-matrix-vs-math.html

为什么这个简单的翻译矩阵不起作用

Why is that this simple translation matrix doesn't work

javascript

graphics

webgl

webgl2

1。你打错了。

2。 GL 矩阵的列指定为行