[title style=”bold-center” text=”shaders” size=”120″]

There’s still so much I need to learn about shaders, but here’s a project I worked on recently broken down.

Shape Immersive logo animation:

This was a very tough and long project, although it was originally going to be more complicated than that since it would have buildings coming out of it that merged with the wavy sphere. I made the sphere in Unity, recorded it with OBS, and edited the footage in After Effects.

Here’s some of the process:

Melt model based on contact point

[row]

[col span=”6″ span__sm=”12″]

[ux_image id=”167″ height=”256px” margin=”22px 0px 0px 0px”]

[/col]
[col span=”6″ span__sm=”12″]

[ux_image id=”168″ height=”312px”]

[/col]

[/row]

I used this shader as a base for the melting effect and modified it (with big help from @BelgianRenderer) so that it can find the contact point and melt in that direction. At first this was done by checking for collision but then I changed it to use a raycast for efficiency, this happens in a script that then sends the tangent, normal, bitangent, and point of contact to the shader. I also added a control on maximum melting distance.

It is still a bit buggy and needs some work to be usable in a game, but I think the hardest part is done.

Here’s the shader, here’s the script.

Sphere shader

[For this part there’s a lot of displacement and normal maps, so d&n = displacement and normal map]
For the wavy sphere which was actually used there’s a different shader, it has scrolling UVs and displacement maps accompanied by normal maps (the displacement created doesn’t affect the lighting, this has to be achieved with fitting normal maps). Here’s a snip:


_ScrollX1 *= _Time.x;

_ScrollY1 *= _Time.x;
_ScrollX2 *= _Time.x;
_ScrollY2 *= _Time.x;
float d = ((tex2Dlod(_DispTex1, float4(v.texcoord.xy, 0, 0) + float4(_ScrollX1, _ScrollY1, 0, 0)).r

+ tex2Dlod(_DispTex2, float4(v.texcoord.xy, 0, 0) + float4(_ScrollX2, _ScrollY2, 0, 0)).r))
* (-1 * _Displacement);

Naturally the poles were breaking because of how UVs work, so I modified the mesh and uvs so that the broken parts are smaller, and added a slot to add a d&n to patch. The black means that it won’t have any displacement in there and since the poles are on the top and bottom of the UV layout this worked out:

[ux_image id=”172″ margin=”0px 0px 0px 0px”]

I also added a script so it can change colour, and used this same script to manage the blending between sphere and logo. So that after it reached certain time it’ll lerp the blendshape, turn off directional lights, set ambient light to white (flat shading), and disable the displacement maps.

Here’s the shader. Here’s the script.