Bump mapping's basic by MSPark( Devrookie )

1. 범프매핑( bump mapping ) 2010/09/18 Devrookie엠에스박( 박민수 )

2. 목차 범프매핑이란? 기본 아이디어 범프매핑 종류 범프매핑 구현 소스 참고 Q & A

3. 범프매핑이란? 범프매핑: 1978년도 blinn에 의해 제안된 표면에 울퉁불퉁한 굴곡이 있도록 보이는 범프 맵( 텍스쳐)를 사용한 기법이다. 특정 기술 하나를 지칭하는 것이 아니라 위와 같은 기법들을 모두 범프매핑이라 한다.

4. 기본 아이디어 3D처럼 보이게 하려면 입체감이 있어야 한다. 2D화면에서 입체감은 그림이나 사진과 마찬가지로 그림자( 음영 )이 있어야 한다. 많은 버텍스를 이용해서 3D 모델을 그렸다 하더라도 음영이 없다면 그저 밋밋하게 보일 뿐이다.

5. 기본 아이디어

6. 기본 아이디어 점점 더 입체적인 그래픽을 제공해야 한다. 이를 위해서는 버텍스 많이 들어간 모델이 필요하지만 메모리 낭비와 부하가 발생한다. 입체는 결국 음영으로 결정된다. 음영만 잘 나타난다면 로우폴리곤 모델도 하이 폴리곤 모델처럼 보일 수 있다.

7. 기본 아이디어 굴곡이 지는 모습을 연출 하고 싶은 모델이 있다. 이 굴곡을 표현할 수 있는 하이 폴리곤 모델을 만든다. 하이 폴리곤의 멋진 음영을 저장한다. 로우폴리곤에 저장된 음영을 적용 시킨다. 로우폴리곤으로 하이 폴리곤의 효과를 누린다.

8. 기본 아이디어 음영 처리는 라이팅이 적용되었다는 의미이다. 라이팅은 법선 벡터( 노말 벡터 )와 광원 벡터를 통해 계산된다. 로우폴리곤 모델에서 하이 폴리곤 모델의 법선 벡터를 적용하려면 버텍스를대칭시키는 것으로는 계산 할 수 없다.

9. 기본 아이디어 음영을 저장한다. 모델의 법선 벡터를 저장한다. 픽셀 단위로 저장해야 한다. 딱 맞는 저장 공간 -> 텍스쳐!( 법선 맵) R , G , B 값에 벡터 X , Y , Z를 저장한다. 계산 할 때는 R , G , B값을 벡터 X , Y , Z로 변환해서 계산한다.

10. 기본 아이디어

11. 기본 아이디어

12. 기본 아이디어

13. 기본 아이디어 로우폴리곤-> 범프매핑-> 텍스쳐 추가 -> 쉐도우 추가

14. 기본 아이디어 주의할 점 앞에서도 말했듯이 픽셀 당 계산일 뿐 버텍스에는 어느 영향도 끼치지 않는다. 즉 버텍스가 많아지거나 위치가 변화하는 것은 아니다. 위에 것이 연장선으로 정상적인 굴곡의 차폐를 기대해서는 안 된다. 안 보여야 될 부분이 보이는 등 문제가 생길 수 있다.

15. 범프매핑 종류 범프맵 종류 Offset Vector Bump Map Height Field Bump Map Normal Map 범프매핑 종류 Emboss Bump Mapping Dot Product Bump Mapping Environment Map Bump Mapping

16. 범프매핑 종류 범프맵 종류 Offset Vector Bump Map Height Field Bump Map Normal Map 범프매핑 종류 Emboss Bump Mapping Dot Product Bump Mapping Environment Map Bump Mapping

17. 범프매핑 구현 – 법선 벡터 저장 텍스쳐에법선의 방향을 저장해야 한다. 쉬운 방법으로는 모델의 기복을 높이맵으로 저장한 뒤 가공하는 것이다. 높이맵은0~255사이값을 이용해 높이만 저장시키는 텍스쳐를 말한다. ( 흰색이 높은 부분 검은색이 낮은 부분을 의미한다. )

18. 범프매핑 구현 – 법선 벡터 저장

19. 범프매핑 구현 – 법선 맵 구하기 높이 맵에서 법선 맵으로 변환하려면 약간의 계산이 필요하다. 기본 원리는 구하고자 하는 UV좌표의 한칸씩 옆에 있는 높이값의 평균을 이용해 두개의 벡터를 만들고 그 벡트들의 외적을 구하는 것이다. D3DXComputeNormalMap() 사용하면 된다.

20. 범프매핑 구현 – 법선 맵 구하기

21. 범프매핑 구현 – 법선 맵 구하기 델타 x , 델타 y는 바로 옆에 것을 사용하려면 1로 잡으면 된다. 나온 높이값에 비율을 적용시키면 그 비율 만큼 더 밝고 어두운 부분이 강해지거나 약해진다. UV중 U를 X축으로 V를 Y축으로 법선을Z축으로 저장하고 있다. 그래서 파랗구나...

