How to display an inner border to a polygon

Questions
1

Hello everybody.

I’m struggling to display an inner border to my polygons.
I figured how to create a slight external border of 1px but this isn’t the result I want. I want it thicker and inner (because polygons are really close and the border will interfere).

Here’s a screenshot of my polygons right now (there are six polygons really close to each other):

As you can see sometimes the border disappears and it’s ugly.

Here’s the code displaying a polygon:
function createSheet(scene, vertices) {
let verticesTriangulated = triangulate(vertices);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(verticesTriangulated, 3));
const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material);

const edges = new THREE.LineSegments(
    new THREE.EdgesGeometry(geometry),
    new THREE.LineBasicMaterial({ color: 0x000000 })
);
mesh.add(edges);

mesh.position.set(0, 0, 0);
scene.add(mesh);

}

Thank you really much for your help

1 Like
2

Have you tried Material.polygonOffset et al, applied to the mesh material?

3

How can I use that to display the border? Can you provide like an example?
I tried it and it does nothing even when I set polygonOffsetFactor and polygonOffsetUnits.

4

I also tried it, and the internal borders (where individual shapes touch each other) are well shown. In the following video the first half is without polygonOffset and the second half is with polygonOffset:

1 Like
5

Thank you for the example.

But I still don’t know how to make my border thicker because at the moment it’s showing me a pixelated 1px thick border. I can see on your example that the border is thicker than mine, how did you do that ?

6

Have you turned on antialiasing?

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

7

Yes I have antialising turned on. I searched for the difference between your code and mine and I have logarithmicDepthBuffer enabled (because I have a runway doing z-fighting with the ground).

https://codepen.io/ads4/full/wvZEgZY

Is there a solution for the borders or I have to disable logarithmicDepthBuffer and find another solution for z-fighting ?

Thanks

8

Here is the codepen with the runway. As you can see, when you move the camera, the runway is z-fighting w/ the ground : https://codepen.io/ads4/full/PogdpJV
This is why I activated logarithmicDepthBuffer and set depthWrite: false to the planeMesh.
But I want to avoid depthWrite because I dont want objects under the planeMesh to be shown.

9

Are these lines fat enough:

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

image

The cause of your z-fighting is because the planet is too big and this jitters the plane. Make it smaller, as in the demo above.

1 Like
10

Thank you so much.
I choosed the right linewidth. And no z-fighting issues with a 10000x10000 planet (runways shouldn’t extend 5000).

Have a nice day!