使用three.js和canvas渲染器渲染大量彩色粒子 [英] Rendering a large number of colored particles using three.js and the canvas renderer

问题描述

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

I am trying to use the Three.js library to display a large number of colored points on the screen (about half a million to million for example). I am trying to use the Canvas renderer rather than the WebGL renderer if possible (The web pages would also be displayed in the Google Earth Client bubbles, which seems to work with Canvas renderer but not the WebGL renderer.)

虽然我可以通过修改 此处 ，我无法对其进行扩展。

While I have the problem solved for a small number of points (tens of thousands) by modifying the code from here, I am having trouble scaling it beyond that.

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

But in the the following code using WebGL and the Particle System I can render half a million random points, but without colors.

  ...
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渲染器使用。

Is the reason for the better performance of the above code due to the Particle System? From what I have read in the documentation it seems the Particle System can only be used by the WebGL renderer.

所以我的问题是

a）我可以使用画布渲染如此大量的粒子吗？渲染器，还是总是比WebGL / ParticleSystem版本慢？如果是这样，我该怎么做？我可以使用哪些对象和技巧来提高性能？

a) Can I render such large number of particles using the Canvas renderer or is it always going to be slower than the WebGL/ParticleSystem version? If so, how do I go about doing that? What objects and or tricks do I use to improve performance?

b）如果放弃某些功能，是否可以达成妥协？换句话说，如果我放弃为单个点着色的需求，是否仍可以对大型数据集使用Canvas渲染器？

b) Is there a compromise I can reach if I give up some features? In other words, can I still use the Canvas renderer for the large dataset if I give up the need to color the individual points?

c）如果我必须放弃画布并使用WebGL版本，是否可以更改各个点的颜色？看来颜色是由传递给粒子系统的材质设置的，并且设置了所有点的颜色。

c) If I have to give up the Canvas and use the WebGL version, is it possible to change the colors of the individual points? It seems the color is set by the material passed to the ParticleSystem and that sets the color for all the points.

推荐答案

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

ParticleSystem and PointCloud has been renamed to Points. In addition, ParticleBasicMaterial and PointCloudMaterial has been renamed to PointsMaterial.

要使每个粒子具有不同的颜色，需要将颜色数组作为几何的属性，然后设置 vertexColors 到材料中的 THREE.VertexColors ，例如：

To have a different color for each particle, you need to have a color array as a property of the geometry, and then set vertexColors to THREE.VertexColors in the material, like so:

// 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/

Here is an updated Fiddle: http://jsfiddle.net/J7zp4/200/

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

Your other questions are a little too general for me to answer, and besides, it depends on exactly what you are trying to do and what your requirements are. Yes, you can expect Canvas to be slower.

编辑：针对three.js r.73更新了

Updated for three.js r.73

这篇关于使用three.js和canvas渲染器渲染大量彩色粒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！