Vertical fog shader - Devblog#07

A quick one for today, talking specifically about the vertical fog shader in Crumble.

Fog plane

The vertical fog I use in Crumble is made out of a material on a plane. This is useful both for the uv and the height difference. Here's the mesh of one of the ground fog in a level:

Of course it would be better to sculpt it directly into unity, so that it would fit the level design perfectly. The reason why I take so much time making this is because the ground fog is an important part of the gameplay in Crumble. This is the kill trigger in every levels, once you go to deep in the fog, the screen will get foggy (stay tuned for a devlog about it next week) and you will reset at some point. This is also what prevents the environment of the game looking too much of a floating island type.

Depth Fog Shader

I can redirect you to a very good blog post about simple vertical fog shader using the depth pass of the camera here :

For any fog you need to use the depth pass of your main camera so that it will blend near any geometry surfaces.

To be sure to enable depth pass in forward for your camera you can apply this code onto it:

Now that this is done, we can dive into the shader of the fog itself.

Using the depth pass you can lerp the opacity of the material. Be sure to add the blend line in the shader, this what makes it transparent. You can read more about it on the unity manual:

If you want a dark fog you may want to use the multiplicative blend !

Vertex Displacement Shader

You can see on the final render video that my fog not only blend near objects, but it also moves in waves to add interests.

I use sinusoid a lot when I want a wave pattern. Don't forget to add this line in your tag: "DisableBatching" = "True"

If you want to have multiple meshes and no weird behaviors !


This is a quick one because next week I'm gonna conclude the shader part of these devlogs, and focus more on the programming, marketing and visual parts of the game. You can add a lot more to this shader like fading edge with vertex color: col.a *= i.color;

You can also add uv displacement for some cheap movement effect !

Next week is going to be a long overview about post effects in Crumble, including the fog game over screen.