x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

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?

I made regular fog based on info in this thread:

alt text

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?

Product Version: Not Selected
Tags:
more ▼

asked Apr 12 '15 at 12:45 PM in Rendering

avatar image

honaj
21 2 6 7

avatar image 3danm8r May 14 '15 at 04:46 AM

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. alt text

alt text

Even just 3 can have a cool look with the right colors. alt text 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. alt text

2.jpg (607.7 kB)
1.jpg (695.3 kB)
3.jpg (964.0 kB)
4.jpg (273.6 kB)
avatar image spinav Jul 19 '15 at 03:05 PM

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

avatar image spinav Jul 19 '15 at 03:06 PM

Also is this cheaper than using an Atmospheric Fog volume?

avatar image 3danm8r Jul 20 '15 at 04:48 AM

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.

avatar image Rgiz Jun 13 '17 at 05:55 PM

Sorry for the pre-historical up

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

second with the jakpe bp: alt text

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

alt text

Same scene without any of custom fog: alt text

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. https://drive.google.com/file/d/0B_na6P0wZy3JeFBuQkpORkk1ejQ/view?usp=sharing

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

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

and thanks 3danm8r and jakpe

avatar image roumonk Jun 20 '17 at 10:30 PM

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)

avatar image Rgiz Jun 21 '17 at 05:34 PM

tea_kobzar, thanks to join the post :)

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: alt text

without:alt text

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

avatar image roumonk Jun 21 '17 at 09:01 AM

You need to use a Custom Depth, like it's in the video, but with inverted values, for apply fog to everything, but water https://youtu.be/9ZawosRVZrs

avatar image roumonk Jun 21 '17 at 12:09 PM

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

avatar image Rgiz Jun 21 '17 at 05:37 PM

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

avatar image roumonk Jun 21 '17 at 07:08 PM

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

avatar image Rgiz Jun 21 '17 at 09:06 PM

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

avatar image roumonk Jun 21 '17 at 10:11 PM

I don't have any levels with water. So I don't know about translucency. That level with the Lighthouse is available somewhere, or it's your own stuff?

avatar image Rgiz Jun 21 '17 at 10:14 PM

Its from a video tutorial from Lynda.com, 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 :)

alt text

avatar image roumonk Jun 22 '17 at 12:42 AM

It seems to me that there are no problems with translucent materials. but i've noticed, that post process fog needs to be set as "Before Translucency" for correct blur when using DoF. alt text

avatar image roumonk Jun 22 '17 at 01:05 AM

BP screenshot is at the bottom of the page

avatar image roumonk Jun 22 '17 at 10:32 AM

I think there wasn't a problem with water in your case. It's just too small fog distance. But with "water planes" pack you need to uncheck "separate translucency" and it'll become affected by dof and our fogs. Also with water material you'll have incorrect blending with other tranclucent materials by default (i.e. without fog).."Wish I were graphics programmer" :) alt

alt text

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

3 answers: sort voted first

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.

customdepth

more ▼

answered Oct 29 '15 at 04:21 PM

avatar image

jakpe
56 2 5 10

avatar image Dark woods May 14 '16 at 12:22 PM

Thank you so much! you made my life beautiful

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

more ▼

answered Jun 21 '17 at 07:11 PM

avatar image

roumonk
16 3 4

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

BP screenshot + gif. It's 101 instructions, I don't know, how it affects on performance.alt text alt textalt text

more ▼

answered Jun 22 '17 at 01:04 AM

avatar image

roumonk
16 3 4

avatar image roumonk Jun 22 '17 at 08:59 AM

oh, TransluentWater material is 4 times larger. no need to worry alt text

avatar image Rgiz Jun 22 '17 at 11:38 AM

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 alt text

skybox without fog alt text

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

avatar image roumonk Jun 22 '17 at 12:01 PM

It seems, you've not changed post process material to "Before Transclucency", what I mentioned in comments above. If you'll turn "Color Opacity" to 0 in the "Fog_Global_Color", and check "FogGlobal_DistanceX100" parameter, you'll achieve visible skybox too :)

Also, my blueprint is designed for use with material instance, so you can change parameters in real time without compiling shader (In case you didn't know about that). Here's the screenshot of parameters. alt text

avatar image Rgiz Jun 22 '17 at 12:29 PM

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

alt text

avatar image roumonk Jun 22 '17 at 12:43 PM

Great) Oh, I'm not very familiar with forums, but It's definitely a good idea, thanks

avatar image Rgiz Jun 22 '17 at 01:08 PM

Ok, I updated the fog color option to a friendly color pick :) alt text

I clean a bit the material. alt text

colorpicker.png (162.7 kB)
fw-fog-update.png (270.1 kB)
avatar image roumonk Jun 22 '17 at 02:11 PM

Yeah, good. Color picker is a better solution )

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question