Cheap Fog in UE4 [Depth-mask post process]

IF YOU EXPERIENCE AN ARITHMETIC Float3/4 ERROR: You need to make sure that the SceneTexture and the Colour have the same float numbers (so either mask your SceneTexture to RGB using ComponentMask, or use a Float4 colour by holding 4 and left clicking)
IF your skybox is too bright, try this imgur.com/a/oKLcmAa
IF you experience visual issues/artifacts, try changing the Tonemapping settings in the Material
Hey everyone! Today we're making the simplest cheap fog in UE4 possible! It's extremely performant (free) and has a tonne of possibilities! It only takes a few minutes to set up and is even suitable for Cel-Shaded scenes.
This trick has been used in videogames since literally forever so it's about time you learned about it too :) This method requires the use of Deferred rendering as we're piggybacking on the Depth Buffer to achieve the effect.
As always if you require any assistance, join our Discord server for 24/7 Unreal Engine support :)
------------------------------
Discord: / discord
KZbin: / prismaticadev
Twitch: / prismaticadev
Patreon: / prismaticadev
Twitter: / prismaticadev
------------------------------
Computer Specs:
Ryzen 3900x 12-core CPU
MSI Geforce RTX 2080 Super
64GB Corsair RAM
One of those fancy nvme m.2 SSD's
Programs of choice:
Unreal Engine 4 - (Game Dev)
Blender 2.8 - (Animation and Modelling)
OBS - (Video/screen capture)
Davinci Resolve - (Video editing)
Adobe Photoshop - (Graphics and Texturing)
Quixel Mixer - (Texturing)
ProTools 11 - (Compositions and mixing)
OldSchool Runescape - (Chillax time)
Filmed using:
Sony A7s2 body
Sony 24-70mm f/2.8 GM lens
Yonguo YN360 LED's for colour
Yongnuo YN760 chip LED w/ Godox softbox for key
My lovely cats names are Boycat, Girlcat and Ladycat :)

[@Leonardorth.]

Ok, so for anyone having issues with this, you need to change the Blendable Location to "Before Tonemapping" in the material output node details. Everything else should be ok. You can also plug in the SceneTexture node into the A slot in the Lerp node. Just make sure to set the SceneTexture to PostProcessInput0.

[@SteveCaruso]

I was having an issue with black squares flickering over animating skeletal meshes. This fixed it-thanks!

[@MonsterJuiced]

this should be pinned. Not only did he forget to tell us to turn the material output into a post process shader but he also forgot this too. His own premade thing likely has it all set from previous tutorials n stuff.

[@steliosstavropoulos499]

legend

[@taylerchristensen1247]

Thank you!

[@developer3152]

Thank you very much!

[@mradinoz]

somehow youre just pumping out the most useful ue4 tutorials on this site

[@PrismaticaDev]

Just sharing the love as I go! :)

[@MaxSMoke777]

Look up Tesla's Tutorials.

[@moejahi3d3]

You got a new subscriber for life! Don't know how to thank you..developing a game for a certain console and aiming for 60fps lock. Pretty much did all the optimizations i could on the GPU side and was left with removing atmospheric fog for the last 10frames I needed but that really impacted the feel of the maps and wasnt conveying the ambience I had in mind. With your cheap fog method, i got the same feeling/look as atmospheric fog back with ZERO hit. It's magic really. Thank you so much. Consulted a handfull of artists/ue4 pro's..no-one mentioned this solution.

[@teamev1398]

Do you have any videos on KZbin that you can link to boost fps?? I have made a small anime game but I get 40-75 fps with a bunch of drops on low to. I have a 3070 also.

[@SiIverclaw]

Just discovered your channel, you have benn covering things I've been looking for for years! You are awesome ! Keep up the good work :D

[@PrismaticaDev]

Fantastic to hear :) everything I cover is the result of at least a week of frustration trying to find out how to do things - I feel your pain

[@markbay9275]

Charlie, all your videos are great! Much respect! 🤝👏🙌

[@Chu4hun]

Thank you very much, very useful tutorials. Continue in the same spirit. You were posted on a Russian forum for indie developers. That's how I found you. I've been looking for how to implement some functions for a long time. Thank you so much!

[@PrismaticaDev]

Thank you so much! Glad that the videos are getting out to people that need them :) See you next time

