Color bleed on voxel edges when using anti-aliasing

Question

My Minecraft-like game uses a texture containing four block IDs in each pixel (RGBA). These IDs are used in the shader to determine what color each whole block should be.

I'm having an issue with anti-aliasing because WebGL is assuming that vertices are flat with the texture, which isn't the case. As you can see from this image, green pixels are visible on the edges (as the next pixel on the texture is green):

With anti-aliasing:

Without anti-aliasing:

Here's my code:

gl.activeTexture(gl.TEXTURE1);

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, float32Array);

gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

gl.bindTexture(gl.TEXTURE_2D, texture);

var z = gl.getUniformLocation(material.program, "uSampler");
gl.uniform1i(z, 1);

Does anyone know how I would solve this? From what I've read, is this something that overdrawing would fix? Thanks.

Answer 1

If you don't combine your faces into a single manifold / submesh i.e. by setting up your triangle lists appropriately, that's exactly what happens. This can be seen between individual voxel columns in Minecraft, when heading underground (at least in older versions, you could see the blue sky peeking through when approaching the surface from underground).

You can either:

• combine all faces (presumably separate faces are a requirement for you, however)
• expand each face to intersect ever so slightly, to prevent this from occurring.