In three.js, when we need PointCloud.sortParticles enabled?

Question

I found some of the examples enable this property, but there're not enough comments to make me understand what it matters. Could you please tell me what's the best practice of this property?

Answer 1

EDIT: PointCloud is now Points, and the .sortParticles property has been removed. That means the points are rendererd in the order they exist in the buffer. The answer below is outdated. three.js r.73

---

This is a perfect example of why it is important to understand at least the basic concepts of webGL if you are using three.js. (See this SO post.)

You need to set PointCloud.sortParticles = true if the rendering order matters.

Here is an example where the rendering order matters:

var material = new THREE.PointCloudMaterial( {
    map: texture, // has transparent areas
    transparent: true
} );

var pointCloud = new THREE.PointCloud( geometry, material );
pointCloud.sortParticles = true; // the default is false

In this case, the renderer will sort the points by depth, so points further from the camera are rendered first, and show through the transparent areas of the closer ones.

Here is an example where rendering order does not matter:

var material = new THREE.PointCloudMaterial( {
    map: texture,
    blending: THREE.AdditiveBlending,
    depthTest: false,
    transparent: true
} );

// point cloud
var pointCloud = new THREE.PointCloud( geometry, material );

Since sorting occurs on the CPU-side, it is best to choose your material settings wisely, so you can avoid the overhead -- especially for large systems.

I suggest you build a testbed and experiment. There are many, many possible cases to consider.

three.js r.69