javascript webgl中的屏幕到世界坐标

Question

我正在尝试使用以下代码（基于Click to zoom in 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

请在How to get object in WebGL 3d space from a mouse click coordinate查看我的类似回答。

TL;DR：我不认为你的 unproject 功能是完整的。查看jax/camera.js#L568 的源代码以了解另一种实现方式。另请参阅glhUnProjectf C implementation，前者是（松散地）基于。

最后一件事。请注意 HTML 画布元素。很多时候，它并没有定位在您认为的位置，使像素位置准确的唯一方法是向上遍历 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 的前三个坐标除以第四个坐标。