Удаление скрытых линий Canvas 2D для 3D-каркаса — подход к буферу глубины не работает на сложных сетках ⇐ Html

[Anonymous]

Я реализую удаление скрытых линий для каркасного 3D-рендеринга с помощью HTML5 Canvas 2D. При рендеринге твердого объекта с наложением каркаса края за твердыми гранями должны быть скрыты.
Перетащите, чтобы повернуть. Переключите «Рентген», чтобы увидеть разницу между удалением скрытых линий и без него. Удаление скрытых линий работает неправильно — края, которые должны быть скрыты, видны, а края, которые должны быть видны, иногда скрыты.
Подходы, которые я пробовал
1. Моделирование буфера глубины
Создайте закадровый холст в качестве буфера глубины, визуализируйте лицевые поверхности, обращенные вперед, со значениями оттенков серого, кодирующими глубину (темнее = ближе), затем отберите точки вдоль каждого края и сравните глубины:

Код: Выделить всё

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 

Подробнее здесь: [url]https://stackoverflow.com/questions/79854050/canvas-2d-hidden-line-removal-for-3d-wireframe-depth-buffer-approach-fails-on[/url]