[@boiraproductions7828]

Very educational AND very entertaining :) Thank you!

[@PrismaticaDev]

That means you have to subscribe TWICE ;) Thanks for the kind words!

[@Kog580]

Hello, Viking! Cool, thanks a lot for the lesson. I'm waiting for more interesting reviews from you.

[@PERGGP]

Very cool stuff man! Than you so much!

[@YourSandbox]

Noice. Keep it style and simple.

[@PrismaticaDev]

Gotta get that 3-colour fog going ;)

[@UnleashedCode]

Excellent video... so thank you very much indeed...

[@PrismaticaDev]

No worries at all! Just doing what I love :)

[@xylvnking]

I had an outline post process before this which was still visible. I used the 'blendable priority' option set to 1 (outline was set to zero) and now i get no jittering and my outline fades with the fog. Great tutorial, thanks!

[@hbonin]

Hey Charlie! Nice videos, just subscribed! 2 questions: How is this different to exponential height fog? And also, could you please make a video on localised fog? Thank you Sir!

[@PrismaticaDev]

Hey Closter! I'm not 100% sure personally, but I imagine Expo Height Fog would use some sort of volume calculation based on World Position, so would be more expensive than depth-fog like this tutorial. You could also do a World-Position based fog using the B channel of world position.

[@pdubulous2222]

Works in HTML5! Fantastic.

[@OsnosisBones]

Very informative and helpful for a lot of things. I did run into a particular issue though and was wondering if there's a fix or if I need to change the material itself, but is there a way to make it so that the fog post process can obscure additive materials in the same way? Currently both additive and translucent materials can be seen no matter the distance even with before transparency selected.

[@alecek]

snibelibibeli your tuts are gold...

[@PrismaticaDev]

Thank you :) Very appreicated!

[@Fokkusu]

nice, fog ultra cheap that goes well with cell shading, we are trully spoiled by you xD

[@PrismaticaDev]

I’m spoiled to have support from you my dude!

[@Fokkusu]

@@PrismaticaDev its well deserved :), keep going ^-^

[@iloveblender8999]

Prismatic Dev: Let's just pretend it does not exist for a minute. Me who does not have the nodes: I think i ll just do that.

[@EthynLee]

Thank you!

[@neitherworld]

love you dude

[@PrismaticaDev]

No U!!~ uWu

[@FloodAnxiety]

"Ultra performant", immediately uses post process, *cries in mobile Quest 2*

[@PrismaticaDev]

Hahhahaha RIP. If using forward rendering and standard UE4 fog systems you could always search for the "Height fog using vertex shader" I'll look in to a good forward rendering technique for fog in the future :)

[@FloodAnxiety]

@@PrismaticaDev "Height fog using vertex shader" Good recommendation, thanks!

[@AdamPW]

@@PrismaticaDev do you have a specific article in mind? I tried googling but all Google shows me are other postprocess materials or semitransparent plane techniques

[@marcelwang9267]

hi! thanks for sharing. could you also share the files or tutorials about FogColor MPC and the color shader(around 4:04)) you built?

[@carlosgandulfo682]

Hey mate, thanks a lot for the tutorial. Think you could make some in-depth tutorials about Material Parameter Collections? I'm trying to figure out how you set them up but it's been impossible for me to do so. Thanks a bunch in advance. Btw, already subbed, your tutorials are awesome.

[@PrismaticaDev]

Sure thing! That's a great idea for a video :)

[@carlosgandulfo682]

@@PrismaticaDev Thanks a lot, I'm having a headache trying to figure out how did you set up those time of day and distance parameter collections.

[@OleksandrSe]

My gratitude

[@PrismaticaDev]

The pleasure is mine :)

[@OleksandrSe]

@@PrismaticaDev it's expecially cool that I can change opacity, my previous cheap fog didn't supported that and I couldn't see the sky

[@druffthewolf3830]

Liked and subscribed :D

[@ShoryYTP]

You are a godsend

[@PrismaticaDev]

You are NICE. Thanks for the support :)

[@stormolflak]

Thanks

[@alejandroarboleda8472]

Hi!, very good video and tutorial! One question, is it possible to get this effect somehow in a game with Unlit mode?

[@PapaSage]

