使用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) 我可以使用 Canvas 渲染器渲染如此大量的粒子吗?还是它总是比 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) 如果我不得不放弃 Canvas 并使用 WebGL 版本，是否可以更改单个点的颜色?颜色似乎是由传递给 ParticleSystem 的材料设置的，它设置了所有点的颜色.

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 );

这是更新的 Fiddle: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屋！