SlideShare a Scribd company logo
1 of 27
Download to read offline
버텍스 셰이더로 하는
머리카락 애니메이션
Gregory Dongseok Kim
2016-04-25
2
차례
■ 머리카락을 위한 좋은 셰이딩 모델
■ 머리카락의 구조
■ 접근법
■ 셰이더
3
Good Shading models for Hair
■ Scheuermann's hair shading model1
을 사용하세요!
4
예, 농담입니다. 그렇지만...
■ 머리카락의 Specular를 실시간으로 표현하는, 매우 싸고 효과적인
방법입니다.
■ 더구나, 두개의 Specular중 하나를 사용하여 Front Scattering을 표현
할 수 있습니다.
■ 이 말은, Rim light와 투과 효과만 추가하면, 손쉽게 퀄리티를 향상 시
킬 수 있다는 거죠.
5
솔직히 말하자면,
그냥 언리얼에 있는 머리카락 셰이더 쓰세요
6
머리카락의 구조
■ 머리카락은 크게 4개로 나눌 수 있습니다.
– 앞 머리
– 가운데 머리
– 뒷 머리
– 꾸밈 머리
■ 각 부분은 각각의 흐름을 갖고 있습니다.
– 그 흐름을 통해 움직임을 유추 할 수 있겠죠.
○
가장 중요한 점은 머리카락 뿌리의 위치 입니다.
7
잠깐, 이게 앞 머리라구요? 가운데 머리가 아니라?
8
예, 움직임이라는 측면에서 본다면...
■ 당연히 가운데 머리나 꾸밈 머리로 취급 할 수도 있습니다만
■ 저 부분은 몸통 위에 놓여, 양 옆보다 앞뒤로 움직입니다.
– 실제에서는, 전후좌우로 다 움직입니다. 특히 좌우로 움직일 땐 몸통을 따라
퍼지면서 움직이죠.
– 불행하게도, 제 방식으로는 이것까지 표현하지는 못합니다.
– 그래서 저는 저 부분의 움직임을 앞뒤로 제한하고자 했습니다. 왜냐하
면...
9
접근법
■ 각 버텍스의 움직임 정보를 버텍스 컬러의 각 채널에 저장 합니다.
– R: 움직이는 양
– G: 좌/우 충돌 정보
– B: 클럼핑 그룹
– A: 앞/뒤 충돌 정보
■ 이 말은 머리카락을 이렇게 나눴다는 소리죠
10
11
움직이는 양 설정법
■ 머리카락의 끝부분이 뿌리 부분보다
더 움직인다고 가정했습니다.
■ 그래서, 각 버텍스를 이렇게 설정했습
니다.
– 뿌리 부분: 0.0
– 끝부분: 1.0
– 나머지 부분
○
UV상의 상대적 위치에 따라 점진적으로
값을 변경해서 설정합니다.
– V 포지션을 기준으로 했습니다.
12
위치 구분 값 설정법 (1)
■ 좌/우 구분하기
– 기준 Plane을 설치합니다.
– 머리카락 Vertex의 X 좌표가 Plane의
X 좌표보다 왼쪽이면
○
1.0으로 설정
○
나머지는 0.0
13
위치 구분 값 설정법 (2)
■ 앞/뒤 구분하기
– 좌/우 구분법과 같은 방법을 씁니다.
– 기준 Plane 설치
– 머리카락 Vertex의 Y좌표가 Plane의 Y
좌표보다 앞쪽이면
○
0.0으로 설정
○
나머지는 1.0
14
■ 당연히 이렇게 간단하게 값을 설정하진 않습니다.
– 기준면의 normal 양방향으로 Ray casting을 합니다.
– 그 선들이 버텍스와의 충돌 여부를 판단합니다.
– 어떤 normal에서 쏘아진 선과 충돌했는지에 따라 위치를 정합니다.
■ 그렇지만 컨셉은 앞에 언급한 것에서부터 출발합니다.
■ 어쨌건, 이 값이 Collision 값과 합쳐 집니다.
15
충돌값 설정하는 법
■ 머리카락 Vertex가 충돌 메쉬와 충돌하는지 검사합니다.
– 만약 충돌 한다면, 충돌 메쉬의 면과 Vertex와의 거리를 측정합니다.
– 이 값을 충돌값으로 저장합니다.
■ 이 값을 위치 구분값과 합쳐 줍니다.
– 충돌값이 없으면: 값을 0.5로 설정합니다.
– 충돌값이 있다면: {0.5 * (Distance Value/Average Distance)}를 더해줍니다.
16
충돌 데이타 결과 (1)
■ 최종 충돌 메쉬
– 노랑색: 충돌 메쉬
– Planes: 위치 구분 Plane
17
충돌 데이타 결과 (2)
18
충돌 데이타 사용법 (1)
■ 충돌 데이타가 의미하는 것은
– 노말라이징 된 가속 벡터와 더해지는 값입니다.
19
충돌 데이타 사용법 (2)
■ 충돌 데이터를 디코딩 합니다:(0.0 ~ 1.0)을 (-1.0 ~ 1.0)으로
■ 모든 연산은 머리카락의 Local space에서 이루어집니다.
■
World space의 가속 벡터를 Local space로 변환
– Acceleration = Wind + Head movement
– 가속 벡터는 노말라이징 후 사용합니다.
■ 충돌값을 가속 벡터의 각 축과 더합니다.
– 좌/우 값을 X 축과 더합니다.
– 앞/뒤 값을 Y 축과 더합니다.
■ 최종 결과값을 (-1.0 ~ 1.0)으로 Clamping 해줍니다.
■ 여기에 가속 벡터의 강도를 곱해줍니다.
20
셰이더
21
셰이더 - 세부사항 (1)
Decoding Collision data
22
셰이더 - 세부사항 (2)
Adding Acceleration vector
23
셰이더 - 세부사항 (3)
Multiplying Acceleration strength
24
셰이더 - 세부사항 (4)
Multiplying
Movement amount
with the result
25
한계
■ 좌/우, 앞/뒤로만 움직입니다.
– 위/아래로는 못움직입니다.
○
버텍스 컬러 채널이 모자랍니다.(T.T)
■ 포니테일 처럼 기~인 머리카락용이 아닙니다.
– 최대한 스타일을 유지하면서 찰랑거리는 움직임을 위해 만들었습니
다.
■ 기본 스키닝 포즈에서 많이 움직일 수 없습니다.
– 버텍스 컬러 값에 따라 원래 위치에서 오프셋을 주는 방식
26
결론
■ 움직임 데이터는 버텍스 컬러로 저장 합니다.
– R: 움직이는 양
– G: 좌/우 충돌
– B: 클럼핑 그룹
– A: 앞/뒤 충돌
■ 충돌 데이타를 가속 벡터와 합칩니다.
– 노말라이즈된 가속 벡터를
– 머리카락의 Local space에서
– 가속 벡터의 세기를 곱해주고
– 움직이는 양으로 마지막 움직임을 조절 해 줍니다.
27
Bibliography
■ Page 3
– Citation 1: Scheuermann, Thorsten. "Practical real-time hair
rendering and shading." ACM SIGGRAPH 2004 Sketches. ACM,
2004.

