javascript - WebGl - 倾斜投影

Question

我正在尝试在 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);

剪切矩阵工作得很好，但是两个剪切的组合只能给出正交 View ，就像第一个示例一样。

矩阵是:

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;
    };

我在这个问题上上下了不少功夫，但看不出我哪里出了问题。非常感谢您的建议。 完整的代码版本可以在这里找到:https://gist.github.com/Carla-de-Beer/b935da9a7317f8444495

Answer 1

看看您发布的代码:oblique 和 ortho 函数只是设置并返回给定的矩阵。他们没有考虑之前的转换，也没有返回新的矩阵。

因此，您将覆盖之前的转换，并将对同一矩阵的引用存储在 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);