[程式] 3d picking & marquee selection

[oopFoo (3d)]

這幾天因為想做滑鼠框選（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://www.ptt.cc/bbs/GameDesign/M.1599806366.A.D6F.html
推 coolrobin: 推個
推 SecondRun: 最近也在弄這個 框選真的滿麻煩的QQ
以前國外opengl論壇高手多，講解很多很詳細。
推 dreamnook:
推 aegis123321: 推個 之前遇到也是只用單點判斷
→ aegis123321: 另外我直覺也覺得用左上右下兩個點來投射near far就
→ aegis123321: 好了？ near far plane保證是rect吧？
在near,far的plane是rect，但轉換成world coords，x,z軸不能直間拿，y軸大部分ok，因為鏡頭保持水平。
推 a82611141: 推 最近也有在寫相關的 code
※ 編輯: oopFoo (101.136.20.217 臺灣), 09/13/2020 20:45:45
推 aegis123321: 喔對我想成camera space的座標了，這樣的話的確直接
→ aegis123321: 求8個點比較省事