WebGl-倾斜投影

WebGl - Oblique projection

本文关键字：斜投影 倾斜 WebGl-      更新时间：2023-09-26

我试图在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

看看您发布的代码：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);
相关文章：