More Related Content

Viewers also liked

김병관 성공캠프 SNS팀 자원봉사 후기
김병관 성공캠프 SNS팀 자원봉사 후기김병관 성공캠프 SNS팀 자원봉사 후기
김병관 성공캠프 SNS팀 자원봉사 후기
Harns (Nak-Hyoung) Kim
 
자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012
자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012
자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012
Esun Kim
 

Viewers also liked (20)

Luigi presentation NYC Data Science
Luigi presentation NYC Data ScienceLuigi presentation NYC Data Science
Luigi presentation NYC Data Science
 
Profiling - 실시간 대화식 프로파일러
Profiling - 실시간 대화식 프로파일러Profiling - 실시간 대화식 프로파일러
Profiling - 실시간 대화식 프로파일러
 
Deep learning as_WaveExtractor
Deep learning as_WaveExtractorDeep learning as_WaveExtractor
Deep learning as_WaveExtractor
 
Behavior Tree in Unreal engine 4
Behavior Tree in Unreal engine 4Behavior Tree in Unreal engine 4
Behavior Tree in Unreal engine 4
 
김병관 성공캠프 SNS팀 자원봉사 후기
김병관 성공캠프 SNS팀 자원봉사 후기김병관 성공캠프 SNS팀 자원봉사 후기
김병관 성공캠프 SNS팀 자원봉사 후기
 
