Cub3d 학습일지 - 3 - 레이캐스팅

 대표 사진

Raycasting Basics with JavaScript

제 3강 Raycasting 레이캐스팅

3.1  Defining the Field of View 시야 정의하기
3.2  Coding the Field of View Ray Increments 시야 광선 증분 코딩
3.3  Finding Wall Hits 벽 타격 찾기
3.4  Finding Horizontal Intersections 수평 교차점 찾기
3.5  Finding Vertical Intersections 수직 교차점 찾기
3.6  Finding the Intersection With the Grid Cells 그리드 셀로 교차점 찾기
3.7  Coding the Horizontal Wall Intersection 수평 벽 교차점 코딩하기
3.8  Coding the Vertical Intersection 수직 교차점 코딩하기
3.9  Fixing the Intersection Offset Error 교차점 오프셋 에러 고치기

---

3.1  Defining the Field of View 시야 정의하기
3.2  Coding the Field of View Ray Increments 시야 광선 증분 코딩

직접 강의 참고하시는게 가장 좋습니다.

3.2는 깃헙의 P3_POV에 있습니다.

https://github.com/KKWANH/cub3d_kkim

KKWANH - Overview

---

3.3  Finding Wall Hits 벽 타격 찾기

What raycasting really is?

플레이어가 맵 중 어느 한 점에 있다고 해봅시다. (Pic 1의 빨간 동그라미)

그리고 거기서 출발한 광선 중 하나가 벽에 닿았습니다. (빨간 네모)

그럼 어떻게 광선이 닿아서 얼마의 거리인지를 알 수 있을까요? 어떤 기술을 이용해서?

Q. 광선을 한 픽셀 씩(x 한 픽셀, y 한 픽셀) 이동하여 닿았는지 매번 검사하면 어떨까요?
 A. 음.. 작동은 하겠지만... 굉장히 복잡해지고 비효율적이게 될 거에요.

다른 방법은 벽의 경계선마다 검사하는 방법이에요.

위 질문처럼 1px 씩 나아가지만, 경계선마다(intersection) 벽이 있는지 검사하는게 훨씬 효율적이겠죠?

 

그럼 위 그렇게 광선이 나아갈 때 벽과의 거리는 어떻게 알 수 있을까요?

 

The best way is check for horizontal and vertical intersections separately.

가장 효율적인 방법은 수평과 수직을 각각 재는 겁니다.

When there is a wall on either a vertical or horizontal intersection, the checking stops.

수직/수평 교차점에 벽이 있으면 검사를 중지합니다.

The distance to both horizontal and vertical intersection points is then compared,

and we select the closest one.

그 다음 각각의 교차점까지의 거리를 비교한 뒤 가장 짧은 점을 선택합니다.

 

Pic 2를 보시면 이해가 더 되실 거 같아요.지금 보시면 파란 점들은 ray의 horizontal(수평)만 검사하고 있어요.초록 점들은 vertical(수직)만 검사하고 있고요.

 

그 다음 벽에 닿은 점들 (맨 끝의 파랑, 초록) 까지의 길이를 각각 계산하여 비교한 뒤 짧은 걸 찾아요.여기선 파란 점이 제일 가까우니 파란 점이 선택되겠네요!

---

3.4  Finding Horizontal Intersections 수평 교차점 찾기
3.5  Finding Vertical Intersections 수직 교차점 찾기
3.6  Finding the Intersection With the Grid Cells 그리드 셀로 교차점 찾기
3.7  Coding the Horizontal Wall Intersection 수평 벽 교차점 코딩하기
3.8  Coding the Vertical Intersection 수직 교차점 코딩하기
3.9  Fixing the Intersection Offset Error 교차점 오프셋 에러 고치기

Blah Blah Blah...2D END!!!2D가 끝났습니다! 여기서 확인하세용!github.com/KKWANH/cub3d_kkim/tree/main/J5_2D_Final

KKWANH/cub3d_kkim