Multicolored fog post-process material

How would I go about making fog that switches between multiple colors based on distance, as described in [this video][1]?

I made regular fog based on info in [this thread][2]:

I guess that I need to duplicate the above graph a few times, somehow define different end distances for each color and then combine them?

I have been trying to duplicate that same effect every since I first saw the Firewatch video!
You are right, you can Lerp several together and even do the same for the alpha levels.

Even just 3 can have a cool look with the right colors.

Wish I were a programmer, but I really hope someone would add in the ability to use a single texture with alpha to accomplish the same effect as they did for Firewatch fog.

This looks great! I tried doing this but I get an error "ES2 node scenetexture node not supported in feature level ES2" for the SceneTexture:PostProcess0 node

Any ideas?
I have my matt set to PostProcess and its hooked up to a volume

Also is this cheaper than using an Atmospheric Fog volume?

My guess is it doesn’t work with mobile? I switched my Settings> Preview Render Level to Mobile HTML 5 and finally got a similar error “The current material has compilation errors, so it will not render correctly in feature level ES2”. Perhaps there is another way on mobile.

As for being cheaper, not really sure. It never drops my FPS when I use it though, and I even have a screen distortion multiplied into the same PostProcess. Atmospheric fog seems to only work with height color and I want the distance color and density to change.

I need to try something like what is currently sold in the marketplace . link text Only problem is, I would need another shell of surfaces for each color change in the fog… Maybe a good material would overcome that though.

I really want what is used in Firewatch. :/, I want to plug in a 1 pixel row gradient with alpha to control it all, and it would be even cooler if I could use an animated gradient… but the above has worked for me… for now.

If you mask out the red channel of the UV you get a coordinate going across the width of a texture. So simply inputing the scenedepth into the UV of the FogTexture will give you the effect you desire.

Thank you so much! you made my life beautiful

tea_kobzar, thanks to join the post :slight_smile:

I tried the “Render Custom Depth pass” from the video you shared, and dont work with translucent material, above what I got:

with translucent material:


and I dont know where or if its possible to choose the render “position” per mesh.

If you have sucess, please show us :slight_smile: Thanks again

Nice! and works with translucent material?
And whats the optimization doubts?

Its from a video tutorial from, I forget the name of the artist.
But you can test with the “Water Planes” project, its from Epic, u can find at the “Learn” tab in the launcher :slight_smile:

Sweet! So I tested here, all works fine, and Im using Forward Render in this lighthouse scene, just a plus, I add a group of note to exclude the Skybox from the fog, cause look this images below, look the trees leaves.

skybox receiving fog

skybox without fog

the bp updated:
divide value = 1000, feel free to take out the Switch node :slight_smile:

Yes, I set the “Post Process Material” to “Before Translucency”, the problem was I didn’t check the FogGlobal_DistanceX100.

Btw, will be nice, you post the bp in the UE Forum :slight_smile:

Ok, I updated the fog color option to a friendly color pick :slight_smile:

I clean a bit the material.

Sorry for the pre-historical up

I made some test, one with the 3danm8r bp:

second with the jakpe bp:

With the bp used in image 1 I got a problem with the translucency material, no water, as you guys can see here:

Same scene without any of custom fog:

Btw, tihs is the texture I used to create the fog in the image 2, its the same used in day 1 in the Firewatch game, I upload in the Google drive cause answers don’t accept .tga files.

I still trying to create something, at least close to the Firewatch fog, if anyone have any ideia how to improve this bp, just comment :slight_smile:

ps. I’m using Forward rendering at this scene.

and thanks 3danm8r and jakpe

Maybe you have to set higher render priority for the fog material, and lower - for water material? It should render water after the post process material (I hadn’t try the fog material yet).
If it works, then you have to do something with water colour, cos it will appear without changes. However, the water material has its’ own translucency, so maybe you’ll get what you want without additional moves. (sorry for my English)

You need to use a Custom Depth, like it’s in the video, but with inverted values, for apply fog to everything, but water UE4: Stealth Invisibility Effect (With Distortion) - YouTube

I started working on my version of the fog, based on 3danm8r bp logic.
Actually, 3danm8r material is not fog, but color mask with soft transitions between colours. Now, I’m on my way to improve it, with some additional parameters

Ok, I’ve made it, but I have some doubts about it’s optimization

Here it is! I have some doubts about optimization, hehe. Also, shiny fog it’s a bug, but sometimes it looks cool!