A friend of mine (Kenny Guillaume) asked me if it would be possible to implement a fog effect as in Firewatch:
The picture above is taken from this video of the GDC 2015 talk on the art of Firewatch, where they explain how they implemented it.
The effect is simple enough: apply fog as a post process effect and for each sample fetch the fog color from a gradient texture. I even copy pasted the gradients from the same video:
My first take on this was a MonoBehaviour where we apply this effect in the OnRenderImage override. While this yielded good results, this is not how things should be done nowadays.
No sir, now we have Unity's PostFX V2 which you can enable via the package manager. I've seen this new library at Unite Berlin and was really impressed by it. It is a well designed system if you ask me!
So the challenge was to incorporate this "stylistic fog" effect (as they called in the Firewatch video, I rather call it "Stylized Fog") into the PostFX V2 system. In a Post Process Profile the settings look like this:
I managed to get this result by consulting the other effects that are available on github (since PostFX v2 is completely open source) and this very nice tutorial on custom effects. Definitely check this manual on the new PostFX system too.
The cool part is that there are only three code files required: a shader, a script and an editor script - wonderful! They really made it super user-friendly to extend their system with custom effects. This is a screenshot of my programmer-art terrain + Stylized Fog with the firewatch gradient applied:
Just imagine what an artist could do with this!
If you plan to use this, be aware that this effect replaces the regular fog in Unity. In other words you need to disable fog in the lighting settings:
Be aware that, since this effect needs the depth buffer, you should not use MSAA, since the depth buffer will have no AA. Instead enable a screen space AA effect to fix this. This is the setting I used for the above screenshot:
Of course I added all this to my Unity Toolset repo, so have fun! I'm eager to receive any feedback on this!
[Edit] I put some extra work into this, as it turned out to be not completely ready, read about it here.
7 comments:
Hi, Superb ! Unfortunately It doesn't work on Unity 2018.x; and I can't figure out how. Maybe you can help ? Thanks !
Hi, it did work until 2018.2, but I had to upgrade the project to make it compatible with 2018.3, which I now did. Have fun!
Just wanted to say that this is really cool :)
Also, why don't you put the stuff that you do on the asset store? Our company does have some open source toolset available and its great, very easy to share to other ppl and for them to get the most recent version :)
Cheers!
Thx! I've thought about it. I'd like to create some demo project that contains all the tools from the set. Once I've got that I might put it on the asset store. You are correct it's easier to share updates.
Again, great post! Is there a way to get this to affect transparent shaders?
I made some progress getting the post effect to render behind transparent shaders by setting PostProcessEvent.AfterStack to PostProcessEvent.BeforeTransparent, but the fog still doesn't do anything to the geometry with transparency.
The problem with transparent objects is that they don't write into the depth buffer. I have no solution to this.
Alright, thank you!
Post a Comment