問題タブ [mouse-picking]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
4358 参照

c++ - OpenGLでマウスピッキングを使用して3D空間で3Dポイントをドラッグする最良の方法は?

マウス ピッキングで 3D ポイントをドラッグする最良の方法は何ですか。問題はピッキングではなく、3D 空間でのドラッグです。

私が考えている方法は 2 つあります。1 つは、gluUnProject を使用して View to World 座標を取得し、3D ポイントを変換することです。この場合の問題は、(glReadPixels を使用して) Depth 値を持つサーフェス上にのみワールドがあることです。マウスがサーフェスを離れると、gluUnProject の winZ コンポーネントに基づいて最大または最小の深度値が得られます。また、場合によっては機能しません。

2 番目の方法は、GL_MODELVIEW_MATRIX を使用して XY、XZ、YZ 平面に沿ってドラッグすることです。しかし、この場合の問題は、自分が XY 平面、XZ 平面、または YZ 平面上にいることをどうやって知るのでしょうか? トラックボールの正面図が XY 平面にあることをどのように知ることができますか?また、前面ではなく側面をドラッグしたい場合はどうすればよいでしょうか?

それで、平面のケースを考慮せずに3Dポイントをあらゆる方向に簡単にドラッグできるように、正確な2Dから3D座標を得る方法はありますか? いくつかの方法があるに違いありません.3Dソフトウェアを見たことがあります.それらは完全なドラッグ機能を備えています.

0 投票する
2 に答える
1585 参照

opengl - OpenGL レイ キャスティング (ピッキング): オブジェクトの変換を考慮する

オブジェクトを選択するために、ここで説明されているものと同様のレイ キャスティング アルゴリズムを実装しました。マウス クリックを光線 (原点と方向を含む) に変換した後、次のタスクは、この光線をシーン内のすべての三角形と交差させて、各メッシュのヒット ポイントを決定することです。

ここで説明したものに基づいて、三角交差テスト アルゴリズムも実装しました。私の質問は、交差を実行するときにオブジェクトの変換をどのように説明する必要があるかということです。明らかに、変換行列をすべての頂点に適用してから交差テストを実行したくはありません (遅すぎます)。

編集:
これが私が使用しているUnProjectの実装です(ちなみにOpenTKを使用しています)。GluUnProject私は結果を比較しました、彼らは私に与えるものと一致します:

次に、この関数を使用して (原点と方向を指定して) 光線を作成します。

0 投票する
1 に答える
1379 参照

opengl - glRenderMode(GL_SELECT) と glReadPixels を使用した OpenGL でのピッキング

OpenGLで選択しようとしていますが、うまくいきません。ファイルから受け取ったオブジェクト.obj(v、vn、f、o などのインデックス) を描画します。各オブジェクトは「グループ」から構成され、各グループは のグループですGL_POLYGON。描画関数は次のとおりです。

描画は正常に機能し、画面にオブジェクトが表示されます。

ピッキングの手順はこれだけ

このpick関数は、マウスがクリックされたときに呼び出されます (opengl マウス関数を使用)。私が受け取っているエラーは、オブジェクトをクリックしたときにヒットしたように見えるオブジェクトがないということです。

Opengl 3.0でUbuntu 14.04 LTSを使用しています

質問の仕方や具体的に何を質問すればよいかわかりません。何か問題がある場合は、コードに入力していただければ幸いです..

0 投票する
0 に答える
432 参照

javascript - Three.js boids - improving mouse detection with a changing camera position

I've been working with three.js examples of boids/flocks for some time, but both the canvas one and the webgl/shaders one have a flaw: the mouseOver event (which "disturbs" birds and triggers a repulsion) only works when camera.position = {x: 0, y: 0,: whatever}.

I've tried to improve that in the canvas example (easier to my eyes) by editing this part:

And trying something like:

But this can't work, the unprojected vector could only be used with a raycaster to find objects intersecting its path. In our case, the repulsion effect must work at 150 distance, according to boid.repulse:

So I'm stuck. Should I find a way to widen the raycaster so it's like a 150-wide cylinder for mouse picking? Or is there a way to unproject the vector then re-project it on the plane nearest to the bird, so to calculate the distance? (but what about performance with 200+ birds? )

If the solution can only come from shaders, feel free to tell me to create another topic.

Included: jsfiddle of the canvas example with a slightly moved camera.

0 投票する
3 に答える
1633 参照

opengl - 選択ボックスを使用した 3D サーフェスの選択 (2 つの異なる方法)

