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

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.