Gaps between properly sized and aligned meshes in tile system

Questions
1

I’m asking this because I’ve thoroughly tested and researched the problem but still lack the knowledge to solve it.

The scale of the tiles remain unchanged, and another tile in the same tileset works correctly. The tiles’ positions are simple and properly aligned with each other. I suspect there’s a specific trick with the renderer that I’m missing.

2024-06-16 17_26_47-Software
2024-06-16 17_26_47-Software940×403 8.41 KB

2

@Metaphoresy I am working around the similar thing, could you please guide how you are repeating the tiles ? or how to decide number of repetition of tile texture ?

Thanks

3

If you make an online debuggable page that demonstrates the issue, someone might be able to help.

Unfortunately, I am unable to reproduce this issue. All the cubes stay next to each other without dark gaps.

https://codepen.io/boytchev/full/JjqMQLY

image

Good luck with your project.

PS. If the colors come from a texture atlas, you might see texture bleeding.

1 Like
4

Is there an issue with how I’m constructing the map?

const tiles_row = Math.floor(texture.image.width / tile_width);
const tiles_col = Math.floor(texture.image.height / tile_height);

this.map.forEach((tile, coord) => {

    let [x, y] = coord.split(',').map(Number);

    let tileIndex = 0;

    let tile_x = tileIndex % tiles_row;
    let tile_y = Math.floor(tileIndex / tiles_row);

    let offset_x = (tile_x * tile_width) / texture.image.width;
    let offset_y = 1 + ((tile_y + 1) * tile_height) / texture.image.height;
    let tile_width_ratio = tile_width / texture.image.width;
    let tile_height_ratio = tile_height / texture.image.height;

    let geometry = new THREE.PlaneGeometry(1, 1);

    let uvs = geometry.attributes.uv.array;

    uvs[0] = offset_x;
    uvs[1] = offset_y + tile_height_ratio;
    uvs[2] = offset_x + tile_width_ratio;
    uvs[3] = offset_y + tile_height_ratio;
    uvs[4] = offset_x;
    uvs[5] = offset_y;
    uvs[6] = offset_x + tile_width_ratio;
    uvs[7] = offset_y;

    geometry.attributes.uv.needsUpdate = true;

    let material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide            
    });

    let mesh = new THREE.Mesh(geometry, material);

    mesh.position.set(x + .5, -y - .5, 0);

    scene.add(mesh);

});
5

@PavelBoytchev using cubes instead of planes would obscure the issue…
If you used planes, you might see cracks between them?

@Metaphoresy
There isn’t a trick. This is probably just a numeric precision problem.
It could be in the geometry itself, or it could be in the texture reading from the texture.
If you’re using a texture atlas, then it could be a texture bleeding / filtering problem as @PavelBoytchev mentioned.

You can check this by setting texture.minFilter = texture.magFilter = THREE.NearestFilter and see if the appearance changes.
If you are using a texture atlas, and you need to have filtering, then you have to add a “skirt” of pixels around each tile in the atlas to give the filter some area (sometimes up to 16 pixels skirt is needed!) to properly average the neighboring pixels. The size of the skirt depends on the texture anisotropy level.
You could also inset your UV coordinates by a half pixel or less… but then your tiles will have slightly thinner edge pixels.
https://threejs.org/docs/#api/en/textures/Texture.anisotropy