Particle Emitter not working with transparent PC background

Looking at the source code, it is possible to do but is rather hacky.

The particle component has a property ‘emitter’ that has the material. However, you will need to remember that if the particle emitter gets rebuilt, it recreates the original material.

There are also shaders with the material that are needed for the particle system.

Emitter property:

Material on the emitter:

Code example:

// initialize code called once per entity
TCAlphaWrite.prototype.initialize = function() {
    /** @type {pc.Material} */
    var material = this.entity.particlesystem.emitter.material;
    material.alphaWrite = true;
    material.blendSrcAlpha = pc.BLENDMODE_ONE;
    material.blendDstAlpha = pc.BLENDMODE_ONE_MINUS_SRC_ALPHA;


Note the above doesn’t fix the issue properly, it’s there as an example to edit the material

1 Like

Thanks @yaustar, seemed to kind of work, the particle now shows up but has weird lighting outline artifacts that were not present with the sprite background

Not sure if you have any advice on that

Yes, that wasn’t meant to be the actual fix, just an example of modifying the material of the particle system. Still hoping that the graphics engineer will find time to look into the issue this week.

I decided to use a PC gradient mesh instead of a css background to avoid half these issues, so looks good now, was hoping to use CSS to make gradient animations and stuff, but maybe ill do that in the future when the particles are more flexible! Thanks for your help!

This the closest we got in investigation of using the HTML background:

There is still some artifacting around the edges of the particle when alpha is near 0. We think that maybe changing the blend mode of the elements in CSS may help (mix-blend-mode - CSS: Cascading Style Sheets | MDN) on the canvas but haven’t yet investigated

Cool will follow along, thanks!

I couldn’t find a mix -blend mode for this to work unfortunately :frowning:

Still leaving the particle emitter bug open in the engine :frowning: