Javascript 我的透视投影矩阵有什么问题?
我正在使用WebGL 2。我按如下方式设置投影矩阵:Javascript 我的透视投影矩阵有什么问题?,javascript,opengl-es,webgl,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)
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,
];
我初始化它并将其传递给着色器,如下所示:
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,
];
模型如下:
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之间,它确实会被画出来,所以问题一定出在矩阵上
有人能指出这里有什么问题吗?投影矩阵从视图空间转换到剪贴空间。您已指定投影矩阵。
看 这意味着,如果X轴指向左侧,Y轴指向上方,则Z轴指向视口之外(请注意,Z轴是X轴和Y轴的叉积) 由于尚未指定从世界空间转换到视图空间的视图矩阵,因此必须在视图空间中指定坐标 反转坐标的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,
];
投影矩阵从视图空间转换到剪辑空间。您已指定投影矩阵。
看 这意味着,如果X轴指向左侧,Y轴指向上方,则Z轴指向视口之外(请注意,Z轴是X轴和Y轴的叉积) 由于尚未指定从世界空间转换到视图空间的视图矩阵,因此必须在视图空间中指定坐标 反转坐标的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,
];
gl_Position=matProj*matView*matModel*attrVertex代码>gl\u Position=matProj*matView*matModel*attrVertex代码>