10

Three.js ライブラリを使用して、画面に多数の色付きポイント (たとえば、約 50 万から 100 万) を表示しようとしています。可能であれば、WebGL レンダラーではなく Canvas レンダラーを使用しようとしています (Web ページは Google Earth クライアントの吹き出しにも表示されます。これは、Canvas レンダラーでは機能するようですが、WebGL レンダラーでは機能しないようです)。

hereからコードを変更することで、少数のポイント (数万) について問題を解決しましたが、それを超えてスケ​​ーリングするのに問題があります。

しかし、WebGL とパーティクル システムを使用した次のコードでは、50 万個のランダム ポイントを色なしでレンダリングできます。

  ...
var particles = new THREE.Geometry();
var pMaterial = new THREE.ParticleBasicMaterial({
                    color: 0xFFFFFF,
                    size: 1,
                    sizeAttenuation : false
                    });

// now create the individual particles
for (var p = 0; p < particleCount; p++) {
     // create a particle with randon position values,
     // -250 -> 250
     var pX = Math.random() * POSITION_RANGE - (POSITION_RANGE / 2),
     pY = Math.random() * POSITION_RANGE - (POSITION_RANGE / 2),
     pZ = Math.random() * POSITION_RANGE - (POSITION_RANGE / 2),
     particle = new THREE.Vertex(
                        new THREE.Vector3(pX, pY, pZ)
                        );

     // add it to the geometry
     particles.vertices.push(particle);
    }

    var particleSystem = new THREE.ParticleSystem(
                            particles, pMaterial);
    scene.add(particleSystem);
  ...

上記のコードのパフォーマンスが向上した理由は、パーティクル システムによるものですか? ドキュメントで読んだことから、パーティクル システムは WebGL レンダラーでのみ使用できるようです。

だから私の質問は

a) Canvas レンダラーを使用してそのような多数のパーティクルをレンダリングできますか? それとも常に WebGL/ParticleSystem バージョンよりも遅くなりますか? もしそうなら、どうすればそれを行うことができますか？パフォーマンスを向上させるために使用するオブジェクトやトリックは?

b) 一部の機能を放棄した場合に到達できる妥協点はありますか? つまり、個々のポイントに色を付ける必要がなくなった場合でも、大規模なデータセットに Canvas レンダラーを使用できますか?

c) Canvas をあきらめて WebGL バージョンを使用する必要がある場合、個々のポイントの色を変更することは可能ですか? ParticleSystem に渡されたマテリアルによって色が設定され、すべてのポイントの色が設定されているようです。

4

1 に答える 1

20

編集:ParticleSystemにPointCloud名前が変更されましたPoints。さらに、ParticleBasicMaterialとPointCloudMaterialに名前が変更されましたPointsMaterial。

パーティクルごとに異なる色を使用するには、次のように、ジオメトリのプロパティとして色の配列を設定vertexColorsしTHREE.VertexColors、マテリアルに設定する必要があります。

// vertex colors
var colors = [];
for( var i = 0; i < geometry.vertices.length; i++ ) {

    // random color
    colors[i] = new THREE.Color();
    colors[i].setHSL( Math.random(), 1.0, 0.5 );

}
geometry.colors = colors;

// material
material = new THREE.PointsMaterial( {
    size: 10,
    transparent: true,
    opacity: 0.7,
    vertexColors: THREE.VertexColors
} );

// point cloud
pointCloud = new THREE.Points( geometry, material );

更新されたフィドルは次のとおりです: http://jsfiddle.net/J7zp4/200/

あなたの他の質問は、私が答えるには少し一般的すぎます。さらに、それはあなたがやろうとしていることとあなたの要件が何であるかにもよります. はい、Canvas は遅くなることが予想されます。

編集: three.js r.73 用に更新

于 2012-09-30T18:31:36.477 に答える