I am not an expert on the matter, but I believe post-process effects are disabled in unlit mode because unlit mode removes all "lighting" effects so that you can clearly edit geometry. If you want your game to have an unlit appearance, I am afraid you will have to make all of your materials unlit. However, thankfully this tutorial still works with unlit materials. Recreating all of your materials can be a pain depending on how far you are into your project, but fortunately, the "unlit" view gives us a good peek at it, and helps us decide if it is worth it! Good luck, friend! (and sorry for the super late reply lol)

[@52-hzwhale44]

it was soo good but when i do it in the screen in the right and bottom of my camera is line with the fog color and i cant fix it can you help me?

[@nicotangara7037]

Hey thanks so much for the tutorial! I am trying to implement this on a mobile game but the depth distance seems to be inconsistent. Been trying different value but can't get the same one with the viewport. Any idea how?

[@PrismaticaDev]

Hey Nico! Unfortunately I'm not too familiar with Mobile projects. I'm not even 100% sure if this method is compatible with most mobile games since it requires Deferred Rendering as opposed to Forward Rendering

[@Daniel-qt5ib]

Hey, so I've tried implementing this into my own project but I'm getting this weird effect where it looks like objects in the scene are vibrating when the fog is active. Any ideas on how I might fix this? EDIT: Note that it's even happening in the viewport for the material :S EDIT 2: Ok so I think I've found a fix - in the Details panel for the material itself, scroll down and set the Blendable Location to Before Tonemapping (mine was set to After Tonemapping by default). Not sure if there's any reason I shouldn't be doing this but it's stopped the vibrating issue for now at least :P

[@PrismaticaDev]

Ah yes haha. I think I forgot to mention Tonemapping in this tutorial because mine was already set to Before from using my cel shader haha

[@Daniel-qt5ib]

@@PrismaticaDev Haha no worries! Thanks for the tutorial :) Love the way your game is coming along btw, the weather system looks awesome!

[@HalleckArts]

Thanks for mentioning this, no more jitters and also the colors in my scene look better now!

[@Deathend]

Yee yee. Material Domain: PostProcess which lets you change the blendable location.

[@blackspeon18]

hi, what is the name of the node that you used after depth fade? and after lerpinterpolate? i can not find it please can you help me

[@yum-san]

10/10 fog

[@austinindiegames6193]

How did you have both post processing materials in the same Material? I am trying to connect the cell shader to the fog shader however I cannot figure out how you did that?

[@PrismaticaDev]

Hey there! The Fog lerp is just at the end of the cel shader chain, with the cel shader result plugged in to the A of the Lerp.

[@austinindiegames6193]

@@PrismaticaDev Wow, thank you so much!

[@speaker6060]

Any way to add multiple colors to the fog to get a similar effect seen in among trees or valheim, Where the fog is orange where the sun is then transitions in a gradient like effect to pinks purples to a cold blue the more its away from the sun

[@PrismaticaDev]

It's definitely possible - you could record the sun's position/angle etc and use that to Lerp the colour somehow... I'll give it a think! You can definitely do a distance-based colour gradient using a 3-colour-lerp node which would give the Among Trees/Firewatch look pretty well!

[@speaker6060]

@@PrismaticaDev Would be interesting to see, that style has gotten abit popular, i love colorful fog always looks pretty :D Im using voxel planets so i do have to figure out how to convent some of these shader things to work on a spherical planet

[@PrismaticaDev]

@@speaker6060 Absolutely - I looove the effect haha. I'll look in to making it directional/based on sun position whilst maintaining the performance!

[@speaker6060]

@@PrismaticaDev My project is using the voxel plugin and is actual realtime planets with a simulated solar system with orbits so my sun is a real actor in the center of the level and the planets dynamically orbit and rotate. So my sun in the level is static and planets move what i would need to do is use a spherical culling mask to contain the fog to with inside the atmosphere of the planet. The main problem i run into is most tutorials assumes your not doing planets that your level is a flat traditional level mine is spherical where most shaders wont work not atleast edits. Funny enough making realtime planets was easy making everything else work with the planets is not XD At somepont ill join can maybe have a better chat about it

[@IRONFRIDGE]

Nice one! I actually tried something similar but.... but..... do you know how we can let the sky be still visible? So just at a certain height?

[@PrismaticaDev]

