In this article, I’d like to talk about my toon tree shader that emulates the look of Studio Ghibli trees.
To get that hand-painted look, there’s a built-in shader you can test in your material under Nature/Tree Creator Leaves.
It is meant to be used with trees created using Unity Tree Editor, so it doesn’t apply motion.
Since I din’t want to use trees generated using the Unity Tree Editor, I had to create a custom shader that used the custom lighting model from Tree Creator Leaves and my own functions to add motion.
Apart from the shader, there are two other important things to get good lookig trees:
- modeling the leaves the right way and export them with smoothed normals to get that hand painted look
- a good texture for the leaves
There’s a great article on Habrador’s blog on modeling leaves.
I followed that article to model the leaves of my tree while for the trunk, I used Blender Mtree free plugin.
I took the texture from the Habrador’s article and painted white so I can then decide later, in my shader, the color of the leaves.
The code is pretty straight forward, it’s a surface shader that uses the built-in TreeLeaf custom lighting model as I’ve mentioned before.
To use it, you have to include UnityBuiltin3xTreeLibrary.cginc like I did at line 25 and add TreeLeaf in the pragma statement at line 24.
There are two types of motion I wanted to give to the tree:
- Swaying of the leaves and the trunk of the tree
- Some kind of turbulence to the leaves
The properties of the shader are the following:
_MainTex – texture of the leaves I took from Habrador’s article and then painted white.
_Cutoff – alpha threshold for the leaves texture. Lower values make the leaves volume thicker.
_TurbulenceTex – a noise texture we use to simulate turbulence on the leaves
_TurbulenceAmount – how much turbulence we want to apply to the leaves
_TurbulenceSpeed – the frequency at which the turbulence affects the leaves.
_WindSpeed – the speed of the swaying
_SwayingRigidness – at lower values, it gives the trees almost a “liquid” motion. It’s great to give subtle differences when you have multiple trees fairly close to each other.
_SwayMax – max amount of swaying to be applied to the tree
_YOffset – apply the swaying only on vertices above this threshold
Line 42 – we declare a wind_force function that we will then use in the vertex shader
Lines 44, 45 – to make the leaves and the trunk swaying back and forth, we use the sin function.
We apply the rigidiness by dividing the vertex position in world space by the _SwayingRigidness property. Then we add the built-in variable _Time.x multiplied by the _WindSpeed property to make them swaying at the speed we want.
Line 47 – the step function basically returns 1 if the difference between v.vertex and _YOffset is > 0, otherwise it returns 0. This means that the swaying effect will be applied only on vertices that are above the _YOffset property.
Turbulence and leaves color
Line 62 – we sample the turbulence texture and convert its sampled values from range [0, 1] to range [-1, 1]. We also apply turbulence speed by adding _Time.y * _TurbulenceSpeed.
Line 63 – to make the leaves moving affected by the turbulence, we simply distort the leaves texture UVs using the turbulence values we have just computed.
Line 65 – because the leaves texture is pure white, we multiplied it by the _Color property to set the color of our leaves.