3d 数学：屏幕 space 到世界 space

Question

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

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

screenSpace = mousePosition;
normalizedScreenSpace = (screenSpace.x/screen.width, screenSpace.y/screen.height);

camSpace = invertProjectionMatrix * normalizedScreenSpace;

worldSpace = invertViewMatrix * camSpace;

打印出worldSpace坐标，与场景中其他物体不对应。我做错了什么？

Answer 1

viewProjection 矩阵将来自世界 space 的 vec3 带到剪辑 space，因此它的逆矩阵执行相反的操作，剪辑 space 到世界 space。缺少的是 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;
},

3d 数学：屏幕 space 到世界 space

3d Math : screen space to world space

javascript

math

3d

webgl

clicking