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

Question

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

10

我正在尝试使用Three.js库在屏幕上显示大量着色点（例如50万至100万个）。如果可能，我希望使用Canvas渲染器而不是WebGL渲染器（网页还将显示在Google Earth Client泡泡中，这似乎与Canvas渲染器兼容但不兼容WebGL渲染器）。

虽然我已经通过修改此处的代码，解决了小量点的问题（几万个），但我在扩展到更多点时遇到了麻烦。

但是，通过使用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的材质设置的，这会为所有点设置颜色。

- Chaitanya

你可以使用context2d中的drawImage()方法，将WebGL画布渲染到2D画布上。 - Kaiido

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

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

这个答案仅适用于版本号低于 r.125 的 three.js。

如果要让每个粒子拥有不同的颜色，你需要将一个颜色数组作为几何体的一项属性，并在材料中设置 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 );

您的其他问题对我来说有些太泛泛了，无法回答。此外，这取决于您究竟要做什么以及您的要求是什么。是的，您可以预期Canvas会更慢。

编辑：已更新至three.js r.124