WebGL 代码生成与预制库相同的矩阵，但不显示相同答案

【问题标题】：WebGL code produces same matrices as pre-made library but does not display the sameWebGL 代码生成与预制库相同的矩阵，但不显示相同
【发布时间】：2014-11-15 21:07:57
【问题描述】：

我正在开发一个 3D 函数库（为了好玩）并且无法在我的代码中找到错误。从我所看到的，我的代码生成的矩阵和一个预制的库是完全一样的。我正在使用相同的顶点位置，但没有显示任何内容，这让我发疯了。

我的版本：
http://robjte.de/webgl/notworking.html
http://jsfiddle.net/uh9574z0/

预制工作版本（目标输出）：
http://robjte.de/webgl/working.html
http://jsfiddle.net/5daae976/

我已经在控制台记录了每个版本的矩阵。

主要部分（我的版本）：

var translate = [0.5, 0, 0];
var modelMatrix = identity(4);
modelMatrix.setXY(3, 0, translate[0]);
modelMatrix.setXY(3, 1, translate[1]);
modelMatrix.setXY(3, 2, translate[2]);

var eye = createVector([0, 0, 2.25]);
var focus = createVector([0, 0, 0]);
var up = createVector([0, 1, 0]);

modelMatrix = modelMatrix;
var viewMatrix = lookAt(eye, focus, up);
var projectionMatrix = perspective(canvas, 50 * Math.PI / 180, 1, 10);

主要部分（工作版本）：

// local coords -> world space
var modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.5, 0.0, 0.0));

// world space -> camera space
var eye = vec3.fromValues(0, 0, 2.25);
var lookAt = vec3.fromValues(0, 0, 0);
var up = vec3.fromValues(0, 1, 0);
var viewMatrix = mat4.create();

mat4.lookAt(viewMatrix, eye, lookAt, up);

var projMatrix = mat4.create();
mat4.perspective(projMatrix, 50 * Math.PI / 180, canvas.clientWidth / canvas.clientHeight, 1, 10);

【问题讨论】：

标签： javascript canvas matrix opengl-es webgl

【解决方案1】：

我认为您的数学库实际上并没有产生相同的结果。我使用WebGL Inspector 查看每个链接中程序的状态。有一些非常显着的差异。

【讨论】：

好的。也感谢该检查员的链接，这可能非常有用。

【解决方案2】：

我想通了。我的数组按照 GLSL 的要求按行主要顺序而不是列主要顺序。这很有帮助：Correct OpenGL matrix format?

【讨论】：

很高兴您发现了问题。仅供参考，列专业与行专业不是存储问题，而是数据如何在数学函数中使用的问题。您可以交换它们的存储方式并交换它们在数学函数中的使用方式，您会得到相同的结果。