1。你有错字。

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,
]

这是我的图形课教授的转换矩阵的转置。在我的课堂上，翻译矩阵表示为

 [
        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

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

1 个答案:

1。你有错字。

2。 GL矩阵的列指定为行