Search code examples
javascriptthree.jsintersectionvoxelvisual-glitch

THREE.JS - Glitched lines at two face's intersection

I am currently working on a voxel Minecraft like JavaScript game to improve my JS/TS skills but i am facing an issue.

I draw my voxels by drawing multiple faces of blocks in a BufferGeometry but, between two faces, there is a glitched line like in this image.
glitch

Here are some parts of my code that could be usefull to understand where the problem come from:

My material:

const texture = loader.load(this.instance.ressourceMapUrl);
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;
const material = this.blockMaterial = new THREE.MeshLambertMaterial({
    map: texture,
    alphaTest: 0.1,
    transparent: true,
    vertexColors: THREE.VertexColors
});

My BufferGeometry:

const geometry = new THREE.BufferGeometry();
const positionNumComponents = 3;
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
const normalNumComponents = 3;
geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
const uvNumComponents = 2;
geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
geometry.setIndex(indices);
        
geometry.colors = new Float32Array(colors);
geometry.setAttribute( 'color', new THREE.BufferAttribute( geometry.colors, 3, true) );

geometry.computeBoundingSphere();

A little sample of the vertexes of a normal chunk:

[0, 12, 0, 0, 12, 1, 1, 12, 0, 1, 12, 1, 1, 12, 0, 1, 12, 1, 2, 12, 0, 2, 12, 1, 2, 12, 0, 2, 12, 1, 3, 12, 0, 3, 12, 1, 3, 12, 0, 3, 12, 1, 4, 12, 0, 4, 12, 1, 4, 12, 0, 4, 12, 1, 5, 12, 0, 5, 12...]

Vertexes are used in this order:

let ndx = positions.length/3;
indices.push(
    ndx, ndx + 1, ndx + 2,
    ndx + 2, ndx + 1, ndx + 3,
);

My far & near variables:

    const near = 0.101;
    const far = 240

Thank you a lot for reading this, I know it may be an idiot question but I'm struggling on that for a week and can't manage to find any solution on the web.

Have a nice day.

Solution

  • I found the problem and how to solve it : This was coming from my textures. Since floats are not precise, it was making these lines.

    In order to fix this, I moved the corners I used for my texture by 0.0001 to the center.

    The coordinates of my textures from my texture map are stored like this : [x1, y1 x2, y2]. I did this:

    let uv: [number, number, number, number] = ...;
let correction = uv[0] > uv[2] ? 0.0001 : -0.0001;
uv[0] -= correction;
uv[2] += correction;
correction = uv[1] > uv[3] ? 0.0001 : -0.0001;
uv[1] -= correction;
uv[3] += correction;

    Thank you to everyone that tried to help me and I hope it can help some other people as well !