html5 캔버스에서 겹치는 폴리곤

Question

html5 캔버스에서 간단한 3D 도형 (이 경우에는 큐브)을 렌더링하려고합니다. 3d 점을 2 차원 평면으로 쉽게 변환 할 수 있었기 때문에 앞으로 다각형을 채색하기 시작했습니다. 그것들은 잘못된 순서로 중첩됩니다. 그래서 나는 (각 모서리의 avarage에 기초한) 각 다각형의 거리를 계산하고이를 기반으로 정렬합니다.

실제로 작동하지 않는 것을 제외하고. 그렇다면 먼저 그리는 폴리곤을 어떻게 결정합니까?

P. 나는 이것을 만드는 법을 배우려고 노력하고있어, 기존의 라이브러리를 사용하거나 실제로는 그렇게하지 않을 것이다.

Answer 1

잠시 동안 검색 한 후이를 확인하는 방법을 찾았습니다. 그것은 '후면 컬링 (backface culling)'을 통해 이루어지며, 처음부터 다각형의 2 차원 위치를 계산 한 다음 3 점을 취해 비교하여 다각형이 어느 방향으로 향하는지를 결정합니다.

I 사용한 검사는 다음과 같다 :

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 위치의 점을 포함하는 어레이이다.

폴리곤의 점에 대한 순서가있는 경우에만 작동합니다 (제 경우 카메라의 위치가 시계 방향 일 때)