Block engine - transparent faces of blocks have artefact color

[FaRaOn]

Hi,

I am new to 3D graphics programming and I am currently implementing a simple block/voxel system as practice for shapes, geometries, lighting, materials, etc.

I am already properly rendering solid standard block faces. Now I implemented my first block type with transparent textures.
Unfortunately they do not render properly from some angles.

First, how the block is created:
It consists of 12 faces (6 front, 6 back, in the example picture the bottom face is not being rendered due to being connected to the ground).

The faces have a UV map which applies a transparent part of an image to them (the transparent part of the image has an alpha channel).

I use position, index, normal, and TexCoord buffers to create them. I first add the backface data then the front face data.

I am loading my texture like this:

blockTextures = assetManager.loadTexture(new TextureKey("Textures/TextureAtlas.png", false));

and this is the material I create

Material material = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md"); 
material.getAdditionalRenderState().setBlendMode(RenderState.BlendMode.Alpha);
material.setTexture("ColorMap", blockTextureAtlas);

which I apply to my chunk geometry.

Here is how the artefact looks like. It appears differently (or not at all) depending on the viewing angle.

As you can see it creates some solid blue area which I dont want to be there.
How can I get rid of this?

[pspeed]

Alpha/Transparency Sorting, Your Z-buffer, and You

Since this comes up every three or four days, I decided to put together some visual aids. There is often a lot of confusion with how pixels get processed in relation to the z-buffer and why sorting is important. Most importantly it can be mind-warping trying to wrap one’s head around how to ‘fix’ the cases where proper sorting isn’t possible. Hopefully these diagrams help show the futility of it all… I mean the trade offs one has to make to get transparency looking its best in the general cas…

It has to do with the z-buffer.

In your case, you can solve it in these simple cases by not rendering the back face. But if you are batching meshes like you should be (ie: many blocks would be one mesh anyway) then you will still hit this issue.

You are only left with a few options:

1. Do like Minecraft and don’t have semi-transparent blocks. Simple.
2. Sort the faces back to front and regenerate the transparent mesh in that chunk whenever the player moves to a new side. Complicated. Maybe slow.
3. Look into writing a shader that does screen door transparency… ie: not really semi transparent but at the pixel level it will render a dithered pattern to simulate it with fully transparent and full opaque pixels. Without special tricks, near glass will completely obscure far glass… but at least it will do so consistently.