Approximate nearest neighbor methods and vector models – NYC ML meetup
Approximate nearest neighbor methods and vector models – NYC ML meetupApproximate nearest neighbor methods and vector models – NYC ML meetup
Approximate nearest neighbor methods and vector models – NYC ML meetup
 
NDC16 스매싱더배틀 1년간의 개발일지
NDC16 스매싱더배틀 1년간의 개발일지NDC16 스매싱더배틀 1년간의 개발일지
NDC16 스매싱더배틀 1년간의 개발일지
 
Docker
DockerDocker
Docker
 
자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012
자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012
자동화된 소스 분석, 처리, 검증을 통한 소스의 불필요한 #if - #endif 제거하기 NDC2012
 
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
NDC17 게임 디자이너 커리어 포스트모템: 8년, 3개의 회사, 4개의 게임
 
Developing Success in Mobile with Unreal Engine 4 | David Stelzer
Developing Success in Mobile with Unreal Engine 4 | David StelzerDeveloping Success in Mobile with Unreal Engine 4 | David Stelzer
Developing Success in Mobile with Unreal Engine 4 | David Stelzer
 
8년동안 테라에서 배운 8가지 교훈
8년동안 테라에서 배운 8가지 교훈8년동안 테라에서 배운 8가지 교훈
8년동안 테라에서 배운 8가지 교훈
 
Re:Zero부터 시작하지 않는 오픈소스 개발
Re:Zero부터 시작하지 않는 오픈소스 개발Re:Zero부터 시작하지 않는 오픈소스 개발
Re:Zero부터 시작하지 않는 오픈소스 개발
 
[NDC 2009] 행동 트리로 구현하는 인공지능
[NDC 2009] 행동 트리로 구현하는 인공지능[NDC 2009] 행동 트리로 구현하는 인공지능
[NDC 2009] 행동 트리로 구현하는 인공지능
 
Unreal Open Day 2017_Unreal Engine 4 Animation
Unreal Open Day 2017_Unreal Engine 4 AnimationUnreal Open Day 2017_Unreal Engine 4 Animation
Unreal Open Day 2017_Unreal Engine 4 Animation
 
GA로 게임 로그 분석하기
GA로 게임 로그 분석하기GA로 게임 로그 분석하기
GA로 게임 로그 분석하기
 
Unreal Open Day 2017 Unreal Engine Education & Training
Unreal Open Day 2017 Unreal Engine Education & TrainingUnreal Open Day 2017 Unreal Engine Education & Training
Unreal Open Day 2017 Unreal Engine Education & Training
 
[IGC2017] 오버턴VR 개발기 -1인 개발 3년차 리포트
[IGC2017] 오버턴VR 개발기 -1인 개발 3년차 리포트[IGC2017] 오버턴VR 개발기 -1인 개발 3년차 리포트
[IGC2017] 오버턴VR 개발기 -1인 개발 3년차 리포트
 
유니티 팁&트릭 Unity Tip & Trick
유니티 팁&트릭 Unity Tip & Trick유니티 팁&트릭 Unity Tip & Trick
유니티 팁&트릭 Unity Tip & Trick
 
