Sky color being rendered around edges of my transparent objects

I’m having a problem with the sky getting rendered around the edges of my two-dimensional transparent objects:

Needless to say, it shouldn’t be. Any ideas why it’s doing this, and how to fix it? What chunks of my code do you need to see to get an idea what’s going on?

(Here is where I apply the textures, etc:)

//generate picture
pic = new Picture(“pic”);

    //texture the picture
    Texture2D tex = animations.get(currentAnim).updateTex(app.getTimer().getTimeInSeconds());

    //define the material
    picMat = new Material(app.getAssetManager(), "Common/MatDefs/Misc/Unshaded.j3md");
    picMat.setTexture("ColorMap", tex);

Seems like maybe your sky is also in the transparent bucket. And your ground too.

Thanks, putting my ground in the opaque bucket helped some… But I’m still having problems, albeit slightly less extreme ones:

(referring to the area around the hill-lookin’ things, not the brown background things.)

I’d like my partially transparent objects to visually overlap without displaying ground around the edges.

Now, What confuses me is that not all objects has that effect. Some objects (made with different image editors) don’t seem to do that. Could my image editor be part of the problem?

Another detail that may or may not be relevant is that I scale these objects. I don’t know if that matters or not, but some of them are scaled differently, so I figured that could play into it…

EDIT: I tried turning off depth writing for the objects, and the edges display perfectly! Of course, it completely breaks the game perspective, which is a bigger problem.


There are about 5,136,274,247,117 articles about transparent depth sorting on the internet. Probably about 20% of that number on this forum alone. So I won’t cover it in detail here because some google searching would help you understand what’s going on.

The simple/quick explanation: nearest depth wins if drawn first. If that was transparent then it occludes everything behind it.

Ok, I did some looking around on this forum with the search term " transparent depth sorting". Most of these returned threads about how transparent meshes interact with themselves. The only potentially useful thing I found was a post where someone said something about creating a Z buffer state. Would that solve my problem? If it could, I’ll go do more research about that.

I also searched google with the phrase “transparent depth sorting issues” and learned a fair amount about transparency issues in general, but all of the solutions were for openGl and/or nonsolutiions. The general message I got was “there’s no elegant way to do multiple overlapping transparent objects.” Is this the case?

The third option, of course, is that my “search-fu” is once more thoroughly underwhelming.

There is no solution. Just various forms of compromise. The point of reading about it was to understand why there is no solution… and maybe allow you to pick which compromise you want.

For example, setting the alpha discard threshold (or the alpha falloff) to a really large value (0.99) will fix it too… at the expense of soft edges. Either of those methods is simply discarding pixels that have an alpha smaller than a certain amount, thus keeping them from writing to the depth buffer.

1 Like

And I suspect in your screen shot that your mesh is self occluding. I have no idea how your scene is constructed so I’m just guessing… but it’s one of the handful of reasons s tiny snippet of screen could be seen to not sort properly. More of the scene description or even the full screen shot would have helped narrow it down further maybe.

1 Like

Good greif.

I added the line

picMat.setFloat(“AlphaDiscardThreshold”, 0.4f);

and my graphics all work in their horrible hand-GIMP’d glory. As far as compromises go, I think that this is a pretty good one–I get some mildly jaggy edges, but all the stuff does display properly. And I learned a fair amount on the way.

Thanks, pspeed!