Rendering artifacts with overlapping transparent sprites

[someguynamedjosh]

Bevy version

0.4.0 from crates.io, also reproduced with 3475a64

Operating system & version

KUbuntu 20.04

What you did

• Create two sprites such that a fully transparent portion of the first sprite clips into the second sprite.
• Create a camera viewing them at an angle (ideally with keyboard controls)

What you expected to happen

Both sprites are correctly drawn

What actually happened

The transparent area of the first sprite will sometimes occlude the second sprite:

(The red area is supposed to be a square but is occluded by the transparent area of the triangle's sprite.)

Additional information

I've temporarily solved this by replacing the default SPRITE_RENDER_PIPELINE with one where the fragment shader has this additional line:

    if (color.a < 0.5) discard;

which functions like the 'cutout' shaders found in other game engines. It resolves the problem by not writing to the depth buffer when a pixel is transparent enough. However, it causes decreased performance for sprites which do not need this effect. I wanted to mention this to anyone who might know how to better incorporate this change into the engine. I would assume a good approach would be to create another rendering pipeline for sprites that need this cutout effect that runs after the main sprite pipeline. Then there could be added either a CutoutSpriteBundle::default() or SpriteBundle::cutout() to easily create a bundle using this pipeline.

[Matthew-Maclean]

I can get this to happen without viewing the sprites on an angle (in fact, I'm using an orthographic camera here). Here the grey boxes should go all the way through the man (please excuse the art), but they're blocked by the transparent parts of his texture. I believe this only happens when the two sprites are at the exact same (or extremely close) z-levels.

[TheArchitect4855]

I was having the same issue so I fixed it; sprites now have alpha cutouts.