Demo
ABSTRACT
Inspiration Images for Stylized Hair Simulation Tool
The goal of this project was to explore my passions for Stop Motion Animation and traditional 3D animation by building a physics-based real-time stylized hair simulation system. Using WebGL, the tool provides users with an interactive experience where they can modify various attributes such as wind speed, hair length, and various hair styles in real-time.
TECHNICAL APPROACH
One of my biggest inspirations is Pixar and their approach to creating stylized hair. For example, on Brave the artists had to deal with stylized non-physical curly hair such as from the main character Merida. While Pixar could have created a more realistic hair system for this film, that would have resulted in the loss of some of the stylization in the curly hair. Their goal was to preserve the overall look of their hair regardless of any forces that were being applied to it. This was the overall methodology that I tried to instill in my own project. I would like to acknowledge Pixar for inspiring me and pushing me to explore new ideas.
To simulate the hair flowing back and forth I used oscillating patterns with noise to introduce some natural randomness. A line segment is defined by two points which are updated over time. Where a point is positioned in space by an x, y, and z value where x=r*sin(θ)*cos(φ), y=r*sin(θ)*sin(φ), and z=r*cos(θ). R represents the radial distance, theta represents the polar angle, and phi represents the azimuthal angle. Each hair strand is initialized with a position and then updated over time. Each mesh's quaternion is also updated to align with the correct hair strand direction.
If the Mohawk Mode is enabled, the system simulates a wind force to push the hair upwards by calculating the dot product of the wind effect vector with the current position vector. And, if the Bobbing Mode is enabled the system bobs the hair back and forth in a more aggressive manner by modifying the angle of the hair strands oscillation in a sin function. The built-in gui provides users with a friendly approach to modify these settings in real-time.
RESULTS
1 -- Default WebGL Line
+ Mohawk Mode
2 -- MeshLine
+ Mohawk Mode
3 -- Line2
+ Mohawk Mode
+ Increased Hair Length
4 -- Cylinder Mesh
+ Toon Shader + Additional Stray Layers
+ Texture
MeshPhysicalMaterial
Result Progression
Final Result
First, I used WebGL's default Line to create the hairs as shown in the first two images in the grid above. This approach allowed me to simulate +100,000 strands of hair in real-time with no lag due to the efficiency of using lines instead of more traditional geometry. However, I found the Line to be very limited in terms of its visual complexity much in the way hair guides are in programs like Maya or Houdini. For example, there is currently a bug in WebGL that prevents increasing the default Line thickness, and Lines can only use the default LineBasicMaterial which has little to no customizable options. And, since the goal of this project is to explore stylized hair matching a stop-motion style aesthetic with thick hairs, I decided to consider other options.
My next approach was to use the external MeshLine library which allows for adjusting line thickness and allows for more customizable shader options as shown in the next two images in the grid above. Still, I found the library limiting and decided to explore other options. WebGl's updated Line2 library also allows for adjusting line thickness and allows for more customizable shader options as shown in the next three images in the grid above. I particularly enjoyed the softness I was able to create at the ends of the lines. Still, the goal ultimately was to create geometric, tactile hairs to mirror a stop-motion aesthetic.
As much as I initially wanted to reduce computational cost in order to have more hairs, I realized that the images I was referencing were not using +100,000 strands of hair. It was probably closer to a couple thousand larger hairs. So, I decided instead to pursue using cylinder geometry as my hairs as shown in the final four images in the grid above. I was happy with the geometric quality of the hairs I got on my first attempt, but realized I needed more breakup of the hairs so it would not look as uniform. So, I created multiple layers of hair with different attributes to break it up. This proved to be a lot more successful, and then I used the next attempts to explore further shader options to push it closer to a stop-motion animation style. Lastly, I added an additional stop-motion effect which modifies the frame-rate of the hair simulation. I enjoyed exploring using multiple frame rates in the final result where the hair is simulated at 3 fps while the camera animation is animated at 60 fps.
FUTURE WORK
On this project, I learned a lot about the theory behind hair simulations and the various approaches one can implement them in WebGL, such as with Line, Line2, MeshLine, and Cylinder geometry for example. For future work, there are several elements I wish to continue to explore as I push it closer to a stylized stop-motion aesthetic. These mainly relate to shader complexity. As I have found, it is likely I will need to write my own custom glsl shader code with a ShaderMaterial in order to achieve a more tactile effect I am looking for instead of using built-in materials such as MeshPhysicalMaterial. I also want to explore creating more customizable hair operators -- such as curling operators and clumping operators. For production use, I would like to explore the ability to paint in density maps and to be able to export the results to a standard DCC package, such as Houdini or Maya. It may also be useful to explore other hair shading methods such as stylized variations of the Kajiya Kay and Marschner models as well as other hair simulation approaches to compare and contrast such as the use of shell texturing or a mass-spring system approach.
Bloopers
