Texture Seams in Tile/Sprite Maps

The issue you're experiencing with seams appearing when using LinearFilter instead of NearestFilter is a common problem in texture mapping, especially with tiled textures. Let me explain the technical cause and suggest some practical solutions.

Why Seams Appear with LinearFilter

When using LinearFilter, the GPU performs bilinear interpolation between texels (texture pixels). At the edges of your tiles, this interpolation samples colors from adjacent tiles, causing visible seams. This happens because:

1. The interpolation algorithm blends between neighboring pixels
2. At tile edges, this blending includes pixels from adjacent tiles
3. This creates a visible artifact where colors from different tiles mix

NearestFilter works without seams because it simply picks the closest texel without any blending, so there's no interpolation between tiles.

Solutions to Fix Texture Seams

Here are several approaches to fix this issue while still using LinearFilter:

1. Texture Padding

Add a 1-2 pixel border around each tile in your texture atlas that duplicates the edge pixels of each tile. This ensures that when interpolation occurs, it samples similar colors.

JAVASCRIPTCopied
// When loading your texture
texture.load(url, (loadedTexture) => {
  loadedTexture.magFilter = THREE.LinearFilter;
  loadedTexture.minFilter = THREE.LinearFilter;
  
  // Set proper UV coordinates that account for the padding
  // in your geometry or material
});

2. Adjust UV Coordinates

Inset your UV coordinates slightly to avoid the very edges of each tile:

JAVASCRIPTCopied
// Example of adjusting UVs to avoid edge sampling
function adjustUVs(geometry, tileSize, textureSize, padding = 0.001) {
  const uvs = geometry.attributes.uv;
  
  for (let i = 0; i < uvs.count; i++) {
    // Adjust each UV coordinate to avoid the edge
    // This is a simplified example - you'll need to adapt to your specific mapping
    const u = uvs.getX(i);
    const v = uvs.getY(i);
    
    // Calculate adjusted UVs that avoid the edges
    const tileU = Math.floor(u * tileSize) / tileSize;
    const tileV = Math.floor(v * tileSize) / tileSize;
    
    const adjustedU = tileU + padding + (u - tileU) * (1 - 2 * padding);
    const adjustedV = tileV + padding + (v - tileV) * (1 - 2 * padding);
    
    uvs.setXY(i, adjustedU, adjustedV);
  }
  
  uvs.needsUpdate = true;
}

3. Use Texture Repeat with Clamp

Set appropriate texture wrapping and repeat settings:

JAVASCRIPTCopied
texture.wrapS = THREE.ClampToEdgeWrapping;
texture.wrapT = THREE.ClampToEdgeWrapping;

4. Custom Shader Approach

For more control, you can implement a custom shader that handles the sampling more precisely:

JAVASCRIPTCopied
// Fragment shader excerpt that implements custom filtering
const fragmentShader = `
  uniform sampler2D tileTexture;
  uniform vec2 tileSize;
  uniform vec2 textureSize;
  
  varying vec2 vUv;
  
  void main() {
    // Calculate tile position
    vec2 tilePos = floor(vUv * tileSize);
    vec2 inTilePos = fract(vUv * tileSize);
    
    // Add a small inset to avoid edge sampling
    vec2 adjustedInTilePos = mix(vec2(0.001), vec2(0.999), inTilePos);
    
    // Calculate final UV
    vec2 finalUV = (tilePos + adjustedInTilePos) / tileSize;
    
    gl_FragColor = texture2D(tileTexture, finalUV);
  }
`;

Recommendation

For a component you're planning to submit as a PR or standalone library, I recommend implementing options for:

1. Automatic texture padding
2. UV adjustment helpers
3. A custom shader solution for high-quality rendering

This would give users flexibility based on their specific needs and performance requirements.