javascript - 我的透视投影矩阵有什么问题？

Question

我使用的是 WebGL 2。我按如下方式设置投影矩阵:

function ProjMatrix(width, height, near, far, fov)
{
    var ar = width / height;
    var fac = 1.0 / Math.tan(fov/2.0);

    return [
        fac/ar, 0.0, 0.0, 0.0,
        0.0, fac, 0.0, 0.0,
        0.0, 0.0, -(far+near)/(far-near), -1.0,
        0.0, 0.0, -(2*far*near) / (far-near), 0.0
    ];
}

我初始化它并将它传递给着色器，如下所示:

// set up the matrices
var matProj = ProjMatrix(canvas.width * 1.0, canvas.height * 1.0, 0.1, 100.0, 60.0*Math.PI/180.0);
dumpMatrix(matProj);
gl.uniformMatrix4fv(program.uProj, false, new Float32Array(matProj));
gl.uniformMatrix4fv(program.uView, false, new Float32Array(IdentityMatrix()));
gl.uniformMatrix4fv(program.uModel, false, new Float32Array(IdentityMatrix()));

模型如下:

var modelData = [
    -1.0, -1.0, 1.0, 1.0,   1.0, 0.0, 0.0, 1.0,
    1.0, -1.0, 1.0, 1.0,    0.0, 1.0, 0.0, 1.0,
    0.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0, 1.0,
];

每行的前 4 个数字是位置，其他 4 个是颜色。

当使用这个模型和这个矩阵时，什么也没有画出来。但是，如果我使用单位矩阵，并且坐标为 z=0 并且 x 和 y 介于 0.5 和 -0.5 之间，它确实会被绘制，所以问题一定出在矩阵上。

谁能指出这里可能出了什么问题？

Answer 1

投影矩阵从 View 空间变换到裁剪空间。您指定了 right handed投影矩阵。
参见 Understanding OpenGL’s Matrices

这意味着，如果 X 轴指向左侧，Y 轴指向上方，则 Z 轴指向视口(viewport)外(注意 Z 轴是 X 轴和Y 轴)。

由于您没有指定从世界空间转换到 View 空间的 View 矩阵，因此您必须指定 View 空间中的坐标。

反转坐标的 z 分量来解决问题:

var modelData = [
    -1.0, -1.0, -1.0, 1.0,    1.0, 0.0, 0.0, 1.0,
     1.0, -1.0, -1.0, 1.0,    0.0, 1.0, 0.0, 1.0,
     0.0,  1.0, -1.0, 1.0,    0.0, 0.0, 1.0, 1.0,
];