[程式] 3d picking & marquee selection

看板GameDesign (遊戲設計)作者oopFoo (3d)時間4年前 (2020/09/11 14:39)推噓6(6推 0噓 3→)

留言9則, 5人參與討論串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