After watching a bunch of movies from Laika Studios, I got inspired to try and create something that looked handcrafted. But I wanted it to be more like the Claymations of the ’90s.

Tools of the trade

I wanted it to do it in realtime, so I decided to go with Unity since that is the game engine I have used the most. But most of what I had in mind could be done in any engine.

To sell the clay feeling, I wanted to use PBR, and that meant some texture creation. You could probably find some great clay textures. Still, I wanted to create everything from scratch, Substance Designer has a workflow that I think is great and a pleasure to use.

Creating the Material Textures

After spending a little to much time on Youtube watching Claymation. I concluded that what gives those old animations their charm, and handcrafted aesthetics, is the visible fingerprints and how the oil from them catches the light. So this is where I opened up Substance Designer to create some oily fingerprints.

After a lot of trial and error, I had something that looked like a fingerprint, at least good enough for what I needed.

Here is where most of the magic happens. After that, it’s mostly about adding some noise and masking. As for the base, I went with these nodes as a starting point.

A light grey color for nice clay-like base smoothness. The fur I thought would look like the clay has been folded again and again as you work with it. Then we have some gaussian spots to represent dirt and other particles getting into the clay. And last but not least, some white noise represent the actual sand in the clay.

We blend these and scatter the fingerprints all over it, and we end up with something that is clay-like.

Putting it in a shader

Then it’s over to Unity to create a shader to animate and make our material come alive. The standard shader would work if I did not want some other effects on my clay shader. So I created a Surface shader as a base, but it is missing some of the features we want to use, so the first thing is to add those.

The first thing you will notice is that floats represent metallic and Smoothness. So I need to change that to use the textures created earlier. we do that in the surf function like so

1
2
3
4

fixed4 metallicMap = tex2D(_Smoothness, IN.uv_MainTex);
o.Metallic = metallicMap.rgb;
// I kept the glossiness float to help fine-tune
o.Smoothness = _Glossiness * metallicMap.a;

and also change the properties to be sampler2D instead of float. Normals are also missing, so we add those as well.

1

o.Normal = UnpackNormal(tex2D(_Normals, IN.uv_MainTex));

And that is everything that is missing from Unity’s Standard Shader, so time for the special effects I wanted. First, I wanted the texture to change every few frames like the clay was repositioned. So to do this, I decided to scroll the UV’s to a random position. Some random function was needed, so I threw in a relatively simple standard one.

1
2
3
4
5
6
7
8

float random(float2 p)
{
    float2 K1 = float2(
        23.14069263277926, // e^pi (Gelfond's constant)
        2.665144142690225 // 2^sqrt(2) (Gelfond–Schneider constant)
    );
    return frac(cos(dot(p, K1)) * 12345.6789);
}

And to update, I wanted that to happen at a nice interval.

1
2
3
4
5

// Don't forget to update all uses of IN.uv_MainTex to scrolledUV
fixed2 scrolledUV = IN.uv_MainTex;
float2 value = floor(_Time * _updateSpeed);
// As long as _Time rounds down to the same integer, the random function returns the same value.
scrolledUV += random(value);

That looked good, but the surface is way too smooth. To fix that, I decided to modify the vertex positions using a cloud texture.

1
2
3
4
5
6

void vert(inout appdata_full v) {
    float2 value = floor(_Time * _updateSpeed);
    fixed2 scrolledUV = v.texcoord.xy * random(value);
    float4 tex = tex2Dlod(_VertexOffset, float4(scrolledUV, 0, 0));
    v.vertex.xyz += (v.normal * tex.r) * _pwr;
}

Now it has the rough handcrafted aesthetics I wanted. To test it out, I decided to make a small game.

I hope this helps to spark someone’s imagination.