Png transparent pixels in trianglestrip not rendering see-through

I have been trying to render png files with VertexPositionColorTexture in 3d space. A simple flat square with a texture that has transparent pixels around the outside of the image. Yet sometimes it will render see through, and other times it will render the color of the clear screen (cornflowerblue) in the empty pixels.

Example of it drawing clear screen color in between cars.

But I will go to the other side and it will draw see through.

I used 4 sets of VertexPositionColorTexture of 6 points. 2 end-and-end. And 2 at the same points, reversed (I could have made these 2 one set [like a flat cube] but I did this for the sake of testing the alphas). Also, I have the car repeating 4 times x 4 times just to see through the transparent parts better.

I also tried VertexPositionNormalTexture, and it still did not fix it. The AlphaBlend is on and ApplyChanges has been called to the graphics device. I draw the images via TriangleStrip.

Btw, my experiences with monogame are limited, but I have made a full game with C# and XNA back when XBLIG was still a thing. I’m not sure of all the changes, but for that game I only used SpriteBatch 2D drawing, and I don’t want to do that with this project.

this is not a monogame problem, but a general rendering problem.

If you use alpha blend you have to sort the meshes back to front, because your mesh will write to the depth buffer without alpha information (depth buffer can not have alpha blend).

A way to make it work is to use alpha test instead, if you write that in a shader it would be a simple clip operation

if(texture.a < 0.9f) clip(-1);

but alpha test looks blocky and is only on/off, no values in between. That might work for you.

Alpha blending and sorting of transparent meshes is a problem to this day and a pain for all engines.

  • Alpha test: hard values, either transparent/invisible or completely visible, can use depth buffer, no sorting requred
  • Alpha blend. soft blending semi-transparent objects are possible, but cannot be used with depth buffer, needs manual sorting ( the meshes must be drawn back to front)
2 Likes

You know, I had actually tried alpha test a few days ago before I even had this problem. Totally forgot about that. Works great now, thanks :slight_smile: How limiting is alpha test though? Would I be abstaining from using certain programming techniques?

alpha testing works with everything, it’s pretty reliable. As said, it’s noticeable since you have hard blocky edges, but if you can live with that it’s great.

You can combine Alpha testing into having more than 2 states with Alpha-to-coverage. This basically makes a checkerboard pattern of alpha tested pixels and then stitches it back together. That way you have semi-transparent states and depth testing still enabled. Not sure if that’s a one click solution though, but it is provided by DirectX and the GPU vendors by default. I just haven’t tried it yet, but you can surely google alpha-to-coverage for more info.
Note: it usually works with MSAA, so you need that enabled in your backbuffer or rendertargets.

Sometimes you need to disable backface culling to make some meshes look like they are intended to look, but that’s a general transparency thing.

1 Like

I will definitely use this as reference if I run into any more alpha-related issues. Now that z-buffer spritebatch sort order just snapped back into my head from years ago, and how things looked weird with the alpha channel if you didn’t have it set right. I appreciate the help.