Sure can - you could go with a distance-based exclusion (so IF scene depth > 100,000 show the original image, IF < 100,000 show to fog-affected version) OR you could add an inverted mask using World Position masked in B multiplied over the top of the method in this video :)

[@cinebst]

@@PrismaticaDev if you have time, could you please some more detailed instructions for this? I'm having trouble succeeding with either of the options you recommended. Thanks for the tutorial!

[@PrismaticaDev]

@@cinebst Hey there! Here's a screenshot of the solution :) imgur.com/a/oKLcmAa the bottom-most connector comes from the rest of your PostProcess material

[@cinebst]

@@PrismaticaDev ahh, that's a success! I appreciate it!

[@exa211]

You can also use a CustomDepth in the B Pin so you can toggle it

[@xenonguillou7105]

Hey, It's sem broken in unreal engine 5.0.3. I try it one in unreal engine 4 and it's work perfect. But in UE5 there are wherde "prejection" and it's not working well. Do you have a solution for UE5 (other tutorial talk only about volumetric fog)

[@Chromixxxx]

is there a way to add the fog to a specific area only and not the whole map? i want it to be super dense on the lower levels of my map but be pretty much non existent on above a certain point

[@Bubblegummonsters]

I've seen something in one of the what's new in unreal five on the epic site where they add fog/smoke within a sphere .

[@wpwscience4027]

I need help with my Watched Vieo custom event. I can't seem to link it to the thumb up and thumb down call. Do I need to Cast to Charlie or...

[@David-im6rt]

my lerp doesnt work? comes up error 'arithmetic between types float4 and float3 are undefined'

[@PrismaticaDev]

@@jordant3512 you simply just need to Mask RGB one/both of the values. The output from a Scenetexture is an RGB-A value (float 4, the last float being the Alpha value) but you might be using a Float3/Vector3 colour. The Lerp is wigging out because there's a 4th value in one of the inputs but no 4th value in the other input. TL;DR: ComponentMask -> RGB and you're all good :)

[@franklinfisher7776]

For some reason I keep getting this error [SM5] (Node LinearInterpolate) Arithmetic between types float4 and float3 are undefined. I'm really new at all of this.

[@franklinfisher7776]

I'm such an idiot. I wasn't paying attention, and did a float 3, rather than a float 4. *face palm*

[@PrismaticaDev]

@@franklinfisher7776 Hahaha we've all been there :P Fortunately it's a lesson you only need to learn once! :)

[@GBTC2011]

I did a 4 float and still have the same problem

[@evilnescu]

@@GBTC2011 have you converted it to a parameter? That where it breaks down - you need to do a "make float 4" and pass each channel coming off the fog color parameter through that node, r,g,b,a respectively in the x,y,z,a, and it will plug into the lerp just fine ;)

[@peter486]

thank you but i cant get oit to work in Unreal 5. Any ideas what has changed?

[@adelbenhamida6188]

Use a constant 4 instead of 3

[@JumboTTV]

@@adelbenhamida6188 Great tip! I was also struggling thank you!

[@adelbenhamida6188]

@@JumboTTV np my friend :)

[@tacofest5631]

info about the hotkeys you use would be greatly appreciated

[@PrismaticaDev]

Hey Taco :) You can find a list of the hotkeys at the very bottom of this document docs.unrealengine.com/4.27/en-US/RenderingAndGraphics/Materials/Editor/Interface/

[@omarhefnawey1959]

Please tell me how you did the stars 🌟 view in the sky And thx so much

[@PrismaticaDev]

Heya Omar! They’re actually just the default Unreal skysphere Stars - you need to set the Sun Height in the skybox to negative for them to appear

[@omarhefnawey1959]

@@PrismaticaDev thanks😊

[@GrandmasterofWin]

Any idea how I can make my bloom/emissive material take priority over the fog?

[@PrismaticaDev]

Very good question - it's something I've been thinking about! You could possibly use a Custom Depth stencil and give it a different Fog Depth, I think that would be the simplest way

[@PrismaticaDev]

@@GrandmasterofWin Yeah I think since the Bloom effect is screen-space, it just uses bright values to generate bloom so the emissive materials would have to be bright enough on screen to create bloom

[@jacobst-pierre4241]

