Distant object rendered incorrectly.

[KokeCacao]

Before Fix:

After Fix:

Why it Happens: Incorrect MipMap level blends alpha channel.

The Fix:

  protected createAtlasTexture(image: ImageData) {

    const texture = this.gl.createTexture()!
    this.gl.bindTexture(this.gl.TEXTURE_2D, texture)

    const ext = this.gl.getExtension('EXT_texture_filter_anisotropic')
    || this.gl.getExtension('MOZ_EXT_texture_filter_anisotropic')
    || this.gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic');
    if (ext) {
      this.gl.texParameterf(
        this.gl.TEXTURE_2D,
        ext.TEXTURE_MAX_ANISOTROPY_EXT,
        4  // try 2, 4, 8, or 16 depending on performance/quality balance
      );
    }

    this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, image)

    // only sample up to mip level 4 because Minecraft block texture usually 16x16 pixels
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_BASE_LEVEL, 0);
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAX_LEVEL, 4);

    // linear blend between the two closest mipmap levels, nearest texel in each.
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST_MIPMAP_LINEAR)
    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST)

    this.gl.generateMipmap(this.gl.TEXTURE_2D)

    return texture
  }

I can draft a PR if you wish.

[misode]

@KokeCacao Can you check whether this is also fixed by #61?

[KokeCacao]

#61 only

This is kinda bad, although much better than the unfixed version in "Before Fix (none)" image, most of the grass region is still not fully opaque.

#60 + #61

I would expect this to be better than "After Fix (#60)", but it is not. Not sure why, but it missed 9 pixels in the grass region, but otherwise it is near perfect. Update: Okay, the 9 missing pixels is caused by the second commit of #61. Specifically by removing withUvEpsilon and/or duu/dvv.

#60 + #61 (but keep uVEpsilon)

This one looks okay from afar but stretching UV is such a blasphemy and I don't like it.

#60 + #61 (but keep clamp calculation in typescript)

Best I can do so far. Note that none of our solutions could make the top edge of the grass plane (the 4th and 6th sub-image) fully opaque. It probably has to do with "overlay": "block/grass_block_side_overlay". Since the overlay layer is semi-transparent, the pixel probably only sampled the mipmap of the overlay (transparent), and completely missed the full block in the back.

(Also, there is an inconsistency of using tabs instead of spaces. Can we make a standard by having some auto formatting?)