Sprites overlapping (z-index incorrect) alpha 59, 58 & 57 (starting from 58 or 57)


I noticed a weird problem that I’m not able to reproduce yet on the playground.
Updating from alpha 56, I noticed that that sprites started overlapping when they shouldn’t.
A sprite further away is shown in front of one closer to the camera. My code hasn’t changed, I’m trying to reproduce it on the playground, but it’s not yet working.
Particles are also showing through sprites now… I reverted to alpha 56 and the problems were gone…
Has anything changed to the sprites or sprite managers that could explain this?

One thing that did change is that SpriteManager.disableDepthWrite is now working: previously, changing this property would not have any effect. So, if you set it to true it may explain your problems.

Except from this change, there has been another change in the sprite renderer but I don’t see how it could produce what you say: we would need a repro in the Playground to look further.


Yup it would be amazing to have a repro so that we can fix it ASAP.

I’m rebuilding some stuff to find what’s going on in a playground - really no idea where the problem is yet.

The issue seems to have to do with the order in which the sprites are created which is taking priority over the z-value over the actual distance to camera…

So strange, I hope we can figure this one out soon :slight_smile:

The only change so far is Fix too many bundles created in the non compatibility mode in WebGPU · BabylonJS/Babylon.js@75322a6 · GitHub but I doubt it impacts, @Evgeni_Popov ?

I don’t think, that’s the change I had in mind when I said:

Except from this change, there has been another change in the sprite renderer but I don’t see how it could produce what you say

I have tested that two sprites are correctly displayed depending on their z coordinate (also tested in 4.2 with the same result).

Maybe the problem comes from an interaction with something else.

1 Like

Ok so I’ve been spending hours debugging and it’s slightly driving me nuts.
I cannot seem to reproduce the problem in the playground, I’ll set up a new ts project and just start building things from there. I checked again and I made no code changes and things work with alpha 56, updating causes the sprite rendering issues.

I did manage to fix my issue locally by commenting out line 277 in the posted PR (spriteRenderer.ts).
So commenting out this line: engine.enableEffect(this._drawWrapperDepth); (added in the PR) made things go back to normal for me. No idea why yet though.

Do you enable fog in your scene? I think it could be the culprit…

If you do enable fog and by disabling it it makes it work, I will make a PR to fix the problem.

Aahh yes I do!
Turning off the fog indeed fixes the issue!

repro of issue here:
(move camera around to other side to see sprites incorrectly rendered)

Removing fog fixes the problem.

Thanks for the repro, here’s the PR that will fix the problem:


Great, thanks for looking into this.