Ordering of transparent ParticleSystem with BufferGeometry in Threejs

Question

Related to this question : Z-buffer issue with BufferGeometry in ParticleSystem

The given solution does not work for me, I made my own shader for rendering as I added custom attributes for size and UV. Everythinf works fine with the buffer geometry except the particle ordering for transparency.

If Activated > squared texture are partly hiding the other particles.

If Deactivated (depthTest : false) > particles looks fine but are not ordered.

Thanks for your answer, the subject has been raised several times but nothing worked for me yet.

Using Three.js 61

            particleMaterial = new THREE.ShaderMaterial({
                    fragmentShader    : document.getElementById("sectorPointFragment").textContent,
                    vertexShader  : document.getElementById("sectorPointVertex").textContent,
                    uniforms  : uniforms,
                    attributes : attributes,
                    transparent : true,
                    alphaTest : 0.5
                });         


            _this.particles = new THREE.ParticleSystem(geometry, particleMaterial);

            _this.particles.sortParticles = true;

What is Activated and Deactivated? Also, the link you referenced explains that when `BufferGeometry` is used, particles are not sorted. — WestLangley, Sep 18 '13 at 18:52
when depth test is activated or not, well how can I sort particles in a buffer ? I have to do it manually ? The goal is to have performances with the geometryBuffer but it counters having ordered particles which in my case is wanted. — StackHola, Sep 18 '13 at 22:56
Manually, yes -- but I've never heard of anyone doing such a thing. — WestLangley, Sep 18 '13 at 23:10
Does not seems very attractive. I either have to store the particles - which is exactly what is avoided when using geometrybuffers - or to access it directly on the GPU - which is a very bad idea. So the real answer would be something like : don't use geometry buffers when you want to do z-ordering of particles ... — StackHola, Sep 19 '13 at 00:15

score 0 · Accepted Answer · edited Nov 25 '13 at 03:25

So here is the solution I took, creating a new array with value each time. Seems to work, tested with 1000 particles not more

this.updateShaders = function() {
    if(clock.getElapsedTime() - _lastZOrdering <= 0.2) {
        return;
    }
    // z-ordering
    var distances = [],
        attributes = this.particles.geometry.attributes,
        nbParticle = attributes.position.numItems / 3,
        tmpPos = new THREE.Vector3(0, 0, 0);

    for (var i = 0; i < nbParticle; ++i) {
        tmpPos.set(
            attributes.position.array[i * 3],
            attributes.position.array[i * 3 + 1],
            attributes.position.array[i * 3 + 2]
        );
        distances[i] = [this.controls.object.position.distanceTo(tmpPos), i];
    }
    distances.sort(function(a, b){ 
        return b[0] - a[0];
    });

    var index, indexSrc, indexDst, tmpTab;
    for (var val in attributes) {
        tmpTab = new Float32Array(attributes[val].itemSize * nbParticle);
        for(i = 0; i < nbParticle; ++i){
            index = distances[i][1];
            for(j = 0; j < attributes[val].itemSize; ++j){
                indexSrc = index * attributes[val].itemSize + j;
                indexDst = i * attributes[val].itemSize + j;
                tmpTab[indexDst] = attributes[val].array[indexSrc];
            }
        }
        attributes[val].array = tmpTab;
        attributes[val].needsUpdate = true;
    }
    _lastZOrdering = clock.getElapsedTime();
}

You can significantly improve the performance of this function if you recycle the `distances` array. By creating a new one every time the function is run, you're creating garbage on the heap. If you recycle the same one each time, you prevent the garbage collector from needing to do more work than it has to. Since you're only storing numbers, you could probably even use a single typed array for even better performance. — mattbasta, Nov 25 '13 at 03:19
Additionally, you should try to modify your `attributes[foo].array` typed arrays in-place rather than creating new ones. Creating new typed arrays each time creates a lot of garbage and incurs a lot of unnecessary overhead. — mattbasta, Nov 25 '13 at 03:22
I made an NPM library based off this code: https://github.com/frewsxcv/three-buffergeometry-sort — Corey Farwell, Jan 11 '15 at 22:20

Ordering of transparent ParticleSystem with BufferGeometry in Threejs

1 Answers1