In your experience, could this work in VR? Post process is usually a big no-no in VR because it has to render it twice, and sometimes can even cause nausea.

[@lexxrelaxx2016]

2:34 You connect b to a color. How did you make this color?

[@PrismaticaDev]

You can hold down 1, 2, 3, or 4 and left click to instantly get a Vector node :)

[@grayfullbaster3246]

I lost you on 2:17 lol im such a beginner and I dont know what hotkey you did when you add that extra node for opacity and fade distance. pls halp

[@PrismaticaDev]

Ah! Haha just hold down the 1 key and left click to create a Constant scalar value. You can also hold down S to create a scalar parameter (a version you can edit in a material instance)

[@EnricoUniverse]

Is it cheaper than the UE4 built-in fog features?

[@PrismaticaDev]

Cheaper than Volumetric fog by miles. Not sure if there are any other default fogs but this implementation will give you a tonne more flexibility (making height-fog, 3-coloured fog like Firewatch etc)

[@WOLFPACKED]

this is affecting my muzzle flash particle effect if i shoot it into the sky.. any ideas why?

[@PrismaticaDev]

It might have some weird effects on Translucent materials, since they aren’t included in the Depth pass. You could try changing the muzzle flash to a Masked material and using the DitherAA node instead (check my video about DitherAA for more details)

[@akshar9205]

After applying the postprocess material.. all the foliage became shaky.. any solution? Again thank you for this tutorial..

[@juliemt1117]

SceneTexture don't have the SceneColor button? What do I do?

[@Ange-C]

what was that number 1 node you created?

[@CortVermin]

Error: tried to call none: destroy actor; bad person is null. or something like that, had a good laugh @5:00

[@taranitahiron2084]

How Did You Make The Color Param Thing?

[@PrismaticaDev]

Hey Tarani! You can hold down 1, 2, 3, or 4 and left click to instantly get a Vector node :)

[@taranitahiron2084]

@@PrismaticaDev Hi Thanks For That, I Also Discovered You Can Just Drag And Drop Fog In UE, Its Already Set Up By Engineers Perfectly, Called Exponential Fog

[@PrismaticaDev]

@@taranitahiron2084 Correct, although the exponential fog has some volumetric properties that make it more expensive to calculate, where as this depth-fog method simply takes the depth buffer and uses it as a mask. The standard fog definitely can look better, but is more expensive

[@HomakHakerok]

I love you

[@PrismaticaDev]

The feeling is mutual xoxo

[@cabreram.4734]

Ok this is so hard. Im completley lost, I dont understand any of those nodes and how to set them up!

[@vaisnava]

What if we are not using a Cell Shader?

[@ProjectShinkai]

Can this be rotated 90

[@virpix5224]

how do i get the 0,0,0,0 thing on 2:37

[@flohh]

Anyone else getting weird artifact on screen in UE5?

[@AeonSaturnal]

yes

[@peternolan2457]

what hokey did he use to just get numbers?

[@PrismaticaDev]

You can hold down "1" and left click to get constant values, and hold down "S" to get scalar paramaters :) There are a bunch of other handy ones like L, 2, 3 etc that you should try out!

[@otisfuse]

Scuffed fog epic

[@PrismaticaDev]

It’s the knock-off brand of Volumetric Fog!

[@otisfuse]

@@PrismaticaDev except more epic

[@VincentGnawl]

Im getting an invalid invite when I try to join your discord. says it may have expired

[@PrismaticaDev]

Ah bugger. "Permanent" link living up to its name ;) I've updated it in the description and will do for all my other videos tomorrow haha. Here it is! Thanks for the heads up :) discord.com/invite/jWUJn7GVhm

[@scottlee38]

What is the name of this nice innocent music?

[@PrismaticaDev]

It’s various tracks from the Oldschool Runescape soundtrack :)

[@scottlee38]

@@PrismaticaDev Lol this explains it

[@vandercomics]

+1 like and sub, thanks a ton!

[@toskatoska8232]

any idea why do i have an error when i connect my lerp to the resul node of the material? :(

[@PrismaticaDev]

Hey Alex, sorry for the late reply - for some reason I don't get notifications for all comments anymore. If it's a "arithmetic between float 3 and 4" error, you just need to use a ComponentMask node to mke sure they're both RGB instead of one being RGBA

[@GBTC2011]

@@PrismaticaDev I tried that and it doesn't work either. No wonder it's cheap, it doesn't work.

[@PrismaticaDev]

@@GBTC2011 no need to be sassy, the error is on your side. If you let me know what the error is I’ll be able to help :)

