作者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/m.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