Question

I rendering hex grid plane, getting result: http://gyazo.com/0a008cc909138c7e3c1368e0078c7695

Grid distorted. Please help – what could be reason for this and how to fix?
I suppose it happens because of overlaying transparencies, but have no idea how to resolve it without changing mesh to hexes.

Textures file looks: http://gyazo.com/0fea1cb07e52976dc9427b74ab23a252
(it has size 256x256px)

Fragment shader:

vec4 textureColor0 = texture2D(uSampler0, vec2(vTextureCoord.s, vTextureCoord.t));
gl_FragColor = vec4(textureColor0.rgb, textureColor0.a);

Mesh position: -10, -10, -26.99f, while camera: -5, -2, -20 and angle: -8, 0, -22

Mesh generation code:

public static MeshData makePlane(int w, int h) {
float[] planeVerts = new float[12 * w * h];
float[] planeNormals = new float[planeVerts.length];
float[] planeTexCoords = new float[8 * w * h];
int[] planeTriangles = new int[6 * w * h];
{
int idx = 0;
for (int x = 0; x < w; x++) {
  for (int y = 0; y < h; y++) {
    planeVerts[idx] = x * 0.8f;
    planeVerts[idx + 1] = y + 0.5f * x;
    planeVerts[idx + 2] = 0;
    planeVerts[idx + 3] = x * 0.8f;
    planeVerts[idx + 4] = y + 1 + 0.5f * x;
    planeVerts[idx + 5] = 0;
    planeVerts[idx + 6] = x * 0.8f + 1;
    planeVerts[idx + 7] = y + 1 + 0.5f * x;
    planeVerts[idx + 8] = 0;
    planeVerts[idx + 9] = x * 0.8f + 1;
    planeVerts[idx + 10] = y + 0.5f * x;
    planeVerts[idx + 11] = 0;
    idx += 12;
  }
}
}
for (int i = 0; i < planeVerts.length; i+=3) {
  planeNormals[i] = 0;
  planeNormals[i + 1] = 0;
  planeNormals[i + 2] = 1;
}
for (int idx = 0; idx < planeTexCoords.length; idx += 8) {
  if (idx % 32 == 0) {
    planeTexCoords[idx] = 0;
    planeTexCoords[idx + 1] = 0.5f;
    planeTexCoords[idx + 2] = 0;
    planeTexCoords[idx + 3] = 0;
    planeTexCoords[idx + 4] = 0.5f;
    planeTexCoords[idx + 5] = 0;
    planeTexCoords[idx + 6] = 0.5f;
    planeTexCoords[idx + 7] = 0.5f;
  } else {
    planeTexCoords[idx] = 0;
    planeTexCoords[idx + 1] = 1;
    planeTexCoords[idx + 2] = 0;
    planeTexCoords[idx + 3] = 0.5f;
    planeTexCoords[idx + 4] = 0.5f;
    planeTexCoords[idx + 5] = 0.5f;
    planeTexCoords[idx + 6] = 0.5f;
    planeTexCoords[idx + 7] = 1;
  }
}
for (int idx = 0; idx < planeTriangles.length; idx += 6) {
  planeTriangles[idx] = idx * 4 / 6;
  planeTriangles[idx + 1] = idx * 4 / 6 + 1;
  planeTriangles[idx + 2] = idx * 4 / 6 + 2;
  planeTriangles[idx + 3] = idx * 4 / 6;
  planeTriangles[idx + 4] = idx * 4 / 6 + 2;
  planeTriangles[idx + 5] = idx * 4 / 6 + 3;
}
return new MeshData(planeVerts, planeTriangles, planeNormals, planeTexCoords);

}

Answer 1

It looks like simple depth-buffer fighting — the transparent pixels from one polygon are affecting the depth buffer even though they end up having no effect no the colour buffer. So then when a visible pixel that is logically at exactly the same depth gets through the pipeline it may or may not be drawn depending on your depth comparison function and accumulated precision errors.

I think I’m right to say that WebGL follows ES 2.0 in not having the alpha test, so probably you want to modify your fragment shader — compare alpha to a certain threshold and if the fragment is below that threshold then discard it.

Alternatively, if there’s any way you can draw that grid with depth buffering disabled then that’s probably worth following up. Maybe you could draw it last with depth comparison enabled but depth writes disabled, or draw it first with the depth buffer completely disabled and then drawn a single invisible polygon covering the whole plane in order to prime the depth buffer?