[@GBTC2011]

@@PrismaticaDev I am not sassy, obviously many other people have the same issue. When you teach, you should make sure that what you are saying is correct and works.

[@PrismaticaDev]

​@@GBTC2011 I don't think you and the 1 other user people out of the 6,000 that have watched this video is "many". If the method didn't work then there simply would not be an end result at the end of the video - if you would provide a screenshot of your material setup and the full error that you're receiving then I would be more than happy to help.

[@dionathangarcete2358]

How you get this "Fog Colour" Parameter?

[@PrismaticaDev]

Hey Junkka! I get it from my Material Parameter Collection so that I can change it on the fly, as PostProcesses are notoriously hard to access at runtime haha

[@diony3058]

@@PrismaticaDev How did you do this parameter?

[@CM1488Marshall]

Its work on android preview, but not work on the android device, anyone now how force work it on mobile? Its look so simple, idk why it not works on android

[@GBTC2011]

I've tried everything I can think of and any of the answers offered below, it still doesn't work. The error message ...in feature level SM5 keeps on coming up.

[@zego_fr34ks67]

Same here, have you found a fix for it?

[@GBTC2011]

@@zego_fr34ks67 No, sorry. I ended up using something else.

[@zego_fr34ks67]

@@GBTC2011 Alright, np

[@PrismaticaDev]

@@zego_fr34ks67 Hey Zego - what is the error specifically? If it's an Arithmetic error (float 3/4 etc etc) then use a ComponentMask with RGB ticked on both inputs to the Lerp :)

[@PrismaticaDev]

If it's another error to do with Shader Model 5, you may want to update your firmware/drivers or double check that your GPU supports SM5

[@pranavkushwaha6016]

Will it work for mobile ?

[@SoftYoda]

But... why do you have stars... if it's top down x)

[@PrismaticaDev]

So I can take pretty screenshots for the thumbnails! Duh ;)

[@Zumito]

lo unico malo es que esto falla al usar una escala de resolución distinta al 100%

[@PrismaticaDev]

Hmmmm I'll need to experiment with that. Might just need to adjust for Screen Res in the UV's of the SceneTextures

[@georgydev]

Well, this is actually not a very performant and cheap fog, at least because it uses a Depth Buffer and interacts with Translucency.

[@PrismaticaDev]

The depth buffer is being generated regardless of whether we access it in the Post Process or not, and we're simply using the final Depth texture as the alpha of a Lerp between the scene and a flat colour. Essentially just piggybacking on what's already been done, right?

[@parsin01]

Where can I download this fog?

[@PrismaticaDev]

Following this 5 minute tutorial will be quicker than downloading and migrating it :)

[@boombyte8849]

Made in China fog.

[@RobCardIV]

why would i ever want to paint half of the horizon in that terrible piss wash color. id infinitly rather a sharp cull line to retain crisp colors. when i look a mile into the forest, i dont see pisswash. i see trees. horror games are lame. thankyou very much for teaching the HOWS . but this is something i very well may never use

[@PrismaticaDev]

Hey Rob! The piss-wash colour is of your choice and you can adjust the opacity to your liking, as I show in the video. If you wanted a sharp cull line you could add a CheapContrast node before the Alpha of the lerp and set the contrast to 100+. Not sure why you'd want to, since it would look like hot garbage, but as with the colour of the effect, that one is on you! :) If you look a mile in to the forest and don't see any desaturation or colour shift, you might want to double check if you're on an alien planet where there is no atmosphere to gradually scatter light. I'd highly suggest contacting your local Citizen Astronomers club to report your findings! Thanks for watching as always :)

[@asagrien]

The only thing piss-wash here is your attitude.

[@polyestergames4473]

Hate videos where the person talking obscures the thing they are trying to do. We don't need to see your face!

[@PrismaticaDev]

Well I need people to see my face so that they recognise me and build a connection to my channel, since this is my full-time job :)))

[@pachyrhinosaurus1]

6 minutes lost, i would rather see how the paint dries