我的透视投影矩阵出了什么问题?

时间:2018-03-16 17:20:27

标签: javascript opengl-es webgl

我正在使用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之间,则它会被绘制,因此问题必须与矩阵有关。

有人能说出这里可能出错的地方吗?

1 个答案:

答案 0 :(得分:3)

投影矩阵从视图空间转换为剪辑空间。您已指定right handed投影矩阵 见Understanding OpenGL’s Matrices

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

enter image description here

由于您尚未指定从世界空间转换为视图空间的视图矩阵,因此您必须在视图空间中指定坐标。

反转坐标的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,
];