Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,463 views

Published on

언리얼 엔진에서 버텍스 셰이더를 통한 머리카락 애니메이션 방법

Published in: Technology
  • Be the first to comment

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

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

×