How to make hair movement in Unreal engine by Vertex shader.

1. Hair Animation by
Vertex Shader
Gregory Dongseok Kim
2016-04-25

2. 2
Overview
■ Good shading models for hair
■ Structure of hair
■ Approach
■ Shader

3. 3
Good Shading models for Hair
■ Using Scheuermann's hair shading model1

4. 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. 5
Honestly,
just use Hair Shader in Unreal Engine 4

6. 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. 7
Wait, is that Front? Not Side?

8. 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. 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. 10

11. 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. 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. 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. 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. 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. 16
Result of collision data (1)
■ Final collision meshes
– Yellow: Collision mesh
– Planes: Classifying sides

17. 17
Result of collision data (2)

18. 18
How to use collision data (1)
■ Collision data means
– Adding amount for normalized acceleration vector of each vertices

19. 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. 20
Shader

21. 21
Shader – detail (1)
Decoding Collision data

22. 22
Shader – detail (2)
Adding Acceleration vector

23. 23
Shader – detail (3)
Multiplying Acceleration strength

24. 24
Shader – detail (4)
Multiplying
Movement amount
with the result

25. 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. 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. 27
Bibliography
■ Page 3
– Citation 1: Scheuermann, Thorsten. "Practical real-time hair
rendering and shading." ACM SIGGRAPH 2004 Sketches. ACM,
2004.