How to Make Your Next Game Go BIG | Emmanuel Carraud
How to Make Your Next Game Go BIG | Emmanuel CarraudHow to Make Your Next Game Go BIG | Emmanuel Carraud
How to Make Your Next Game Go BIG | Emmanuel Carraud
 

버텍스 셰이더로 하는 머리카락 애니메이션

  • 1. 버텍스 셰이더로 하는 머리카락 애니메이션 Gregory Dongseok Kim 2016-04-25
  • 2. 2 차례 ■ 머리카락을 위한 좋은 셰이딩 모델 ■ 머리카락의 구조 ■ 접근법 ■ 셰이더
  • 3. 3 Good Shading models for Hair ■ Scheuermann's hair shading model1 을 사용하세요!
  • 4. 4 예, 농담입니다. 그렇지만... ■ 머리카락의 Specular를 실시간으로 표현하는, 매우 싸고 효과적인 방법입니다. ■ 더구나, 두개의 Specular중 하나를 사용하여 Front Scattering을 표현 할 수 있습니다. ■ 이 말은, Rim light와 투과 효과만 추가하면, 손쉽게 퀄리티를 향상 시 킬 수 있다는 거죠.
  • 5. 5 솔직히 말하자면, 그냥 언리얼에 있는 머리카락 셰이더 쓰세요
  • 6. 6 머리카락의 구조 ■ 머리카락은 크게 4개로 나눌 수 있습니다. – 앞 머리 – 가운데 머리 – 뒷 머리 – 꾸밈 머리 ■ 각 부분은 각각의 흐름을 갖고 있습니다. – 그 흐름을 통해 움직임을 유추 할 수 있겠죠. ○ 가장 중요한 점은 머리카락 뿌리의 위치 입니다.
  • 7. 7 잠깐, 이게 앞 머리라구요? 가운데 머리가 아니라?
  • 8. 8 예, 움직임이라는 측면에서 본다면... ■ 당연히 가운데 머리나 꾸밈 머리로 취급 할 수도 있습니다만 ■ 저 부분은 몸통 위에 놓여, 양 옆보다 앞뒤로 움직입니다. – 실제에서는, 전후좌우로 다 움직입니다. 특히 좌우로 움직일 땐 몸통을 따라 퍼지면서 움직이죠. – 불행하게도, 제 방식으로는 이것까지 표현하지는 못합니다. – 그래서 저는 저 부분의 움직임을 앞뒤로 제한하고자 했습니다. 왜냐하 면...
  • 9. 9 접근법 ■ 각 버텍스의 움직임 정보를 버텍스 컬러의 각 채널에 저장 합니다. – R: 움직이는 양 – G: 좌/우 충돌 정보 – B: 클럼핑 그룹 – A: 앞/뒤 충돌 정보 ■ 이 말은 머리카락을 이렇게 나눴다는 소리죠
  • 10. 10
  • 11. 11 움직이는 양 설정법 ■ 머리카락의 끝부분이 뿌리 부분보다 더 움직인다고 가정했습니다. ■ 그래서, 각 버텍스를 이렇게 설정했습 니다. – 뿌리 부분: 0.0 – 끝부분: 1.0 – 나머지 부분 ○ UV상의 상대적 위치에 따라 점진적으로 값을 변경해서 설정합니다. – V 포지션을 기준으로 했습니다.
  • 12. 12 위치 구분 값 설정법 (1) ■ 좌/우 구분하기 – 기준 Plane을 설치합니다. – 머리카락 Vertex의 X 좌표가 Plane의 X 좌표보다 왼쪽이면 ○ 1.0으로 설정 ○ 나머지는 0.0
  • 13. 13 위치 구분 값 설정법 (2) ■ 앞/뒤 구분하기 – 좌/우 구분법과 같은 방법을 씁니다. – 기준 Plane 설치 – 머리카락 Vertex의 Y좌표가 Plane의 Y 좌표보다 앞쪽이면 ○ 0.0으로 설정 ○ 나머지는 1.0
  • 14. 14 ■ 당연히 이렇게 간단하게 값을 설정하진 않습니다. – 기준면의 normal 양방향으로 Ray casting을 합니다. – 그 선들이 버텍스와의 충돌 여부를 판단합니다. – 어떤 normal에서 쏘아진 선과 충돌했는지에 따라 위치를 정합니다. ■ 그렇지만 컨셉은 앞에 언급한 것에서부터 출발합니다. ■ 어쨌건, 이 값이 Collision 값과 합쳐 집니다.
  • 15. 15 충돌값 설정하는 법 ■ 머리카락 Vertex가 충돌 메쉬와 충돌하는지 검사합니다. – 만약 충돌 한다면, 충돌 메쉬의 면과 Vertex와의 거리를 측정합니다. – 이 값을 충돌값으로 저장합니다. ■ 이 값을 위치 구분값과 합쳐 줍니다. – 충돌값이 없으면: 값을 0.5로 설정합니다. – 충돌값이 있다면: {0.5 * (Distance Value/Average Distance)}를 더해줍니다.
  • 16. 16 충돌 데이타 결과 (1) ■ 최종 충돌 메쉬 – 노랑색: 충돌 메쉬 – Planes: 위치 구분 Plane
  • 18. 18 충돌 데이타 사용법 (1) ■ 충돌 데이타가 의미하는 것은 – 노말라이징 된 가속 벡터와 더해지는 값입니다.
  • 19. 19 충돌 데이타 사용법 (2) ■ 충돌 데이터를 디코딩 합니다:(0.0 ~ 1.0)을 (-1.0 ~ 1.0)으로 ■ 모든 연산은 머리카락의 Local space에서 이루어집니다. ■ World space의 가속 벡터를 Local space로 변환 – Acceleration = Wind + Head movement – 가속 벡터는 노말라이징 후 사용합니다. ■ 충돌값을 가속 벡터의 각 축과 더합니다. – 좌/우 값을 X 축과 더합니다. – 앞/뒤 값을 Y 축과 더합니다. ■ 최종 결과값을 (-1.0 ~ 1.0)으로 Clamping 해줍니다. ■ 여기에 가속 벡터의 강도를 곱해줍니다.
  • 21. 21 셰이더 - 세부사항 (1) Decoding Collision data
  • 22. 22 셰이더 - 세부사항 (2) Adding Acceleration vector
  • 23. 23 셰이더 - 세부사항 (3) Multiplying Acceleration strength
  • 24. 24 셰이더 - 세부사항 (4) Multiplying Movement amount with the result
  • 25. 25 한계 ■ 좌/우, 앞/뒤로만 움직입니다. – 위/아래로는 못움직입니다. ○ 버텍스 컬러 채널이 모자랍니다.(T.T) ■ 포니테일 처럼 기~인 머리카락용이 아닙니다. – 최대한 스타일을 유지하면서 찰랑거리는 움직임을 위해 만들었습니 다. ■ 기본 스키닝 포즈에서 많이 움직일 수 없습니다. – 버텍스 컬러 값에 따라 원래 위치에서 오프셋을 주는 방식
  • 26. 26 결론 ■ 움직임 데이터는 버텍스 컬러로 저장 합니다. – R: 움직이는 양 – G: 좌/우 충돌 – B: 클럼핑 그룹 – A: 앞/뒤 충돌 ■ 충돌 데이타를 가속 벡터와 합칩니다. – 노말라이즈된 가속 벡터를 – 머리카락의 Local space에서 – 가속 벡터의 세기를 곱해주고 – 움직이는 양으로 마지막 움직임을 조절 해 줍니다.
  • 27. 27 Bibliography ■ Page 3 – Citation 1: Scheuermann, Thorsten. "Practical real-time hair rendering and shading." ACM SIGGRAPH 2004 Sketches. ACM, 2004.