Particle Emitter not working with transparent PC background


I have successfully made the background of my PlayCanvas project transparent, so that i can use PlayCanvas scripts to inject html/css and do custom backgrounds. Its easier for me to write css for this kinda stuff then try to make complicated renders with PlayCanvas. This part is a success!

Only issue is that particle emitters are not showing up, sprites, everything else is appearing, but the particles will not appear unless spilled over a sprite. Anyone know how i can solve this? Would love to use css/html backgrounds if possible, but i need to use the PlayCanvas particle system.

You can see reminants of the particle system going over the sprite arrow key buttons!

this is likely related to

Thanks i can look into that, any plans to fix? I see its been open since June

There’s a short term workaround in the linked ticket project here:

@yaustar Thanks! Im having trouble understanding, would i be “fixing” the material of the particles? Or of the transparent background?

Material of the particles

How would i change the material of a particle? I don’t see an option for that? Thanks for your help!

You might be able to use ParticleSystemComponent | PlayCanvas API Reference instead

Otherwise this will have to wait until I’m back in the office in the new year as I can’t remember off hand. Will need to look at some old emails and tickets

It may involve using private API

1 Like

Great yeah having trouble with that API, so please let me know when you get back in office! Happy New Year!

Would it be possible to have a simple, public repro project to double check a workaround please?

Sure, here is a stripped down public project:

Pretty much we have the “Dust Particles” which are only visible over our earth sprite. The canvas is transparent and the cameras background render has been set to transparent. You can see in the BackgroundGradient entity i am generating an html/css gradient backdrop. The particles are visible only over the sprite earth, but not over the background

Thanks for checking it out!

Thanks for the example project, I’ve got an internal ticket for this and will address as soon as I can

Just want to confirm if this is what I’m supposed to see? If so, I can’t reproduce the issue as this is launching your project without modifications @MitchMeyer1

Could it be OS or browser specific?

Ah, reproduced on Firefox and Safari :slight_smile:

It seems to work fine for me in Firefox 95.0.2 for Windows 10:

Created public issue here as it’s a bit weird :sweat_smile:

Oh interesting! Yeah issue exists on Chrome 96.0.4664.110 for OSX 11.6.1! Were you able to use your material work around as a temp fix until the engine is fixed?

I’ve had to pass it onto the graphics engineers as I mis-remembered and had not come across this issue before. They are hoping to look at the issue by the end of the week

Great thank you!

Also @yaustar, did you find out a way to replace the material for particles? That would help me a lot with other issues i have with the current particle system