4

Three.JSライブラリを使用して、Webブラウザに点群を表示しています。ポイントクラウドは起動時に1回生成され、それ以上ポイントが追加または削除されることはありません。ただし、回転、パン、ズームする必要があります。ここで、three.jsでパーティクルを作成する方法についてのチュートリアルを実行しました。

この例を使用すると、正方形のパーティクルを作成したり、球の画像を使用してテクスチャを作成したりできます。画像は私が望むものに近いですが、画像を使用せずに点群を生成することは可能ですか？たとえば、球のジオメトリ。

画像の問題は、何千ものポイントがある場合、それらがエッジの周りで互いに不明瞭になることがあるように見えることです。私が収集できることから、ポイントのpngファイルの黒い領域が現在のポイントのすぐ後ろの画像をブロックしているように見えます。（ただし、さらに後ろのポイントは透過的です）

このように画像が不明瞭になっているので、図形を使って点を生成したいと思います。頂点を球に置き換えparticles = new THREE.Geometry()て変更しようとしました。THREE.SphereGeometry(radius, segments, rings)

だから私の質問はです。正方形ではなく球（または点）をレンダリングするようにサンプルコードを変更するにはどうすればよいですか？また、パーティクルシステムは私の特定のケースで最も効率的なシステムですか、それともパーティクルを生成して個々の位置を設定するだけでよいですか？前述したように、ポイントを生成するのは1回だけですが、ポイントを回転、ズーム、パンします。（私はTrackBallサンプルコードを使用してマウスイベントを機能させました）。

ご協力いただきありがとうございます

4

3 に答える 3

7

球を使用した点群のレンダリングは非常に効率的ではないと思います。パーティクルシステムを回避し、テクスチャまたは小さなキャンバスプログラムを使用して円を描くことができるはずです。

最初のthree.jsサンプルの1つは、キャンバスプログラムを使用しています。重要な部分は次のとおりです。

var PI2 = Math.PI * 2;
var program = function ( context )
{
    context.beginPath();
    context.arc( 0, 0, 1, 0, PI2, true );
    context.closePath();
    context.fill();    
};
var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( {
    color: Math.random() * 0x808008 + 0x808080,
    program: program
} ) );

three.jsパーティクル

WebGLレンダラーのコードを自由に調整してください。

例で見たもう1つの賢い解決策は、エンコードされたwebmビデオを使用してデータを保存し、それをthree.jsのパーティクルシステムを介してレンダリングされるGLSLシェーダーに渡すことです。 three.js webgl kinect

ポイントクラウドがKinectからのものである場合、次のリソースが役立つ可能性があります。

  1. DepthCam
  2. KinectJS

GeorgeMacKeronのkinectからjsへのソリューション

于 2012-09-14T20:44:19.843 に答える
3

私のコードをhttp://threejs.org/examples/#webgl_custom_attributes_particles3と比較すると 、唯一の違いは次のとおりです。

vec4 outColor = texture2D（texture、gl_PointCoord）;
if（outColor.a <0.5）破棄;
gl_FragColor = outColor;

フラグメントシェーダーに追加され、この問題が修正されました。

ランダムに、いくつかのコーナーが遠くの粒子と重なるため、Zファイティングではありませんでした。 material.alphaTest = 0.5動作せず、深度書き込み/テストをオフにすると、表示順序が台無しになりました。

于 2015-01-05T02:45:58.140 に答える
1

画像の問題は、何千ものポイントがある場合、それらがエッジの周りで互いに不明瞭になることがあるように見えることです。私が収集できることから、ポイントのpngファイルの黒い領域が現在のポイントのすぐ後ろの画像をブロックしているように見えます。（ただし、さらに後ろのポイントは透過的です）

回転させることで、基礎となる正方形構造の透明度の重複の問題を取り除くことができます

depthTest:false

問題は、シーンにオブジェクトを追加する場合、深度テストが失敗し、PointCloudが実際の順序を無視して、他のオブジェクトの前にレンダリングされることです。それを回避するには、さらにオフにすることができます

depthWrite:false
于 2014-12-20T12:06:07.213 に答える