Postprocessing issue

Questions
1

Hello everyone!

I have an issue. i am trying to animate particles with explosion effect but when i do that with postprocessing particle burst appears to be behind the geometry.

my geomtry layers are set to 0
and my particles are set to 1

does anyone know how to fix that? its very nasty bug for me. i couldn’t find a solution.

here is my work link :

https://www.cadcamge.ch/tracer-tmp/subsystem/core/r5.0/#

here is my code

 this.afterimagePass = new THREE.AfterimagePass();

        this.bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 0.5, 0.4, 0.85 );
        this.bloomPass.threshold = 0.1;
        this.bloomPass.strength = 1;
        this.bloomPass.radius = 1;

        this.composer = new THREE.EffectComposer( this.renderer );
        this.composer.addPass( new THREE.RenderPass( this.scene, this.camera ) );
        this.composer.addPass( this.afterimagePass );
        this.composer.addPass( this.bloomPass );

        this.bloomPass.renderToScreen = true;
        this.composer.renderToScreen = true;

function animate(){

            scope.animateParticles = window.requestAnimationFrame(animate);
            scope.renderer.autoClear = false;

            core.renderer.clear();
       
            scope.parts[0].object.layers.set(1);
            scope.camera.layers.set(1);
	    scope.composer.render();
           
            scope.renderer.clearDepth();
            scope.camera.layers.set(0);
            scope.renderer.render( scope.scene, scope.camera );	

            scope.particle1.position.z -= speed;
            scope.particle2.position.z += speed;
            
            if( scope.particle1.position.z < 0 ){
                speed = 0;   
                scope.parts[0].update();
            }
        }