performance - 使用three.js和canvas渲染器渲染大量彩色粒子

Question

我正在尝试使用Three.js库在屏幕上显示大量的彩色点(例如，大约一百万到一百万)。我尝试尽可能使用Canvas渲染器而不是WebGL渲染器(网页也将显示在Google Earth客户端气泡中，这似乎与Canvas渲染器兼容，但不适用于WebGL渲染器。)

通过修改here的代码可以解决少数几个问题(成千上万个)的问题，但我无法对其进行扩展。

但是在以下使用WebGL和粒子系统的代码中，我可以渲染半百万个随机点，但是没有颜色。

  ...
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版本，是否可以更改各个点的颜色？看来颜色是由传递给“粒子系统”的 Material 设置的，并且为所有点设置了颜色。

Answer 1

编辑:ParticleSystem和PointCloud已重命名为Points。此外，ParticleBasicMaterial和PointCloudMaterial已重命名为PointsMaterial。

要使每个粒子具有不同的颜色，您需要具有一个颜色数组作为几何的一个属性，然后在 Material 中将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