서페이스 노멀을 사용하는 정사영 3D 백 페이스 컬링

Question

저는 HTML5 캔버스 3D 렌더러를 만들고 있는데, 지금까지는 도움을받지 못했습니다.하지만 저는 일종의 쇼를 시작했습니다. 몇 가지 법선 계산의 도움으로 입방체에 도형 컬링을 구현하려고합니다. 또한, WebGL로 태그를 지정했습니다. 일반적으로 사용 사례와 3D 가속화 모두에 적용 할 수있는 충분한 질문입니다.

필자는 큐브를 회전시킬 때 잘못된 얼굴이 숨겨져 있음을 발견했습니다. 예 :

I 다음 정점 사용하고

: https://developer.mozilla.org/en/WebGL/Creating_3D_objects_using_WebGL#Define_the_positions_of_the_cube%27s_vertices

I가 사용하고 일반 절차이다

1. 는를 변환하여 변환 행렬을 생성을 큐브의 정점

2. 각면 및 각 f의 각 점 에이스, 저는 이것을 vec3s로 변환하고, 1 단계에서 만든 행렬로 곱하십시오.

3. 그런 다음 Newell의 방법을 사용하여 얼굴의 법선을 얻은 다음 그 법선에서 내적을 얻습니다. [-1, 1, 1], 왜냐하면 나는 여기에 넣을 좋은 가치를 생각할 수 없었기 때문이다. 어떤 사람들은 카메라의 위치를이 카메라에 사용하는 것을 보았지만 ...

4. 카메라 매트릭스를 사용하는 일반적인 단계를 건너 뛰고 결과 벡터에서 x 값을 가져 와서 내 라인으로 전송합니다. 얼굴 렌더러가 있지만, 0보다 큰 점을 찍을 때만 나타납니다. 실제로 내가 끌어 당기는 것은 다소 임의적이라는 것을 알고 있습니다.

두 가지가 궁금합니다. 3 단계의 절차가 정확하면 (가장 가능성이 높음) 얼굴에 그리는 점의 순서가 잘못된 경우 (가능성이 높음) 후자가 사실이라면 문제를 시각화하는 방법을 잘 모릅니다. 나는 법선이 관련이 없다고 말하는 사람들을 보았습니다. 선이 그려지는 방향입니다.하지만 ... 저의 주위를 제 머리로 감싸는 것이 어렵습니다. 그것이 내 문제의 원천이라면 말이죠.

그것은 아마 문제가되지 않지만, 내가 사용 매트릭스 라이브러리 GL-행렬이다 :

https://github.com/toji/gl-matrix 또한

, 내가 사용하고 내 오픈 소스 코드베이스에있는 특정 파일이 여기에 있습니다 : 사전에

http://code.google.com/p/nanoblok/source/browse/nb11/app/render.js

감사합니다!

Answer 1

전체 시스템을 검토하지는 않았지만 "만들어진 vec3"은 임의적이어서는 안됩니다. 그것은 "화면에서"벡터이어야하는 (검색 투영이기 때문에 ⟨X, Y, Z⟩ → ⟨X, 을 Y⟩)는 어느 ⟨0, 0, - 1⟩ 또는 ⟨0, 0, 1입니다. 명시적인 "카메라 매트릭스"(보통 뷰 매트릭스라고 함)는 없지만 카메라 (뷰 및 투영)는 4 단계 프로젝션에 의해 암시 적으로 정의됩니다!

그러나이 방법은 원근감있는 투영법이 아니라 직각 투영법에서만 효과가 있습니다 (화면 왼쪽면의면을 보면서 뷰 방향과 오른쪽 및면을 마주 보게하면 점의 곱은 0이되지만 볼 수 있음). 실제 3D 하드웨어에서 사용되는 일반적인 방법은 먼저 투영을 포함하여 모든 변형을 수행 한 다음 결과 2D 트라이앵글이 반 시계 방향인지 또는 시계 방향인지를 확인한 다음 해당 조건을 기반으로 유지하거나 삭제합니다.