перекрывающиеся полигоны в холсте html5

Question

Я пытаюсь визуализировать простые трехмерные фигуры (в данном случае куб) в канале html5. Переводить 3D-точки в 2-мерную плоскость было достаточно просто, поэтому я начал раскрашивать полигоны. Они перекрываются в неправильном порядке. Поэтому я просто вычисляю расстояние каждого многоугольника (основываясь на среднем значении 4 углов) и сортирую их на основе этого.

За исключением того, что это на самом деле не работает. Итак, как вы решаете, какие полигоны вы рисуете первыми?

P.S. Я пытаюсь узнать, как это сделать, поэтому использование существующих библиотек или чего-то еще не сработает.

Answer 1

Пройдя поиск некоторое время, я нашел способ проверить это. Это делается с помощью «отбраковки задней поверхности», и, насколько я понимаю, вы сначала вычисляете 2-мерные позиции многоугольника, затем берете 3 точки и сравниваете их, чтобы определить, каким образом полигон обращен.

чек, который я использовал, выглядит следующим образом:

ifVisible = function(p1, p2, p3)
{
    return ((p2[0]-p1[0])*(p3[1]-p1[1])>(p3[0]-p1[0])*(p2[1]-p1[1]));
}

где p1, p2 и p3 - массивы, содержащие положения точек x и y.

Это работает, только если у вас есть порядок для точек в ваших многоугольниках (в моем случае позиции по часовой стрелке, если смотреть на камеру)