2017-07-29 12 views
0

OBJ(またはSTL)から読み込まれた3Dモデルの上に、フラットで動的に作成されたヒートマップをレンダリングしようとしています。ベクター3ポイントデータから3Dモデル上ヒートマップを作成

私は現在、Three.jsでOBJをロードしてレンダリングしています。私は現在、単純な赤い立方体(下の画像)として描画しているvector3点を持っています。これらのデータポイントは、すべてOBJメッシュにレイキャストされ、表面に横たわっています。ベクトル3点は外部データソースからロードされ、どのデータが表示/収集されているかによって変化します。

points

私はOBJの表面上のヒートマップに私のするVector3ポイントデータをレンダリングしたいと思います。ここで私が達成しようとしている視覚効果の種類を示すいくつかの例は次のとおりです。

example1

example2

example3

example5

私は頂点彩色のように感じることは達成する方法であり、しかし、私の問題は、私のOBJモデルがこれを行うのに十分なテッセレーションを持っていないということです。あなたが見ることができるように、多くの赤い点が各面に当たっています。私は、私の赤い点のデータがある場所で、オブジェクトのメッシュを色で正確に描く方法を見つけるのに苦労しています。ランダムなベクトル3点をメッシュに変換する必要があると仮定していましたが、その方法を見つけることはできません。

私はテクスチャを生成する可能性を見てきましたが、1)私は私のOBJのためのUVマップを持っていないと、プログラム的に生成する方法を見ていないし、2)私は少し私どのように失われていますベクトル3点データをUV点に相関させる。

シェイダーを使用してみましたが、ベクター3のポイントデータがシェーダーを使用するには大きすぎます(数十万点になる可能性があります)。ヒートマップをすべてのフレームにレンダリングするのは適切なアプローチではなく、むしろロード時にレンダリングすることだけを望むと私は思っています。

ポイントクラウドとマーチングキューブアルゴリズムで等値面を調べましたが、私のデータはポイントクラウドのようなものなので正しい方向ではないと私は思いました。これを私のOBJメッシュの表面に沿って滑らかに保ちます。

ブラウザで表示するためにJavaScriptですべてを保持することをお勧めしますが、人間の介入なしに自動化できる限り、RESTを使用する任意の言語/プログラムでサーバーサイド処理を行いますブラウザでレンダリングします。

ご意見やご指摘をお待ちしております。

+1

あなたのコードを教えてください。 –

答えて

2

私は推測していますが、まず、すべての三角形をテクスチャにマッピングするUV座標が必要です。これを手作業で行うのではなく、モデリングパッケージを使用することをお勧めします。ほとんどのモデリングパッケージには、自動的にすべての三角形をテクスチャに一様にマッピングするいくつかの方法があります。 For example in Blender

次に、各ドット(レイキャスティング)の影響を受ける三角形を計算して、そのテクスチャ座標をルックアップし、そのドットをテクスチャ空間に投影して、テクスチャのその部分に色を入れてヒートマップをテクスチャに配置します。私はあなたが正確な点を行うだけではなく、おそらく三角形の端に近いヒート情報が隣接する三角形に滲み出す必要があるので隣接する三角形を考慮する必要があると推測していますが、隣接する三角形は完全にテクスチャの異なる部分。