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

剪力矩陣可以很好地工作，但是兩個剪力的組合只能給出正視圖，如第一個示例所示。

矩陣為：

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