1. Picking
쿠재아이
김재경

2. Picking?
In computer graphics, the task of determining which
screen-rendered object a user has clicked on
- wikipedia

3. 주제 선정 이유
• 예전 스터디에서 Picking에 관한 얘기가 나옴
• ‘그냥 좌표 값 계산하면 되는거 아닌가?’ 라고 생각
• 그래서 생각을 해보니…

4. 흠…

5. …?!??!?!

6. !!!!!!!!!!!

7. 마우스 좌표는 2차원인데 오브젝트 좌표는 3차원이네???
어떻게 변환하지?

8. 목표
• Picking 알고리즘을 이해한다
1. 클릭된 화면의 점(s)과 s에 해당하는 투영 창의 점(p)을 구한다
2. View Space에서 선택 반직선을 계산한다. 즉, View Space의 원점에서 시작해서 p를
통과하는 반직선을 구한다
3. 교차 판정을 위해 오브젝트들과 반직선을 같은 공간으로 변환한다
4. 반직선과 교차하는 물체를 찾는다. 교차하는 물체가 여러 개이면 가장 가까운 것을 선택

9. 목표
• Picking 알고리즘을 이해한다 할 수 있을까?
1. 클릭된 화면의 점(s)과 s에 해당하는 투영 창의 점(p)을 구한다
2. View Space에서 선택 반직선을 계산한다. 즉, View Space의 원점에서 시작해서 p를
통과하는 반직선을 구한다
3. 교차 판정을 위해 오브젝트들과 반직선을 같은 공간으로 변환한다
4. 반직선과 교차하는 물체를 찾는다. 교차하는 물체가 여러 개이면 가장 가까운 것을 선택

10. 접근법
• 2D -> 3D 변환은 모르지만 그 반대는 알고 있다. (렌더링 파이프라인)
• 그럼 2D -> 3D 변환을 반대로 하면 되겠네
• 참 쉽죠?

11. 변환 과정
• 3D -> 2D 좌표계 변환은 다음과 같은 과정을 거친다
• Local -> World -> View -> Homogenuouse clip(Perspective) -> NDC
-> Viewport(Screen)
• Homogenuouse clip(Perspective)는 2D -> 3D 변환 할 때는 생략 할 수 있다
• 따라서 2D -> 3D 변환 과정은
• Viewport -> NDC -> View -> World -> Local

12. Viewport(Screen) -> NDC
[𝑥 𝑛𝑑𝑐, 𝑦 𝑛𝑑𝑐, 𝑧 𝑛𝑑𝑐, 1]
𝑤
2
0 0 0
0
−ℎ
2
0 0
0 0 1 0
𝑤
2
ℎ
2
0 1
= [
𝑥 𝑛𝑑𝑐 𝑤+𝑤
2
,
−𝑦 𝑛𝑑𝑐ℎ+ℎ
2
, 𝑧 𝑛𝑑𝑐, 1]
• 먼저 3D -> 2D 과정을 알아보자
• NDC -> Viewport(Screen) 과정은 다음과 같다
(w = 백버퍼 가로, h = 백버퍼 세로이며 MinDepth = 0, MaxDepth = 1 일 경우)

13. Viewport(Screen) -> NDC
𝑥 𝑠 =
𝑥 𝑛𝑑𝑐 𝑤 + 𝑤
2
• 그러면 스크린 좌표는 다음과 같다
𝑦𝑠 =
−𝑦 𝑛𝑑𝑐ℎ + ℎ
2

14. Viewport(Screen) -> NDC
𝑥 𝑛𝑑𝑐 =
2𝑥 𝑠
𝑤
− 1
𝑦 𝑛𝑑𝑐 =
−2𝑦𝑠
ℎ
+ 1
• 이제 역으로 정리해보자
• Viewport(Screen) -> NDC 과정은 다음과 같다

15. NDC -> View
𝑥 𝑣 = 𝑟(
2𝑥 𝑠
𝑤
− 1)
• 𝑥 𝑛𝑑𝑐만 해상도 종횡비(𝑟)로 곱하면 된다
𝑦𝑣 =
−2𝑦𝑠
ℎ
+ 1

16. Z 값은?
• Z 값은 cot
𝛼
2
로 계산할 수 있는데… (𝛼는 수직 시야각) Frustum에서
닮은꼴 삼각형의 성질을 이용하면 식을 좀 더 간단하게 바꿀 수 있다 (P는 투영행렬)
𝑥 𝑣
′
=
2𝑥 𝑠
𝑤
− 1
P00
𝑦𝑣
′
=
−2𝑦𝑠
ℎ
+ 1
P11
𝑧 𝑣 = 1

