Soft-body Shader, jelly joy - devblog#2



If you’ve been following the development of crumble on social media, you’ve seen our little jelly blue ball. Yes, he’s adorable and goofy but do you know what else he is?

He’s stretchable and squishable, just like a soft body would be.

If you’re not familiar with what a soft body is or looks like, here’s an example:


This was rendered on Blender and illustrate exactly what a default soft body is in physics. It’s largely used for cloth simulation and other “soft” material.


Now we don’t want to know how to do it for offline rendering (who are people who don’t care about issue) we want to do it in REAL-TIME in Unity 3D. And I’m gonna spoil it for you, we can’t, not without a lot of performance going down the drain. But we can fake it.


How not to do it

Okay, so before we dive right in the technical and boring stuff I have to show you what no to do in order to achieve that effect, things I did in the game-jam version of Crumble:




We tried to actually make the soft body with sphere collider to shape the skinned meshed. And as you can see it doesn’t work very well and is very CPU intensive, it also gets in the way of the gameplay.


How we did it with shader




The smear effect

The first thing we need to do is add a smear effect to deform the mesh with its velocity.

The shader:





It’s a piece of code written by cjacobwade on github: https://github.com/cjacobwade/HelpfulScripts/blob/master/SmearEffect/Smear.shader

You feed a noise value to the vertex shader and you apply an offset between the current position of the mesh and its position a couple frame before that will offset the vertex of the mesh to simulate a smear, which is great for our purpose.

The C# script to add for mesh position:


You can get the full code in the same repository.


World scale

We have our stretch effect now we need our squash effect. This is a bit complicated because our ball is rolling, so if we scale it in our shader, we would scale it locally and have a very weird deformation. So, we need to scale it in world space.



We convert the scale from local space to world space with this world scale matrix in the vertex shader before returning the vertex position.

When the player hits something (the ground or any collider), you can get the collision point and feed it to the shader than lerp the value for a nice animation.

For our player model we had to offset the mesh by its radius and lerp it.


Conclusion

And that’s how the jelly effect in crumble is made. There are a lot more than this in action but I talked about the main part of it. Of course, you can exaggerate the effect with hand made animation, some noise deformation, more vertex in the mesh etc…

There’s a lot of value to clamp to avoid excessive vertex deformation, we also made sure to correct edge normal.


Don't forget to wishlist the game on Steam, Best way to support me: