2

xtk を使用して、webgl キャンバスで医療データを視覚化しています。現在、このレッスンで遊んでいます：

レッスン 10

このライブラリは非常に優れていますが、十分に文書化されていません。そのGUIを取り除き、いくつかのマウスイベントを追加したい. GUI からメッシュをロードした場合、メッシュにマウス イベントを追加するにはどうすればよいですか? 私は実際にどこから始めるべきかわかりません。このライブラリを使い始めるのは少し混乱します....

私は試した

mesh.click(function(){
    alert("yes");
  })

また

mesh.mousedown(function(){
    alert("yes");
}
4

3 に答える 3

4

WebGL でレンダリングされたオブジェクトは DOM の一部ではないため、DOM 要素のようにイベントを生成しません。つまり、このようなイベントでは、マウス操作コードを自分で実装する必要があります。

伝統的に WebGL/OpenGL では、このプロセスは「ピッキング」として知られており、オンラインで適切なリソースがいくつかあります。(例: http://webgldemos.thoughtsincomputation.com/engine_tests/picking ) ただし、コア プロセスは次のようなものです。

  • シーン内の選択可能なオブジェクトごとに、色を割り当てます。これをどこかのルックアップテーブルに入れます
  • シーン全体をテクスチャに再レンダリングし、選択可能な各オブジェクトを割り当てられた色でレンダリングします
  • シーンがレンダリングされたら、マウス座標を決定し、その X/Y でテクスチャの色を読み戻します。
  • その色に関連付けられたオブジェクトをルックアップ テーブルから取得します。これは、マウス カーソルが指しているオブジェクトです。

ご覧のとおり、概念的には難しい方法ではありませんが、これにはテクスチャへのレンダリングなど、中間レベルの WebGL トピックがいくつか含まれているため、通常、初心者にはお勧めできません。これを支援する機能が xtk にあるかどうかはわかりませんが (正直なところ、あなたの投稿の前にライブラリについて聞いたことがありませんでした)、これは自分で実装する必要があるものだと思います。

于 2012-05-30T17:11:35.763 に答える
1

XTK は、Toji が説明した方法 (つまり、すべてのオブジェクトが異なる RGBA の「色」でレンダリングされる frameBuffer を使用) のピッキングを実装しています。オブジェクトが 255^4 未満の場合は機能するため、ほとんどの場合です。アンプロジェクションなどの方法は他にもありますが、長くなると思います。

X.renderer.pick と X.renderer.get を使用すると、マウスの下にあるオブジェクトを見つけて、そのプロパティを変更できます。ただし、現時点では、視覚化プロパティのみを変更できます (すべてのクラスのsetGetterとsetSetterを参照)。X.object を移動することはできません (X.object._transform 属性はプライベートであり、getter/setter はまだないため)。

これは興味深い処理です。X.object の変換に getter/setter のペアを追加すると、たとえば、ユーザーは医療関連のもの (メッシュなどでモデル化されたもの) をシーンに配置して、距離を測定したり見たりすることができます。手術などに適しているかどうか。良い考えではないはずです Haehn ? そして、それはフレームワークのマイナーチェンジです。

于 2012-06-01T14:49:04.327 に答える