17. View Space의 좌표를 구했다!
1. 클릭된 화면의 점(s)과 s에 해당하는 투영 창의 점(p)을 구한다 - 완료
2. View Space에서 선택 반직선을 계산한다. 즉, View Space의 원점에서 시작해서 p를
통과하는 반직선을 구한다
3. 교차 판정을 위해 오브젝트들과 반직선을 같은 공간으로 변환한다
4. 반직선과 교차하는 물체를 찾는다. 교차하는 물체가 여러 개이면 가장 가까운 것을 선택

18. 반직선을 계산하자
• 3차원 직선의 방정식
• q와 u의 값은 무엇일까? 생각해보자
rv t = qv + tuv

19. 반직선을 계산했다!
1. 클릭된 화면의 점(s)과 s에 해당하는 투영 창의 점(p)을 구한다 - 완료
2. View Space에서 선택 반직선을 계산한다. 즉, View Space의 원점에서 시작해서 p를
통과하는 반직선을 구한다 - 완료
3. 교차 판정을 위해 오브젝트들과 반직선을 같은 공간으로 변환한다
4. 반직선과 교차하는 물체를 찾는다. 교차하는 물체가 여러 개이면 가장 가까운 것을 선택

20. 코드

21. 반직선을 계산하자
• 메시들을 World Space로 변환하고 교차 판정을 할 수도 있지만 비용이 크다
• 반직선을 Local Space로 변환해서 교차 판정 하자

22. 반직선을 계산하자
rw t = qvV−1
+ tuvV−1
= qw + tuw
• 반직선을 World Space로 변환 (V−1 은 View Matrix의 Inverse)

23. 반직선을 계산하자
rL t = qwW−1
+ tuwW−1
= qL + tuL
• 반직선을 Local Space로 변환 (W−1 은 World Matrix의 Inverse)

24. 코드

25. 반직선과 메시가 같은 공간에 있게 되었다!
1. 클릭된 화면의 점(s)과 s에 해당하는 투영 창의 점(p)을 구한다 - 완료
2. View Space에서 선택 반직선을 계산한다. 즉, View Space의 원점에서 시작해서 p를
통과하는 반직선을 구한다 - 완료
3. 교차 판정을 위해 오브젝트들과 반직선을 같은 공간으로 변환한다 - 완료
4. 반직선과 교차하는 물체를 찾는다. 교차하는 물체가 여러 개이면 가장 가까운 것을 선택

26. 반직선에 교차하는 물체를 찾아야 한다
• 2가지를 생각해보자
1. 모든 오브젝트에 대하여 판정을 해야 한다
2. 반직선과 오브젝트의 모든 폴리곤에 대하여 판정을 해야 한다
• 뭔가 비효율적이지 않나?

27. 반직선에 교차하는 물체를 찾아야 한다
• 2가지를 생각해보자
1. 모든 오브젝트에 대하여 판정을 해야 한다 -> Frustum Culling
2. 반직선과 오브젝트의 모든 폴리곤에 대하여 판정을 해야 한다 -> AABB
• 뭔가 비효율적이지 않나?

28. Frustum Culling

29. Frustum Culling
렌더링 파이프라인에서 걸러지는데요???

30. 클리핑의 위치가???

31. AABB(Asix-Aligned Bounding Box)
• 축 정렬 경계 상자
• 메시를 감싸는 상자를 뜻 함

32. 반직선에 대 삼각형 교차판정
• 삼각형의 좌표를 아래 식처럼 표현할 수 있다
T 𝑢, 𝑣 = v0 + 𝑢 v1 − v0 + 𝑣(v2 − v0)
(𝑢 ≥ 0, 𝑣 ≥ 0, 𝑢 + 𝑣 ≤ 1)

33. T 𝑢, 𝑣 = v0 + 𝑢 v1 − v0 + 𝑣(v2 − v0)

34. • 반직선과 삼각형이 만난다는 것은 아래 식을 뜻한다
r t = T(𝑢, 𝑣)
q + 𝑡u = v0 + 𝑢 v1 − v0 + 𝑣(v2 − v0)
−𝑡u + 𝑢 v1 − v0 + 𝑣 v2 − v0 = q − v0

35. −𝑡u + 𝑢 v1 − v0 + 𝑣 v2 − v0 = q − v0
• 여기서 𝑡, 𝑢, 𝑣를 구해야 한다
e1 = v1 − v0
e2 = v2 − v0
m = q − v0
• 식이 복잡하니 정리하자
• 옆처럼 식을 만들고 정리한다
−𝑡u + 𝑢e1 + 𝑣e2 = m

36. • 그리고 이 식을 어떻게 잘 정리하면…
𝑡 = e2 ∙ m × e1 /e1 ∙ (u × e2)
𝑢 = m ∙ u × e2 /e1 ∙ (u × e2)
𝑣 = u ∙ m × e1 /e1 ∙ (u × e2)

37. 끝