Das Entfernen verdeckter 2D-Leinen im Canvas für 3D-Drahtmodelle – der Tiefenpufferansatz schlägt bei komplexen Netzen f ⇐ HTML

[Anonymous]

Ich implementieren die Entfernung verdeckter Linien für einen 3D-Drahtmodell-Renderer mit HTML5 Canvas 2D. Beim Rendern eines Volumenkörperobjekts mit Drahtgitterüberlagerung sollten Kanten hinter Volumenkörperflächen ausgeblendet werden.
Zum Drehen ziehen. Schalten Sie „Röntgen“ um, um den Unterschied zwischen mit und ohne Entfernung verdeckter Linien zu sehen. Das Entfernen verdeckter Linien funktioniert nicht richtig – Kanten, die ausgeblendet werden sollten, sind sichtbar, und Kanten, die sichtbar sein sollten, sind manchmal ausgeblendet.
Ansätze, die ich ausprobiert habe
1. Tiefenpuffersimulation
Erstellen Sie eine Offscreen-Leinwand als Tiefenpuffer, rendern Sie nach vorne gerichtete Flächen mit Graustufenwerten, die die Tiefe kodieren (dunkler = näher), dann nehmen Sie Punkte entlang jeder Kante auf und vergleichen Sie die Tiefen:

Code: Select all

function drawFaceToDepthBuffer(verts, nearZ, farZ) {
  for (let i = 1; i < verts.length - 1; i++) {
    const v0 = verts[0], v1 = verts[i], v2 = verts[i + 1];
    const avgZ = (v0.z + v1.z + v2.z) / 3;
    const normDepth = (avgZ - nearZ) / (farZ - nearZ);
    const gray = Math.floor(normDepth * 255);
   
    depthCtx.fillStyle = `rgb(${gray},${gray},${gray})`;
    // draw triangle...
  }
}

function isEdgeVisible(p1, p2, nearZ, farZ) {
  for (let i = 0; i