Hair Animation by Vertex Shader

Gregory Dongseok Kim

2016-04-25

2

Overview

■ Good shading models for hair

■ Structure of hair

■ Approach

■ Shader

3

Good Shading models for Hair

■ Using Scheuermann's hair shading model1

4

Yes, it was a joke. But,

■ It is cheap and very effective solution to describe hair specular in real-time.

■ Furthermore, one of speculars can be used to simulate front scattering.

■ It means that you just need to add rim light and trnasmission effects to improve quality.

5

Honestly, just use Hair Shader in Unreal Engine 4

6

Structure of Hair

■ Hair can be devided into 4 parts

– Front parts

– Middle parts

– Back parts

– Additional parts

■ Each parts have its own flow

– You can presume movement of hair by flow.○ Most important thing is the root of hairs

7

Wait, is that Front? Not Side?

8

Yes, in terms of movement perspective...

■ Obviously, it can be treated as side parts or additional parts.

■ But those parts are on the body, so they move forward rather than sideway.

– In real world, they also can move sideway, but when they move like that, their whole shapes are spread along the body.

– Unfortunately, my approach cannot simulate it.

– So, I treat the movement of those parts to constrain to move forward. Because...

9

Concept of My approach

■ Incoding movement data of each vertices to each vertex color channels

– R: Amount of movement

– G: Left / Right collision

– B: Clumping group

– A: Front / Back collision

■ It means that I divided hairs to like this...

10

11

How to set values for amount of movement

■ I premised that the tip of each hairs move more than root.

■ So, I set value of each vertices like this

– Root part: 0.0

– Tip part: 1.0

– Rest of them○ Gradually changed their value by its

relative position on UV coordinate– Based on V position

12

How to set values for classifying each sides (1)

■ Classifying of Left/Right

– Insert crietrion plane

– If the X position of the vertex is more left side than Plane's X position, than

○ Value is 1.0○ Else are 0.0

13

How to set values for classifying each sides (2)

■ Classifying of Front / Back

– Using same way as the method to divide Left/Right

– Insert criterion Plane

– If the Y position of the vertex is more forward than Plane's Y position, than

○ Value is 0.0○ Else are 1.0

14

■ Of course, I didn't use that kind of simple way

– Rays cast to criterion Plane's each sides normal directions

– Check whether rays intersect with vertices or not

– Classify which vertices are located in which side

■ But main idea can be simplified above statements.

■ Anyway, thease values will be combined with collision data

15

How to set values for collision

■ Check hair vertices are collided with collision mesh

– If the vertex is collided, meassure the distance between the vertex and the face of collision mesh.

– Store that value as collision value.

■ Combine this value with side classifying value

– If collision value does not exist: set value to 0.5

– If collsion value exists: add {0.5 * (Distance Value/Average Distance)}

16

Result of collision data (1)

■ Final collision meshes

– Yellow: Collision mesh

– Planes: Classifying sides

17

Result of collision data (2)

18

How to use collision data (1)■ Collision data means

– Adding amount for normalized acceleration vector of each vertices

19

How to use collision data (2)■ Decode collision data from (0.0 ~ 1.0) to (-1.0 ~ 1.0)

■ Every calculation were done under Local space of hair

■ Transform World space Acceleration vector to Local space

– Acceleration = Wind + Head movement

– Use acceleration vector after normalization

■ Add collision value with Acceleration vector of each axis

– Add Left/Right value with X axis

– Add Front/Back value with Y axis

■ Clamp result value to (-1.0 ~ 1.0)

■ Multiply strength of Acceleration vector

20

Shader

21

Shader – detail (1)

Decoding Collision data

22

Shader – detail (2)

Adding Acceleration vector

23

Shader – detail (3)

Multiplying Acceleration strength

24

Shader – detail (4)

Multiplying Movement amount with the result

25

Limitation

■ Move only Left/Right and Forward/Backward

– It cannot move Up/Down○ There is no more vertex color channel

■ Not for long hair style such as pony tail

– For waving movements which preserves initial hair style

■ Cannot move far from initial skining pose

– Gives some offset values by vertex color value

26

Conclusion

■ Save movement data to Vertex color

– R: Amount of movement

– G: Left / Right collision

– B: Clumping group

– A: Front / Back collision

■ Combine collision value with Acceleration Vector

– Normalized Acceleration Vector

– In Local space

– Multiply strength of Acceleration Vector

– Filter final movement by Movement amount

27

Bibliography

■ Page 3

– Citation 1: Scheuermann, Thorsten. "Practical real-time hair rendering and shading." ACM SIGGRAPH 2004 Sketches. ACM, 2004.