WebGL中mat4矩阵表示是否与数学矩阵表示一致？

首先直接给你结论：你的实测结果是对的，文档描述也完全正确——问题出在你对GLSL中mat4构造函数参数顺序的理解上，它是按列主序存储的，所以你写的参数对应的数学矩阵是你预期矩阵的转置。

下面一步步拆解原因：

1. 列主序存储的本质 #

OpenGL ES（包括WebGL）中的矩阵遵循列主序存储规则，简单来说：
当你用mat4(a0, a1, a2, a3, b0, b1, b2, b3, c0, c1, c2, c3, d0, d1, d2, d3)构造矩阵时，这些参数是按列依次填充到数学矩阵中的，最终对应的数学形式是：

[ a0  b0  c0  d0 ]
[ a1  b1  c1  d1 ]
[ a2  b2  c2  d2 ]
[ a3  b3  c3  d3 ]

而不是我们直觉里按行填充的顺序，这是很多开发者初次接触时容易踩的坑。

2. 你的构造参数对应的实际矩阵 #

你定义的矩阵：

mat4 matrix=mat4( 1.0, 1.0, 0.0, 0.0, 0.5, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0);

按列主序展开后，数学上的矩阵是：

[ 1.0  0.5  0.0  0.0 ]
[ 1.0  0.0  0.0  0.0 ]
[ 0.0  0.0  1.0  0.0 ]
[ 0.0  0.0  0.0  1.0 ]

这正好是你理论计算时预期矩阵的转置，这就是为什么你需要假设矩阵被转置才能解释实测结果。

3. 验证实测结果的合理性 #

用这个实际矩阵乘红色顶点vec4(-1.0, 0.0, 0.0, 1.0)（GLSL中matrix * vec4是矩阵乘列向量，符合线性代数规则）：

• x分量：1.0*(-1) + 0.5*0 + 0.0*0 + 0.0*1 = -1.0
• y分量：1.0*(-1) + 0.0*0 + 0.0*0 + 0.0*1 = -1.0
• z分量：0.0*(-1) + 0.0*0 + 1.0*0 + 0.0*1 = 0.0
• w分量：0.0*(-1) + 0.0*0 + 0.0*0 + 1.0*1 = 1.0
  完全和你实测的(-1,-1,0,1)一致，证明实测结果是符合列主序规则的。

4. 如何构造你预期的矩阵 #

如果你想得到理论计算中的矩阵：

[ 1.0  1.0  0.0  0.0 ]
[ 0.5  0.0  0.0  0.0 ]
[ 0.0  0.0  1.0  0.0 ]
[ 0.0  0.0  0.0  1.0 ]

需要把参数按列的顺序传入构造函数，也就是：

mat4 matrix = mat4(
    1.0, 0.5, 0.0, 0.0,  // 第一列元素
    1.0, 0.0, 0.0, 0.0,  // 第二列元素
    0.0, 0.0, 1.0, 0.0,  // 第三列元素
    0.0, 0.0, 0.0, 1.0   // 第四列元素
);

用这个矩阵乘红色顶点，就能得到你预期的(-1, -0.5, 0, 1)。

总结 #

文档提到的“OpenGL以列主序存储矩阵”是核心原因，你的实测结果和文档描述并不矛盾——只是你最初构造矩阵时误用了行主序的参数顺序。在WebGL/GLSL中，只要记住矩阵构造参数是按列填充，矩阵乘向量是矩阵 * 列向量，就能和线性代数规则对应上。

内容的提问来源于stack exchange，提问作者Сергей Иванопуло