Javascript WebGl-斜投影

我正试图在WebGL中实现一个斜投影，但有些事情没有解决：投影看起来就像正交投影

这是设置投影矩阵的代码：

    mat4.identityMatrix(pMatrix);
    var m = mat4.createMatrix();
    var n = mat4.createMatrix();
    m = mat4.oblique(pMatrix, 15, 60);  
    n = mat4.ortho(-2.0, 2.0, -2.0, 2.0, 0.1, 100, pMatrix);
    pMatrix = mat4.matrixMultiply(m, n);

我也尝试过：

mat4.identityMatrix(pMatrix);
mat4.shearMatrix(pMatrix, degreesToRadians(15), [1, 0, 0]);
mat4.shearMatrix(pMatrix, degreesToRadians(60), [0, 1, 0]);
mat4.ortho(-2.0, 2.0, -2.0, 2.0, 0.1, 100, pMatrix);

剪切矩阵工作良好，但两个剪切的组合仅提供正交视图，第一个示例就是这样

这些矩阵是：

mat4.oblique = function(pMtrx, theta, phi){     
    if(!pMtrx){
        pMtrx = mat4.createMatrix();
    }    
    var t = degreesToRadians(theta);
    var p = degreesToRadians(phi);
    var cotT = -1/Math.tan(t);
    var cotP = -1/Math.tan(p);

    pMtrx[0] = 1;
    pMtrx[1] = 0;
    pMtrx[2] = cotT;
    pMtrx[3] = 0;
    pMtrx[4] = 0;
    pMtrx[5] = 1;
    pMtrx[6] = cotP;
    pMtrx[7] = 0;
    pMtrx[8] = 0;
    pMtrx[9] = 0;
    pMtrx[10] = 1;
    pMtrx[11] = 0;
    pMtrx[12] = 0
    pMtrx[13] = 0
    pMtrx[14] = 0
    pMtrx[15] = 1;

    mat4.transpose(pMtrx);

    return pMtrx;   
}

mat4.ortho = function(left, right, bottom, top, near, far, pMtrx){
    if(!pMatrix){
        pMatrix = mat4.createMatrix();
    }
    var a = right - left;
    b = top - bottom;
    c = far - near;

    pMtrx[0] = 2/a;
    pMtrx[1] = 0;
    pMtrx[2] = 0;
    pMtrx[3] = 0;
    pMtrx[4] = 0;
    pMtrx[5] = 2/b;
    pMtrx[6] = 0;
    pMtrx[7] = 0;
    pMtrx[8] = 0;
    pMtrx[9] = 0;
    pMtrx[10] = -2/c;
    pMtrx[11] = 0;
    pMtrx[12] = -1*(left + right)/a;
    pMtrx[13] = -1*(top + bottom)/b;
    pMtrx[14] = -1*(far + near )/c;
    pMtrx[15] = 1;

    return pMtrx;
    };

我对这件事一直不停地抱怨，看不出哪里出了问题。如蒙指教，不胜感激。

---

可以在这里找到完整的代码验证：

查看您发布的代码：

斜向

和

正交

函数只设置并返回给定的矩阵。它们不将以前的变换考虑在内，并且不返回新矩阵

因此，您正在覆盖以前的转换，并在

m

和

n

变量中存储对同一矩阵的引用

var oblique = mat4.createMatrix();
var orhto = mat4.createMatrix();
mat4.oblique(oblique, 15, 60);  
mat4.ortho(-2.0, 2.0, -2.0, 2.0, 0.1, 100, orhto);
var pMatrix = mat4.matrixMultiply(oblique, ortho);

---

非常感谢。我以前试过这个，但没用。我怀疑我的矩阵乘法可能有问题。最后，我通过制作一个定制的斜函数来解决这个问题。成功了。