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 函数只是 set 和 return 给定矩阵。他们没有考虑以前的转换，他们没有return新矩阵。

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

WebGl - 倾斜投影

WebGl - Oblique projection

html

javascript

matrix