2
\$\begingroup\$

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:
enter image description here

Without anti-aliasing:
enter image description here

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.

\$\endgroup\$
  • \$\begingroup\$ Is this question similar? \$\endgroup\$ – ThorinII Dec 10 '13 at 23:08
  • 1
    \$\begingroup\$ As what Nick Wiggill said, it isn't a bleed, it's actually a "space" between faces. I don't see it often on my desktop in Minecraft, but on my ultrabook I see it more often than not (possibly related to computing power or memory of the graphics card, as well as mesh-related issues). \$\endgroup\$ – Pandacoder Dec 10 '13 at 23:25
  • \$\begingroup\$ Aye, @RobbieLodico. The rasteriser implementation in hardware would dictate how often this would show up. So different hardware would show it with differing frequency. \$\endgroup\$ – Engineer Dec 11 '13 at 0:52
  • \$\begingroup\$ OP, make your ground tile colours distinct (i.e. not just different shades of green) and you should see the different colours of the ground coming through the gaps. \$\endgroup\$ – Engineer Dec 11 '13 at 0:55
  • \$\begingroup\$ See gamedev.stackexchange.com/questions/46963/… \$\endgroup\$ – msell Dec 11 '13 at 14:36
1
\$\begingroup\$

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.
\$\endgroup\$
  • 1
    \$\begingroup\$ Hi Nick. I'm not sure this is my problem as the artifacts aren't the same as the ones behind. They are the same as the nearby pixels on the texture however, and when changed, also change the color of the artifacts. So the texture seems to be my problem. If I disable anti-aliasing I see no artifacts. Perhaps this is something that happens when you don't sample from the center of a pixel? Could that be why? Not sure if that explains why artifacts only show when anti-aliasing is enabled though. \$\endgroup\$ – Joey Morani Dec 11 '13 at 1:01
  • \$\begingroup\$ Fair enough @JoeyMorani... I'm way off then. And I can now see from your image that the problem occurs even along the top edges of the cube. Have you tried changing that green line in your texture to say, white to see if the problem still occurs? Otherwise, have you seen this answer? - A bit of a shot in the dark. \$\endgroup\$ – Engineer Dec 11 '13 at 10:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.