屏幕到javascript webgl中的世界坐标

Question

我试图通过使用以下代码（基于Click to zoom WebGL ）在我的数据中找到一个点（屏幕到世界坐标）：

    var world1 = [0,0,0,0] ;
    var world2 = [0,0,0,0] ;
    var dir    = [0,0,0] ;
    var w      = event.srcElement.clientWidth ;
    var h      = event.srcElement.clientHeight ;
    // calculate x,y clip space coordinates
    var x      = (event.offsetX-w/2)/(w/2) ;
    var y      = -(event.offsetY-h/2)/(h/2) ;
    mat4.inverse(pvMatrix, pvMatrixInverse) ;
    // convert clip space coordinates into world space
    mat4.multiplyVec4(pvMatrixInverse, [x,y,0,1], world1) ;

为简单起见，我设置了一系列顶点，其中z坐标始终为0：我正在绘制图形的坐标：

 0.0 0.0 0.0 1.0 1.0 0.0 1.0 0.0 0.0 0.0 1.0 0.0 0.5 0.5 0.0 

然后，我将world1中的值与我的顶点进行比较。 world1中的值与我所单击的位置不匹配。 有人能帮忙吗？

Answer 1

请参阅如何从鼠标单击坐标获取WebGL 3d空间中的对象的类似答案。

TL; DR：我认为您的unproject功能不完整。 看看jax / camera.js＃L568中的另一个实现源。 另请参见glhUnProjectf C实现 ，前一个（宽松地）基于该实现。

最后一件事。 注意HTML canvas元素。 通常，它不在您认为的位置，并且使像素位置准确的唯一方法是向上遍历DOM。 有关示例，请参见jax / events.js＃L6和jax / events.js＃L100 。 或者使用jQuery $('#canvas').offset()函数并完成它。 :)

Answer 2

通常，当您“取消投影”像[x，y，z，1]这样的剪辑空间点时，您将在从视点发出的光线上获得一个点（在您的情况下，它穿过您单击的顶点）。 z的值将确定您在该射线上的位置。 几乎可以保证您不会忘记单击的内容。

因此，您要做的就是计算该光线（例如，通过取消投影[x，y，0,1]和[x，y，1,1]之类的两个点并计算未投影点所在的线），然后测试您的哪个顶点位于该射线上。

编辑 ：另外，您还要确保已将world1的前三个坐标除以第四个坐标。