使用three.js和画布渲染器渲染大量彩色粒子

Question

我正在尝试使用 Three.js 库在屏幕上显示大量彩色点（例如大约一百万到一百万）。如果可能，我正在尝试使用 Canvas 渲染器而不是 WebGL 渲染器（网页也将显示在 Google 地球客户端气泡中，这似乎适用于 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 的材质设置的，它设置了所有点的颜色。

Answer 1

编辑：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 );

这是一个更新的 Fiddle：http://jsfiddle.net/J7zp4/200/

您的其他问题对我来说有点太笼统了，此外，这取决于您要做什么以及您的要求是什么。是的，您可以预期 Canvas 会更慢。

编辑：更新为 three.js r.73