Cheap Fog in UE4 [Depth-mask post process]

[@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.

[@29Mozay29]

For anyone getting an error in UE5, add a component mask after the SceneTexture, click it's dropdown and check "B", and link it to the Lerp. Compiling what others have said so that this comment can be a one-stop solution: Click the Material output box and set the material domain to Post Process in the details panel. Then, search for "blendable" and change the Blendable Location to "Before Tonemapping".

[@DylonDylonDylon]

I'm getting the same issue. I'm not sure how to fix it yet.

[@DylonDylonDylon]

Adding a Mask (RGB) node after both the SceneTexture and Color nodes fixed it.

[@jameshughes3014]

thank you kind internet strangers, one headache avoided

[@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

[@YourSandbox]

Noice. Keep it style and simple.

[@PrismaticaDev]

Gotta get that 3-colour fog going ;)

[@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!

[@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?

[@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 :)

[@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.

[@FluteboxFan]

Liked just for the coding at 5:03

[@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 :)

[@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

[@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?

[@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

[@markbay9275]

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

[@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)

[@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)

[@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 ;)

[@vaisnava]

What if we are not using a Cell Shader?

[@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 ^-^

[@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)

[@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😊

[@virpix5224]

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

[@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 :)

[@wildworldboyz]

My entire project becomes grayscale and there is no colour anymore when i use this

[@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...

[@alecek]

snibelibibeli your tuts are gold...

[@PrismaticaDev]

Thank you :) Very appreicated!

[@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

[@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.

[@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

[@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

[@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 .

[@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/

[@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!

[@akshar9205]

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

[@flohh]

Anyone else getting weird artifact on screen in UE5?

[@AeonSaturnal]

yes

[@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.

[@UnleashedCode]

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

[@PrismaticaDev]

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

[@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

[@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.

[@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

[@neitherworld]

love you dude

[@PrismaticaDev]

No U!!~ uWu

[@cabreram.4734]

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

[@PEDBRA]

I'm 3 years later, and there are some weird rectangles at the bottom of my PP screen. Other than that, all good.

[@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

[@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?

[@pdubulous2222]

Works in HTML5! Fantastic.

[@juliemt1117]

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

[@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.

[@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

[@da-mor]

Very cool stuff man! Than you so much!

[@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

[@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!

[@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

[@CGandalf90]

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 :)

[@CGandalf90]

@@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.

[@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.

[@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

[@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

[@chrisSandersASX]

Can this be rotated 90

[@matiasinostroza1843]

can this fake fog for vr games?

[@Ange-C]

what was that number 1 node you created?

[@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)

[@ShoryYTP]

You are a godsend

[@PrismaticaDev]

You are NICE. Thanks for the support :)

[@SoftYoda]

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

[@PrismaticaDev]

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

[@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)

[@pranavkushwaha6016]

Will it work for mobile ?

[@yum-san]

10/10 fog

[@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?

[@FourtressStudios]

Thank you!

[@druffthewolf3830]

Liked and subscribed :D

[@parsin01]

Where can I download this fog?

[@PrismaticaDev]

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

[@adoorknob7053]

I love you but slow down and explain each step like the person you're teaching doesn't already know what you're doing. When you added the 0,0,0,0 node I had no idea what that was and couldn't figure out how to replicate it.

[@HomakHakerok]

I love you

[@PrismaticaDev]

The feeling is mutual xoxo

[@stormolflak]

Thanks

[@otisfuse]

Scuffed fog epic

[@PrismaticaDev]

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

[@otisfuse]

@@PrismaticaDev except more epic

[@vandercomics]

+1 like and sub, thanks a ton!

[@PixelRunwayVideo]

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 :)))

[@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.

[@pachyrhinosaurus1]

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