Best practice for visible-only IFC edge overlays with LineSegments2?

Questions
1

Hi everyone,

I’m working on a CAD/BIM viewer with IFC models and I want to render clean model edges, but only the visible ones. Hidden/back-side edges should not be shown.

My current approach is roughly:

  • extract edge segments from triangulated IFC geometry
  • filter out internal triangle edges by comparing adjacent face normals / threshold angle
  • render the result as LineSegments2 with LineSegmentsGeometry and LineMaterial
  • use depthTest: true and depthWrite: false
  • avoid wireframe: true, because that shows all triangulation diagonals

Example material setup:

const material = new LineMaterial({
  color: 0x4aa3ff,
  linewidth: 1.5,
  worldUnits: false,
  depthTest: true,
  depthWrite: false,
  transparent: false
});

The problem is that the edges are not always stable visually:

  • sometimes edges disappear depending on camera angle or zoom
  • sometimes edges are visible correctly
  • if I add a small depth bias / offset to avoid z-fighting, some edges can appear where they should be hidden
  • if I do not add any bias, visible edges can fight with the IFC surface and flicker/disappear

What is the recommended way to draw visible-only CAD/IFC edges in Three.js?

Should I use:

  • EdgesGeometry / custom extracted edges with normal threshold?
  • LineSegments2 or regular THREE.LineSegments?
  • polygonOffset on the surface material?
  • a small shader depth bias on the line material?
  • a depth pre-pass?
  • a postprocessing outline / normal-depth edge detection pass instead?

The key requirement is: visible silhouette/feature edges should be shown, but hidden edges must remain hidden.

Any advice on a robust rendering strategy for this would be appreciated.

image
image774×1570 78.4 KB