Postprocessing problem with layers

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 :

here is my code :

let speed = 0.03;

        function animate(){

            scope.animateParticles = window.requestAnimationFrame(animate);

			scope.composer.render( clock.getDelta() );


            scope.renderer.render( scope.scene, );	
            scope.particle1.position.z -= speed;
            scope.particle2.position.z += speed;

            if( scope.particle1.position.z < 0 ){
                speed = 0;