Particle Emitter not working with transparent PC background

Help & Support
21

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: https://github.com/playcanvas/engine/blob/dev/src/framework/components/particle-system/component.js#L974

Material on the emitter: https://github.com/playcanvas/engine/blob/dev/src/scene/particle-system/particle-emitter.js#L367

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;

    material.update();
};

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

1 Like
22

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

Screen Shot 2022-01-05 at 5.45.51 PM
Screen Shot 2022-01-05 at 5.45.51 PM1800×1264 82.1 KB

Not sure if you have any advice on that

23

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.

24

Thanks,
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!

25

This the closest we got in investigation of using the HTML background: https://playcanvas.com/editor/scene/1304867

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

26

Cool will follow along, thanks!

27

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: