Greetings!
I’m encountering an issue with sprites where any transparent background pixels are mixed with the sprite’s opaque pixels, causing visible rendering artifacts. What’s more, the glitch happens to manifest differently depending on how the sprite is created!
Here’s what I’m doing in my app:
- Create pixel data (and spritesheet JSON) in RGBA format after parsing a binary-encoded file (alpha is 0 for background pixels)
- Create a RawTexture with said pixel data
- Create SpritePackedManager using an empty string as the image URL
- Then set its texture manually to the RawTexture created previously
- Create a sprite instance from said sprite manager
Result:
- The background is transparent, but there are visible artifacts at the edges
- If I set the texture’s sampling mode to NEAREST, the artifacts disappear (at the cost of a jagged look)
- If I create the texture from its DataURL (Base64-encoded) instead of a RawTexture, the artifacts are still there
- BUT they use black rather than the actual background color (e.g., red)
These artifacts are presumably caused by linear filtering taking the neighboring pixel’s color despite their alpha being 0. I would expect the result be an entirely transparent background without bleeding at the edges of the visible sprite.
A comparison screenshot can be found here: https://i.imgur.com/g99gDxA.png
In the comparison screenshot, the result I want to achieve is the top left one (linear filtering, no visible artifacts).
The playground example itself (using DataURL instead of RawTexture) is located here: https://playground.babylonjs.com/#WR3TER#2
I have considered a few workarounds, but none seemed appropriate:
- Manually alter the spritesheet’s pixel data to color the transparent (invisible) pixels differently
- Add some shader magic to manually override the transparent pixels being mixed in (I have no idea how to do this, though)
- I’ve also altered just about any setting I could find, to no effect. Disabling filtering is obviously not a real solution
Surely there must be a simpler way to achieve the desired result? Maybe I’m overlooking something simple here… I hope some of you might have encountered this problem or know where to look.
Thanks for your time!