3d数学:屏幕空间到世界空间

Question

在过去的 6 个小时里，我一直在尝试在我的 webgl 应用程序中实现点击，但我找不到关于这个主题的任何足够清晰的信息。

到目前为止，我想出的是伪代码：

screenSpace = mousePosition;
normalizedScreenSpace = (screenSpace.x/screen.width, screenSpace.y/screen.height);
camSpace = invertProjectionMatrix * normalizedScreenSpace;
worldSpace = invertViewMatrix * camSpace;

打印出世界空间坐标，它与场景中的其他对象不对应。我做错了什么？

Answer 1

viewProjection 矩阵将 vec3 从世界空间带到剪辑空间，因此它的逆向相反，将空间裁剪到世界空间。缺少的是 GPU 在引擎盖后面为您处理的视角划分，因此您也必须考虑到这一点。加上屏幕宽度和高度，您的屏幕将变为世界：

screenToWorld: function(invViewProjection, screenWidth, screenHeight){
    // expects this[2] (z value) to be -1 if want position at zNear and +1 at zFar
    var x = 2*this[0]/screenWidth - 1.0;
    var y = 1.0 - (2*this[1]/screenHeight); // note: Y axis oriented top -> down in screen space
    var z = this[2];
    this.setXYZ(x,y,z);
    this.applyMat4(invViewProjection);
    var m = invViewProjection;
    var w = m[3] * x + m[7] * y + m[11] * z + m[15]; // required for perspective divide
    if (w !== 0){
        var invW = 1.0/w;
        this[0] *= invW;
        this[1] *= invW;
        this[2] *= invW;
    }
    return this;
},

而反向计算：

worldToScreen: function(viewProjectionMatrix, screenWidth, screenHeight){
    var m = viewProjectionMatrix;
    var w = m[3] * this[0] + m[7] * this[1] + m[11] * this[2] + m[15]; // required for perspective divide
    this.applyMat4(viewProjectionMatrix);
    if (w!==0){ // do perspective divide and NDC -> screen conversion
        var invW = 1.0/w;
        this[0] = (this[0]*invW + 1) / 2 * screenWidth;
        this[1] = (1-this[1]*invW) / 2 * screenHeight; // screen space Y goes from top to bottom
        this[2] *= invW;
    } 
    return this;
},