[程式] 3d picking & marquee selection

看板GameDesign作者 (3d)時間3年前 (2020/09/11 14:39), 3年前編輯推噓6(603)
留言9則, 5人參與, 3年前最新討論串1/1
這幾天因為想做滑鼠框選(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

09/11 21:13, 3年前 , 1F
推個
09/11 21:13, 1F

09/11 23:29, 3年前 , 2F
最近也在弄這個 框選真的滿麻煩的QQ
09/11 23:29, 2F
以前國外opengl論壇高手多,講解很多很詳細。

09/12 08:26, 3年前 , 3F
09/12 08:26, 3F

09/13 14:52, 3年前 , 4F
推個 之前遇到也是只用單點判斷
09/13 14:52, 4F

09/13 14:55, 3年前 , 5F
另外我直覺也覺得用左上右下兩個點來投射near far就
09/13 14:55, 5F

09/13 14:55, 3年前 , 6F
好了? near far plane保證是rect吧?
09/13 14:55, 6F
在near,far的plane是rect,但轉換成world coords,x,z軸不能直間拿,y軸大部分ok,因為鏡頭保持水平。

09/13 18:34, 3年前 , 7F
推 最近也有在寫相關的 code
09/13 18:34, 7F
※ 編輯: oopFoo (101.136.20.217 臺灣), 09/13/2020 20:45:45

09/13 21:27, 3年前 , 8F
喔對我想成camera space的座標了,這樣的話的確直接
09/13 21:27, 8F

09/13 21:27, 3年前 , 9F
求8個點比較省事
09/13 21:27, 9F
文章代碼(AID): #1VMnkUrl (GameDesign)