Sparkle Transparency issue with other effects in EffectComposer

Questions
,
1

Hi all,
I’m experiencing black borders around the particles from R3F drei’s Sparkle component, as soon as I add other effects with an EffectComposer (like Bloom, Vignette, Noise etc.). Any idea how to prevent this?

288176681-c669b246-a996-465e-ba58-558b6b8643f2
288176681-c669b246-a996-465e-ba58-558b6b8643f21143×855 32.2 KB

I’m assuming it has to do with the render order of transparent objects, but I can’t figure out how to solve this.

If I create my own particle system and shaderMaterial with a PNG pointTexture, I don’t get these issues.

uniforms = {
  pointTexture: {
    value: new THREE.TextureLoader().load('./img/spark1.png')
  }
};

const sparkleMaterial = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: `attribute float size;
  varying vec3 vColor;
  void main() {
    vColor = color;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = size * (100.0 / -mvPosition.z );
    gl_Position = projectionMatrix * mvPosition;

  }`,
  fragmentShader: `uniform sampler2D pointTexture;
  varying vec3 vColor;
  void main() {
    gl_FragColor = vec4( vColor, 1.0 );
    gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
  }
  `,

  blending: THREE.AdditiveBlending,
  depthTest: true,
  transparent: true,
  alphaTest: 0.5,
  vertexColors: true
});

Here’s the R3F drei fragment shader code for their sparkles

    `varying vec3 vColor;
    varying float vOpacity;
    void main() {
      float distanceToCenter = distance(gl_PointCoord, vec2(0.5));
      float strength = 0.05 / distanceToCenter - 0.1;
      gl_FragColor = vec4(vColor, 1 * vOpacity);
    }`

I’d appreciate any help on this!