私はモデリングソフトウェアを作成しています。私のモデルはすべて平らなポリゴンで構成されています。これは、OpenGL で表示している頂点の順序付けられたセットです。かなり検索しましたが、驚いたことに、探しているアプリケーションに関する情報があまり見つかりませんでした。

長方形のボックスを使用してサーフェスを選択しようとしています。これは単純に思えますが、この方法が多くのプログラムで機能するのと同じように機能することを望んでいます。これらは私が探している要件です:

  1. ボックス内に完全に含まれているオブジェクトのみを選択するために、左から右に移動する長方形が必要です。
  2. 右から始まり左に向かう長方形は、接触している任意の面を選択する必要があります (完全に囲まれている必要はありません。
  3. 長方形内/長方形に接するすべてのオブジェクトを選択する必要があります。つまり、オブジェクトが表示されているかどうかにかかわらず、オブジェクトを選択したいと考えています。別のサーフェスで覆われていても、ボックス内に収まるものはすべて選択する必要があります。

リストの 3 番目が最も重要です。オプション 1 と 2 の両方を使用することをお勧めしますが、実装が非常に難しいことが判明した場合は、どちらか 1 つだけで十分です。

3D ピッキングに関する他のさまざまな投稿を見てきましたが、カラー ピッキングまたはレイ キャスティングが最も示唆されているようです。通常のクリック選択にはカラー ピッキングを使用しますが、ボックス選択に非表示のサーフェスを含めたいため、これはオプションではありません。また、レイ キャスティングは、ボックスではなく 1 回のクリック ポイントでのみ機能するようです。私の目標を達成するためのかなり簡単な方法は他にありますか? 多くのモデリング ソフトウェアに存在するように見えるため、これはかなり一般的なタスクであると考えましたが、残念ながら、自分のニーズに合った方法を見つけることができませんでした。

アルゴリズムの疑似コードは歓迎されますが、必須ではありません。少なくとも、自分で調査していくつかの例を見つけることができる方法を探しています。どこを見ればいいのかさっぱりわからない。

0 投票する
1 に答える
87 参照

opengl - マウスピッキングを機能させようとしていますが、どこで迷子になったのかわかりません

深さ 0 で 10x10 の正方形のグリッドを描画し、マウスが上にあるものを強調表示しようとしています。ここのチュートリアルに従ってみました: http://antongerdelan.net/opengl/raycasting.html しかし、それが正しかったかどうかはわかりません。最後にベクトルになってしまいますが、どうしたらいいのかわかりません。

これが四角形のスクリーンショットです(どのように役立つかわかりません..)

http://postimg.org/image/dau330qwt/2

BDL のコメントからのコードで更新されました。私が今得る出力は次のとおりです。

正規化されたマウス位置 0.087500 x 0.145833 ワールド レイ: 0.065083、0.081353、499.000000 ワールド レイ: 0.000130、0.000163、1.000000 マウス ワールド -0.006521、-0.008152

「マウスの世界」行には、.00x の範囲ではなく、1 から 10 の範囲の数字が含まれていると予想していますが、0 から 10 の範囲の x と y を持つ四角形のグリッドを示す上記のスクリーンショットに基づいています。

ご覧いただきありがとうございます。

0 投票する
1 に答える
981 参照

three.js - GPU ピッキング - スプライト周辺の非表示ピクセル

スプライトを含むピッキング シーンをレンダリングしています。カーソルがスプライトに近づくと、色として登録され、「選択」されます。この目に見えない境界線は、スプライトにズームインすると大きくなります。

コンソールを開いて、リアルタイムで印刷された ID を確認します。カーソルを大小のスプライトに近づけたり遠ざけたりします。見えない境界線上でスプライトが選択されていることがわかります。この動作は通常のジオメトリでは発生せず、スプライトのみで発生します。

renderer.readRenderTargetPixels実際に見えるものをレンダリングしているので、奇妙です。

より正確にピッキングするために、見えない境界線を取り除くにはどうすればよいですか?

ここに画像の説明を入力

0 投票する
1 に答える
4865 参照

javascript - セシウム: エンティティの選択と WMS の情報の取得

建物の 3D ビューアを開発しました。私が今追加しようとしているのは、建物エンティティの下にある WMS (Web マップ サービス) のコンテンツの選択です。

基本的には、ユーザーが左クリックした位置にある建物を選択できるようにしたいと考えています。建物の色が変わるはずです(うまくいきます)。そして、ユーザーがクリックした位置の Web マップ サービスの情報を取得したいと考えています。

これは私がこれまでにコーディングしたものです:

ただし、変数「info」は未定義のままですが、配列を返すと予想されます。