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.
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.
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 !