22. 범프매핑 구현 – 법선 맵 구하기

23. 범프매핑 구현 – 법선 맵 구하기 위에 방법을 사용하면 탄젠트 공간을 기준으로 법선을 저장하였다라고 말한다. 탄젠트 벡터가 X , 종법선 벡터가 Y , 법선 벡터가 Z 왜 그냥 평범하게 노말값을 계산해서 저장하지 않고 이런 변환을 통해서 탄젠트 공간 기준의 노말값을 저장하는 것일까?

24. 범프매핑 구현 – 법선 맵 구하기 탄젠트 공간 법선 맵 오브젝트 공간 법선 맵

25. 범프매핑 구현 – 법선 맵 구하기 오브젝트 공간 법선 맵 생성 방법 : 그냥 모델에서 뽑으면 된다. 장점 사용하기 쉽다. ( 그냥 계산 하면 된다. ) 단점 움직이는 물체에 적용하기엔 부적절하다.( 연산이 너무 많아진다. )

26. 범프매핑 구현 – 법선 맵 구하기 탄젠트 공간 법선 맵 생성 방법 : 위의 방법대로 뽑으면 된다. 장점 법선을 변환할 필요는 없다. 단점 카메라 , 버텍스등을 탄젠트 공간으로 변환해야 한다.

27. 범프매핑 구현 – 법선 맵 구하기 오브젝트 공간 법선 맵을 사용한다고 가정하면 캐릭터가 애니메이션이라도 하는 날에는 법선들을 애니메이션에 맞게 변환해 주어야 하는데텍스쳐에서 뽑은 값이기도 하고 텍셀마다 처리를 하기 때문에 픽셀 쉐이더가계산량이 너무 많아진다. 탄젠트 공간 법선 맵을 쓰자.

28. 범프매핑 구현 – 법선 맵 구하기 미리 법선 맵을 생성하고 사용하는 것이 더 좋다. NVDIA에서 제공하는 Photoshop 플러그인 Normal Map Plugin등 법선 맵을 만들어 주는 처리가 많다. 요즘 툴들이 좋아서 모델 만들 때 같이 뽑혀 나온다.

29. 범프매핑 구현 – 법선 맵 적용 법선 맵을 적용하는 방법은 적용하고자 하는 물체의 버텍스, 카메라 , 조명등 계산에 필요한 것들을 탄젠트 공간으로 변환하고 계산하면 된다. 탄젠트 공간에 대해 다시 정리하면 T : Tangent Vector B : Binormal Vector N : Normal Vector 이 3개가 기저인 공간이다.

30. 범프매핑 구현 – 법선 맵 적용

31. 범프매핑 구현 – 법선 맵 적용 로컬 좌표계 에서 탄젠트 공간으로 변환 X -> U , Y -> V로 변환되어야 한다.

32. 범프매핑 구현 – 법선 맵 적용 삼각형의 각 버텍스를P0 , P1 , P2로 생각하자. 그리고 각각 버텍스의UV좌표를( u0 , v0 ) , ( u1 , v1 ) , ( u2 , v2 )로 생각하자. 이 삼각형 안의 한 점을 Q로 보고 UV좌표를( u , v )로 생각하자. 탄젠트 공간으로 변환해주는 행렬은 다음과 같다. 이 행렬을 구해보자.

33. 범프매핑 구현 – 법선 맵 적용

34. 범프매핑 구현 – 법선 맵 적용

35. 범프매핑 구현 – 법선 맵 적용 정점들의 T , B 벡터들의 평균을 이용해서 계산하면 직교하지 않을 수 있다. 안전하게 그램 – 슈미트 방법으로 직교하는 기저를 만들어 준다. D3DXComputeTangent() 사용 T′ = T − (N · T)NB′ = B − (N · B)N − (T′ · B)T′/T′2

36. 범프매핑 구현 – 법선 맵 적용

37. 범프매핑 구현 – 법선 맵 적용 탄젠트 공간 변환 행렬을 버텍스쉐이더에 넘겨주어서 광원 벡터 , 카메라 시선 벡터등을 변환해 준다. 픽셀 쉐이더에서는 법선 맵의RGB를 읽어드려서 조명계산을 해주면 된다.

38. 소스 참고

39. 참고자료 Real Time Rendering2판 DirectX 9 쉐이더 프로그래밍 http://allosha.tistory.com/category/3D%20그래픽스%20매니악스/법선맵(노말맵) http://www.gamasutra.com/view/feature/1515/messing_with_tangent_space.php?page=1 http://www.terathon.com/code/tangent.html http://en.wikipedia.org/wiki/Gram-Schmidt

40. 마무리 끝