作者oopFoo (3d)
看板GameDesign
标题[程式] 3d picking & marquee selection
时间Fri Sep 11 14:39:15 2020
这几天因为想做滑鼠框选（box(rect) selection）。但太久没做了，有点忘了，就google一下，不知是否我google fu能力不行，找出来的solutions都很xxx。所以来分享一下以前我学到的方法。
https://answers.unrealengine.com/questions/85782/get-actors-in-selection-rectangle-doesnt-work.html
ue4的blueprint的方法是把物件的bbox project到2d screen，这方法效率差而且要多写程式容易出错。
http://wiki.unity3d.com/index.php/SelectionBox
网路找到的unity的方案大概都跟这个差不多，用一个点project到2d screen，这个效率差而且精准度不好，不管物件多大都只用一个点来比较。
下面是我以前学到的方法-----------------------
因为3d引擎会做各种Frustum culling的优化，所以最好的方法是把2d的rect转成3d的frustum，用这frustum来选取物件。
我们先从3d picking开始，picking要计算ray，origin.那要如何算ray.
记得我们有两种projection，一个是perspective，一个是orthographic.
https://i.imgur.com/czNf4GM.png
1)投射滑鼠2d位置到near plane再减camera的位置得到ray是只能用在perspective projection。所以第一个方法不好
2)但我们如果投射2d到near和far planes的话，用far-near，这得到的ray与origin(near)，orthographic就也可以用。
我是用gluUnProject()来投射pick的点到near和far planes。near plane z=0, far plane z=1。
https://www.opengl.org/archives/resources/faq/technical/selection.htm
glu的source code在
https://gitlab.freedesktop.org/mesa/glu
那框框的selection要怎麽转成frustum，很简单，2d方框的4个点我们投射8次(near,far)，这样我们就有8个点了，这8个点就是我们的selection frustum。
然後看看threejs就是用第一个picking的方法，所以orthographic selection有问题，必须另外写。东西很简单的变很复杂。
https://github.com/mrdoob/three.js/issues/16733
再看以前gpwiki的范例，几乎都对了，但为什麽4个点只投射2个点?从投射的4个点去建立另外4个点几乎确定是错的。
https://web.archive.org/web/20100613163527/http://www.gpwiki.org/index.php/Object_selection_lasso
心好累，网路找不到简单，好用的范例。
--补一下我的code---
function selectionBox(start, end) {
// sort first
let left = start.x;
let right = end.x;
if (start.x > end.x) {
left = end.x;
right = start.x;
}
let top = start.y; // y-axis flip
let bottom = end.y;
if (start.y > end.y) {
top = end.y;
bottom = start.y;
}
// now get the 8 unProject.
const [leftBottomNear, leftBottomFar] = screenPointToWorld( {x: left, y: bottom} );
const [leftTopNear, leftTopFar] = screenPointToWorld( {x: left, y: top} );
const [rightTopNear, rightTopFar] = screenPointToWorld( {x: right, y: top} );
const [rightBottomNear, rightBottomFar] = screenPointToWorld( {x: right, y: bottom} );
// now compute frustum
return new Frustum(Plane.fromPoints(leftTopNear, leftBottomNear, leftBottomFar), // left
Plane.fromPoints(rightBottomNear, rightTopNear, rightTopFar), // right
Plane.fromPoints(rightTopNear, leftTopNear, leftTopFar), // top
Plane.fromPoints(leftBottomNear,rightBottomNear, rightBottomFar), // bottom
Plane.fromPoints(rightBottomNear, leftBottomNear, leftTopNear), // near
Plane.fromPoints(rightBottomFar, rightTopFar, leftTopFar) // far
);
};
----
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 59.115.99.13 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/GameDesign/M.1599806366.A.D6F.html
1F：推 coolrobin: 推个 09/11 21:13
2F：推 SecondRun: 最近也在弄这个 框选真的满麻烦的QQ 09/11 23:29
以前国外opengl论坛高手多，讲解很多很详细。
3F：推 dreamnook: 09/12 08:26
4F：推 aegis123321: 推个 之前遇到也是只用单点判断 09/13 14:52
5F：→ aegis123321: 另外我直觉也觉得用左上右下两个点来投射near far就 09/13 14:55
6F：→ aegis123321: 好了？ near far plane保证是rect吧？ 09/13 14:55
在near,far的plane是rect，但转换成world coords，x,z轴不能直间拿，y轴大部分ok，因为镜头保持水平。
7F：推 a82611141: 推 最近也有在写相关的 code 09/13 18:34
※ 编辑: oopFoo (101.136.20.217 台湾), 09/13/2020 20:45:45
8F：推 aegis123321: 喔对我想成camera space的座标了，这样的话的确直接 09/13 21:27
9F：→ aegis123321: 求8个点比较省事 09/13 21:27