Home Technical Talk

The M I R A G E effect [Help]

polycounter lvl 6
Offline / Send Message
Pinned
D4N005H polycounter lvl 6
Hi, The other day I asked it here : http://neatcorporation.com/forums/viewtopic.php?f=4&t=2039 no one seems to know the answer although it should be not that hard. I just need some clue.
 
The question is how to achieve the mirage effect (the reflections) that is appeared on the road in the image below:

It should be a shader for the road only, and should calculate the vertex distance from the object to the camera. Then I should do some trick for mirroring only the parts that clearly is showing the reflections (no need for an exact mirage simulation) these things came up to me. But I need a bit more detailed help. I'd be glad to hear your guidelines. I am using shader forge (yeah...I'm not that nerdy guy who writes shaders by himself).

Replies

  • radiancef0rge
    Options
    Offline / Send Message
    radiancef0rge ngon master
    This is fresnel. You should be able to see this in any modern engine using PBR. If you are not seeing this, your roughness is incorrect or your camera is not perpendicular enough the surface normal.
  • Joopson
    Options
    Offline / Send Message
    Joopson quad damage
    @radiancef0rge
    Not exactly right. This only happens in certain conditions. Usually when there's a layer of very hot air rising from the street. You're not seeing the ground reflect, you're seeing the air reflect, if I'm not mistaken.

    BUT, fresnel is a good place to start, I'd imagine, since it does share some personality with this effect. The lines are an important aspect of it, as well. I know nothing about Shader forge, so I can't actually help at all, so apologies. And good luck.
  • ActionDawg
    Options
    Offline / Send Message
    ActionDawg greentooth
    This should really be done as a screen space effect, not a custom road shader. What you're seeing are not reflections. They're light rays being bent by pockets of hot air:


    The perception of it being a reflection is part of the illusion. You never actually see the road underneath.
  • RN
    Options
    Offline / Send Message
    RN sublime tool
    I'm wondering if there isn't some automatic way of doing this.
    You can use the same "mirage streak" texture on the entire road, but make use of pre-authored mipmap levels that have a different transparency for each level. This way you associate transparency with distance from the camera: the texture will automatically always be "ahead" of the camera, with the first mipmap level being completely transparent, then the next mipmap levels gradually increasing in opacity up to 100% (as they get smaller and are used when the fragments are farther from the camera).

    In the pixel shader for the road you can sample that "mirage streak" texture and check the alpha value, which should serve to tell if you want to show "road" or "reflection" -- you can sample a cubemap texture to use for a reflection, for example.
  • ActionDawg
    Options
    Offline / Send Message
    ActionDawg greentooth
    Problem is you're not going to be able to capture anything other than what's in a cubemap and you've got to deal with all the problems associated with cubemaps. If you do it in screenspace it will work for dynamic objects which is really important if you're trying to render a road with cars.
  • D4N005H
    Options
    Offline / Send Message
    D4N005H polycounter lvl 6

    Joopson said:
    @radiancef0rge I know nothing about Shader forge, so I can't actually help at all, so apologies.
    RN said:
    I'm wondering if there isn't some automatic way of doing this.
    Hey all, thanks for the replies I am reading them and some are actually really informative, but I should solve a misunderstanding here. Shader forge is a node-based shader editor tool just like the one that is used in Unreal or CryEngine, Or the one that is used in 3DS Max. So yeah, nothing automatic or magical happenes there. You can even write your own shader code in a node which is called something like "custom" and use your own code in the tool. So if you have something in your mind for this effect then not a problem, say it and is okay, I appreciate it. Cheers.
  • Obscura
    Options
    Offline / Send Message
    Obscura grand marshal polycounter
    Take the for product of the blue channel of the camera vector and the vertex normals. This should give you a fresnel that only works vertically. From here, you want a road normalmap that has the waves. To make it happening only in the distance, you can use pixel depth. Then lerp between 0 and 1 metallic based on the mask you just created, and also between 0 and your roughness map. This will make the road having high reflectivity and low roughness on the fresnel angles, affected by your wavy road normals.


  • Obscura
    Options
    Offline / Send Message
    Obscura grand marshal polycounter
    Something like this could be a nice start I think...

    You could animate the effect as well, by using a panner on the mirage normal map coordinates.


    https://www.youtube.com/watch?v=XOFLv9yF0N4


  • D4N005H
    Options
    Offline / Send Message
    D4N005H polycounter lvl 6
    Huge thanks @Obscura, I've learned a lot about some new nodes that I've never used before with the image you've made.
    So today our city (Babolsar) was strangely very snowy and they closed our school, so I didn't waste time and managed to make the mirage effect with good realtime reflections.
    The note is , @radiancef0rge was true, I didn't use the vertex normal node and it works fine without it. Have a look at the video below to see the shader in action. Thanks to anyone who replied here. This is why Polycount is the best, people here are great.
    https://youtu.be/87OaFse4PTQ
    Two more notes:
    1) I only special thanked Obscura in the video, but I thank anyone here who was helpful (all of you).
    2) I was lazy to fix the moving black bar at the end of the video, so sorry for that (I don't think it was neccesary to get it fixed,though).
  • Obscura
    Options
    Offline / Send Message
    Obscura grand marshal polycounter
    Turned out nicely! :)

    About the vertex normal thing - I used that too , so it can appear only on faces that looks up (z+). So, if you would rotate the road to its side or upside-down, the effect would not happen. This is optional though and yes it does without it, but this is like a small fix for an issue that could happen when the road is rotated or bent in certain directions.

    Also, I think I would make the waves wider. Like on your reference. And maybe bring it a bit closer. Otherwise its cool.
  • D4N005H
    Options
    Offline / Send Message
    D4N005H polycounter lvl 6
    Obscura said:
    Turned out nicely! :)

    About the vertex normal thing - I used that too , so it can appear only on faces that looks up (z+). So, if you would rotate the road to its side or upside-down, the effect would not happen. This is optional though and yes it does without it, but this is like a small fix for an issue that could happen when the road is rotated or bent in certain directions.

    Also, I think I would make the waves wider. Like on your reference. And maybe bring it a bit closer. Otherwise its cool.
    Okay so this is what I have now (shown below), thanks. I'll fine tune and may change the mirage normal map later.
    Also the image shows some reflection errors which also I'll work on it sometime.
  • igi
    Options
    Offline / Send Message
    igi polycounter lvl 12
    looking pretty convincing. But I think you need to limit it to appear on only certain surfaces, asphalt in this case.
  • D4N005H
    Options
    Offline / Send Message
    D4N005H polycounter lvl 6
    igi said:
    looking pretty convincing. But I think you need to limit it to appear on only certain surfaces, asphalt in this case.
    It is limited to asphalt. There are some small stuff for it that I'll do later. Thanks for the comment.
  • MR_ZiCO
    Options
    Offline / Send Message
    Obscura said:
    Something like this could be a nice start I think...

    You could animate the effect as well, by using a panner on the mirage normal map coordinates.


    https://www.youtube.com/watch?v=XOFLv9yF0N4


    can you reupload the video please :) 
Sign In or Register to comment.