Transparent pixels rendered to depth buffer

[Danjb1]

Transparent pixels are being rendered to the depth buffer, which causes them to incorrectly obscure pixels behind them.

After uncommenting and tweaking the debug code to render the depth buffer, this was my result:

This is a Minecraft skin where the outer layer is mostly transparent, but here it appears fully opaque.

This was the code I used to render the depth buffer:

    // debug; draw zbuffer

    for (var i = 0, l = zbuffer.length; i < l; i++) {
      // This is a bit of a fine-tuning exercise.
      // These numbers seem to work for my scene but may not work in all cases.
      // My objects are between z=0 and z=10.
      const o = i * 4;
      var v = (1 - (zbuffer[i] / 100000 - 166)) * 255;
      data[o + 0] = v;
      data[o + 1] = v;
      data[o + 2] = v;
      data[o + 3] = 255;
    }

If I find a fix I will post it here.

[Danjb1]

I managed to fix this by changing the basicMaterialShader function.

Before:

  if (buffer[colorOffset + 3] == 255)   // Only opaue pixls write to the depth buffer
    depthBuf[offset] = depth;

After:

  if (opaci > 0)    // Only opaue pixls write to the depth buffer
    depthBuf[offset] = depth;

Result:

I'm not sure this is 100% correct as this could also write translucent pixels to the depth buffer, but it's good enough for my purposes as I don't have any translucent obejcts.

Cuiously, in my testing, opaci was 0 for transparent pixels, 1 for opaque pixels on a layer with transparency, and 255 for fully opaque layers, so I suspect there may be something amiss there..