Home Unreal Engine

Best method for onscreen effect, like blood, dirt, etc.?

polycounter lvl 10
Offline / Send Message
leleuxart polycounter lvl 10
I'm working on a level for class and I'm trying to replicate BF3's style, with strong lighting, lens flares, and the dirty lens effect. I've been messing around and so far, my only method of the dirty lens is mapping my material to the lens flare object, so when it's in view, the texture will appear.

However, it doesn't fit to the screen(it's just a texture floating in space basically). My professor recommended I look into a matinee anim, like Epic did with the "Damage_Shake", but they don't seem to work with my PostProcess Chain.

Is there a better way to do this? I'd rather create a material and use it in the PPC or Lens Flare if possible.

Replies

  • imbueFX
    Offline / Send Message
    imbueFX polycounter lvl 5
    Fullscreen post process stuff is made exactly for things like this. For a cheaper method, sometimes at work we attach particle systems to the camera as well. But that's typically only on matinee sequences.
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    Hmmm. I tried to set it up in my Post Process Chain, but the material has to be unlit. I'm trying to get it so when the player has lights in view, the material is being lit. Here's a BF3 example

    BF3_Comrades.jpg

    When the player is looking at a strong light, parts of the texture is lit.

    I also tried setting up a plane in front of the spawn point and attaching it to the player. That worked, somewhat, but with all of the bouncing UT bots do, it's a little too much. I could see my material when it wasn't being lit. I could also look around and see the edge of the plane. :(
  • imbueFX
    Offline / Send Message
    imbueFX polycounter lvl 5
    Yes the material is unlit because you plug in a scene texture sample (which is basically a screen grab). From there you can overlay this like dirt, blood, dust, etc. You can mask those so it only appears on certain parts of the screen as well, and that mask can be parameterized to be triggered by other events (like a particle hits a camera volume, lets say).

    Doing color and tone adjustments can then be done through the uberpostprocess chain. You can also go to view -> world properties to mess around with the settings on a global level.
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    imbueFX wrote: »
    Yes the material is unlit because you plug in a scene texture sample (which is basically a screen grab). From there you can overlay this like dirt, blood, dust, etc. You can mask those so it only appears on certain parts of the screen as well, and that mask can be parameterized to be triggered by other events (like a particle hits a camera volume, lets say).

    Doing color and tone adjustments can then be done through the uberpostprocess chain. You can also go to view -> world properties to mess around with the settings on a global level.

    Maybe I just need to take a look at my material again. I'll take a look at it and see why it doesn't work well with the unlit post process node. Thanks for your help!
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    I quickly throw in a material with a dirty lens texture(in additive mode)as a material effect,but the thing is while i haven't played BF3,i have seen Samaritan's demo about a million times,and i know in there(just like leleuxart mentioned) the effect reacts to light(how it should normally behave),so how do they do something like that? how do you mask out the effect only to regions where the camera is looking at a light source?

    here's my result:
    dirtylens.png
  • haiddasalami
    Offline / Send Message
    haiddasalami polycounter lvl 14
    You sure those are not just lens flare actors? Check out Jordan Walkers bath house scene.
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    Minato wrote: »
    I quickly throw in a material with a dirty lens texture(in additive mode)as a material effect,but the thing is while i haven't played BF3,i have seen Samaritan's demo about a million times,and i know in there(just like leleuxart mentioned) the effect reacts to light(how it should normally behave),so how do they do something like that? how do you mask out the effect only to regions where the camera is looking at a light source?

    here's my result:
    dirtylens.png


    Hey, nice result! You got it to work, it just doesn't react to light? I never tried Additive mode(never knew what it did, just stuck with unlit, phong, masked, translucent). How is your material set up?
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    You sure those are not just lens flare actors? Check out Jordan Walkers bath house scene.

    I replied just as you posted, so sorry for the double post. I'll give it a look. Hopefully whatever he uses loads with DX9, my laptop doesn't support DX11.

    I tried messing with the lens flare actor, but all I could get was a texture that loads in space around the flare. It doesn't appear to be on screen or affected by light, it's just kind of... there. Perhaps I didn't do something right or missed a setting, I'm not really familiar with that part of the editor.
  • Sandro
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    You sure those are not just lens flare actors? Check out Jordan Walkers bath house scene.

    They stay still the whole time,i really doubt those are lens flares,is there any way to lock a lens flare element to a region on screen?
    leleuxart wrote: »
    Hey, nice result! You got it to work, it just doesn't react to light? I never tried Additive mode(never knew what it did, just stuck with unlit, phong, masked, translucent). How is your material set up?

    thanks,yes that's the major problem,in other words it's just a static effect,i used the additive mode so i wouldn't have to make a separate mask for the texture for using in translucency mode,since additive mode works like the Screen mode in Photoshop and discards the black color for you,but as far as i know you shouldn't generally use additive for postprocess effects,about the set up,as i said it's just a dirty lens texture(with black background),pluged into a power node to tighten the effect a bit,pluged into the emissive...
    Sandro wrote: »

    Ok,there's a light bulb flickering above my head,but can't quite lighten me up,lol,either you're going to have to explain a bit more or i have to get messing around...how will that help figuring out the location of lights in the scene?...is it possible that a light vector might be involved in this?
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    I'm still trying to wrap my head around which part you're having issues with.

    Could do a paint over of what you're trying to accomplish? It sound to me that simple Camera PP which as a Phong like mask for a Vignette kind of effect for masking out the 'sweat' in the middle, while lerping between a Distorted SceneTexture with slight Chroma is what you're looking for.

    And the Lights would be simple a flat plane, with streaking for opacity, always facing the player and sorting order set to 'top'.
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    Ok,personally i couldn't make sense of most of what you said,and that's probabely because i'm a noob,hopefully others did...if by any chance your question was directed at me,my issue is how to restrict this PP effect only to areas where there's a strong light directed at the camera:

    dirtyflare1b.png
    dirtyflare5b.png
    and just so we are on the same page,that IS a PP effect,and not a lens flare system,right?...the texture is still and consistent throughout the whole video,only the portions that show up are different...unless,of course i'm missing something here...
  • Sandro
    @Minato

    As others have already said there's no need to figure out locations of lights - just place lens flare actors where lights are.
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    The first one looks like a inverted light fresnel, so anything that is 'bright' will become additive and pop out the 'mask'.

    You should look into Lerping the SceneTexture between one that is masked with the 'sweat' effect and one that is 'normal', via said Fresnel.

    You could get fancy and use a ScenePosition node with a 'big' sweat texture, so if the player looks around, there is some 'movement' to the sweat.

    Again, this is me guessing, so take it with a hint of salt.

    I'm not sure about the second one, it would be easy to make it a simple plane with streaks such, but if you want to do it on shader level, I'm guessing you could use the "Flare" nodes? Although I cannot find any documentation about them.

    The effect is called Anamorphic Lens Flare, I tried creating it a while back in UDK, but the lack of documentation from GLSL/HLSL communities didn't help me in creating the effect.
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    Ace-Angel wrote: »
    The first one looks like a inverted light fresnel, so anything that is 'bright' will become additive and pop out the 'mask'.

    You should look into Lerping the SceneTexture between one that is masked with the 'sweat' effect and one that is 'normal', via said Fresnel.

    You could get fancy and use a ScenePosition node with a 'big' sweat texture, so if the player looks around, there is some 'movement' to the sweat.

    Again, this is me guessing, so take it with a hint of salt.

    I'm not sure about the second one, it would be easy to make it a simple plane with streaks such, but if you want to do it on shader level, I'm guessing you could use the "Flare" nodes? Although I cannot find any documentation about them.

    The effect is called Anamorphic Lens Flare, I tried creating it a while back in UDK, but the lack of documentation from GLSL/HLSL communities didn't help me in creating the effect.


    Thanks for all of your suggestions! I'm pretty sure Minato is trying to figure out the same thing I am. We're trying to achieve an effect through PostProcess that would replicate the feeling of having dirt on the lens. This method, I'm assuming, could be used for other things like blood and cracks.

    Earlier, Minato got it to work, but it doesn't react to light. I'm going for a BF3 style(screenshot above), where the dirt on the lens is only seen when a light is hitting it. Hope this clarifies it a bit.


    As for the lens flare actors, I tried that before, but the material is only on the lens flare actor itself. I couldn't get it to look like it was actually on the screen. In this video, he used the lens flare actor and while it looks better than mine, it isn't being affected by the light and the texture is actually just kind of floating there.
  • Money
    Offline / Send Message
    Money polycounter lvl 8
    Alright, I've been going through BF some time ago to see how they did it and they actually combine 2 methods. One is done like whole screen post process texture over the screen, and another are standard lens flares that are concentrated on showing part of the texture using a mask. Specifically in that garage scene they mostly use post process one that's constantly on the screen (that pic is a bit misleading and it looks like dirt is coming from a lens flare, but it's much clearer when seen ingame with movement). I've recorded back then a vid of the second type so you can easy see that it's a flare with a mask.

    [ame="http://www.youtube.com/watch?v=euAL2e-khdE"]BF Flare - YouTube[/ame]

    From those Samaritan pics, both are lens flare and Jordan Walker provided example how to make them in Bath Scene files.
    As others mentioned, the trick is to use a ScreenPos node for the texture sample which will always fix it to the screen like you're actually using it through a post process, and other part is to use a SphereMask just mask out amount of the texture you want.
    This is what I've got back then by 5 min modifying that flare from Bath Scene to get stretched flare look with screen dirt.


    ring_3tuk1w.jpg
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    Money wrote: »
    Alright, I've been going through BF some time ago to see how they did it and they actually combine 2 methods. One is done like whole screen post process texture over the screen, and another are standard lens flares that are concentrated on showing part of the texture using a mask. Specifically in that garage scene they mostly use post process one that's constantly on the screen (that pic is a bit misleading and it looks like dirt is coming from a lens flare, but it's much clearer when seen ingame). I've recorded back then a vid of the second type so you can easy see that it's a flare with a mask.

    BF Flare - YouTube

    From those Samaritan pics, both are lens flare and Jordan Walker provided example how to make them in Bath Scene files.
    As others mentioned, the trick is to use a ScreenPos node for the texture sample which will always fix it to the screen like you're actually using it through a post process, and other part is to use a SphereMask just mask out amount of the texture you want.
    This is what I've got back then by 5 min modifying that flare from Bath Scene to get stretched flare look with screen dirt.


    ring_3tuk1w.jpg

    Wow, thanks for all of that! I just went through the Bath Scene. I already learned a lot. I'm gonna have to mess with the lens flare actors some more then and fix my material.
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    OK,things are finally starting to make sense to me and my puny brain...

    @Ace,while i was still pointing to the lens effect in the second picture(didn't even notice the anamorphic effect at the time),the anamorphic is actually another thing that i'm really interested in,that is,making one through PP rather than in a lens flare...btw,when you say an inverted light fresnel you mean the fresnel node inverted or that's a whole other thing?

    @Money,ok,now that's what i call a thorough explanation,thank you!...and thanks for pointing out the bathhouse scene,i'm reading the thread right now and it seems like a great resource!...

    While i have a few other questions,i'm going to finish looking through the thread first,before asking them just to make sure it isn't actually mentioned in there...
  • imbueFX
    Offline / Send Message
    imbueFX polycounter lvl 5
    Would there be interest in seeing dusty lens elements like this in a tutorial? I plan on covering some fullscreen post process stuff soon, and I actually created something exactly like this at work (got shot down by the creative director, however).The other tutorial idea I had was to do a coke-bottle scope lens that has really blurry lines and distortion, as well as chromatic aberration on the fringes.
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    imbueFX wrote: »
    Would there be interest in seeing dusty lens elements like this in a tutorial? I plan on covering some fullscreen post process stuff soon, and I actually created something exactly like this at work (got shot down by the creative director, however).The other tutorial idea I had was to do a coke-bottle scope lens that has really blurry lines and distortion, as well as chromatic aberration on the fringes.

    Yeah! I'm interested in a bunch of different effects, so anything you wanna do is cool with me.
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    @imbueFX...Any PP/lens effect tutorial would be enormously appreciated!...aside from the dirty lens effect i'm really looking forward to someone do a PP anamorphic flare effect,the ones in the bathtub were normal lens flares,but i realize that's not an easy thing to recreate,so fingers crossed...>___>
  • imbueFX
    Offline / Send Message
    imbueFX polycounter lvl 5
    Great guys, I'll make sure to follow through and make those in the near future.
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    I'm interested in how you would tackle the 'add up' of the processes. I mean a simple sideway kernal blur for the flare is the way to go, but what happens if you have the a Filmic Tone, Vignette and fake HDR for the PP, not to mention the texture screen distortion?

    Interesting challenge, if you tackle it my good sir!
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    Hate to bring back an older thread, but I just wanted to post my result. I've been really busy with classes and I finally got around to messing with the flare again for my project. Still need to fix the flare and the tiling of the dirt, but it reacts to light and fades away based on how the camera is looking at the light. Super happy with this already just because of that. Thanks guys!

    1jb145.jpg
  • imbueFX
    Offline / Send Message
    imbueFX polycounter lvl 5
    Sweet! Excellent progress.
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    Nice,although to be honest that texture looks a bit crowded to me,but that's just a matter of creating/finding the right texture,i also managed to create the effect thanks to this thread and the bathhouse assets,still very eagerly waiting for a PP anamorphic flare solution though...
  • leleuxart
    Offline / Send Message
    leleuxart polycounter lvl 10
    Minato wrote: »
    Nice,although to be honest that texture looks a bit crowded to me,but that's just a matter of creating/finding the right texture,i also managed to create the effect thanks to this thread and the bathhouse assets,still very eagerly waiting for a PP anamorphic flare solution though...

    Yeah, I agree. At the time of the screenshot, the image was tiling too much and was a little too opaque. It's not as cluttered now and it's a lot more transparent, especially around the edges. :)
  • Drew++
    Offline / Send Message
    Drew++ polycounter lvl 14
    The way I've done this before is by taking the luminance of an image and either applying a box blur, Gaussian blur, or some other kind of blur, then a threshold for brightness, then doing a lerp between 0.0, the lens flare/luminance image, and the lens speckle/dirt texture. It's best to use it at 1/4 size though. Sometimes I will also add another 'flare' after the first but with inverted UV's to get that lens look. Here's one I did a while back in a shader editor for the Source engine, using a anamorphic style flare:
    [ame="http://www.youtube.com/watch?v=8oWclYuKTk8"]Lens Flare Post Process - Source Shader Editor - YouTube[/ame]



    If you want to get complicated with custom HLSL code you can do this or something like it. Basically it scales the image from the center of the screen a few times, with a specified distance between each sample.

    int SAMPLES = 8; // number of flares that will appear on screen
    
    float seperation = 0.25; // spacing or 'seperation' between each flare
    
    float2 center = float2(0.5, 0.5); // center of the screen.
    
    float2 flareVec = (center - texCoords) * seperation; // our new flare vector 
    
    float3 finalColor = float3(0.0, 0.0, 0.0);
    
    for (int i = 0; i < SAMPLES; ++i) 
    {
        float2 offset = flareVec * float(i);
        finalColor += tex2D(screenTexture, texCoords + offset).rgb;
    }
    
    // divide by the number of samples.
    finalColor /= float(SAMPLES);
    
    Another way, which is what I think Battlefield 3 does, is stores the sprites of the lights, or the lights into a RT or texture, perhaps transparent objects... then uses that.
    -But before adding it to the screen it downsamples the texture to 1/2 size, or 1/4 size for performance, then they blur it.

    Perhaps the easiest way is to just use the luminance of the image as the flare, then do a simple lerp like I stated above.

    Hope this helps? :P
  • imbueFX
    Offline / Send Message
    imbueFX polycounter lvl 5
    The luminance approach is very intriguing, plus keeps all the math just in the scene texture and is independent of lights. Thanks for sharing!

    I don't know of a quick way to down-res the buffer before going to the scene texture sample inside of UDK without doing it in code (which I also don't know as well). But I suppose for the sake learning, down-resing isn't a critical step.
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    Hey hey...super bump time,so last night i asked Money how he achieved those Anamorphic Bloom(at the time i thought they were ScreenSpace Anamorphic Blooms) in his image on the first page of this thread,and while it turned out they were normal LensFlares he,again,explained it so thoroughly that i decided to quote him here for anyone who'd like to know how those sorts of things are done:
    Money wrote:
    It's how I've seen Epic does it, same goes for Bioware in Mass Effect games and many others. Essentially all they do is create a sphere mask in the material, then add it as an element in Lens Flare editor, and stretch that mask horizontally or vertically by using Size value (for example, setting X size to 2, Y to 0.2 gives horizontal streak etc).

    I took that material from the bathroom scene and cleaned it up to leave only sphere mask. So that bottom part only generates sphere mask, which gets multiplied to that upper group containing vertex color node with param called "C". After you've created MIC from the material, then you can change color of the element by using "C" parameter. Then I just took one of his flares and deleted all the elements, added new one and assigned newly created MIC to it (I changed that white color to some blueish). You can also change the color in the lens flare editor itself if you want. Here you can see I used 1.5 for X and 0.05 for Y, with 0.4 for alpha transparency.

    44eyov.jpg

    Only thing now is to add that flare in the editor and tweak it in game to the size you want. Don't forget to check in Game mode so you would know how it will look in game. One note also, when you change the values don't forget to check that button "reset in editor" (yellow icon with loop sign in it)

    5sj9uh.jpg

    This is for example one of the settings, all you do now is play with it how you want. Here's one I've seen on several lens flares in ME3 where they used 3 elements, one central that gets duplicated 2 times and just offseted along Y axis.

    Also you'll see they always use one sphere mask to create subtle bloom effect around the flare by toning don't alpha value (you can see blue "bloom" encompassing all 3 horizontal streaks) .

    6f3a9e.jpg

    So it really boils down to 3 things:
    - create sphere mask material
    - create MIC from it and color the flare
    - add it as an element in lens flare editor, then just tweak Size X and Y until you're satisfied. You can also offset it (vertically using Y value or example), affect translucency (using alpha value), and a few more things.

    Now,for those who are interested in a PostProcess Anamorphic Bloom effect,you can follow this thread over at Epic Forums,it's Dralex's thread about his quest to get it working(which he does),and hopefully he'll let us know a bit more about the process:
    http://forums.epicgames.com/threads/782846-My-Anamorphic-Quest
  • underfox
    Offline / Send Message
    underfox polycounter lvl 7
    thanks a lot for that minato, great information.

    still i am studying the bath scene of jordan walkker to see if i can understand how he used his dusty lens effect affected by light but i can't manage to understand how he does. i found the texture he used on the screen, but when i search fr any material using this texture, it doesn't find any material. how does he apply it to his camera without having any material made with this texture?
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    Hey underfox,he does use the dirt(T_ScreenDirt) texture in his Glar_Master material,which he in turn instantiates into different colors representing different lights which in turn are used in his LensFlares throughout the scene,visible as a fix position texture over the screen with a radial mask whenever you look into the lights...and the thing that makes that fixed-position behavior possible as far as i know is the ScreenPos node...tbh,i don't completely understand how that node works,so maybe someone with a bit more knowledge can elaborate...^^
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    An a Post-Process way to do would be.

    -Vignette Mask the screen
    -Inner area will have the effect
    -Take Luminance of the Scene
    -Pow and Mul to have control over Brightness and Contrast values
    -Use a Box Blur and blur the texture sideways (left and right only)
    -???
    -Profit

    The only issue is the amount of steps needed for the Blur. You might end up pushing over 10 steps of you want it look good. You could also jitter the effect with a rainbow gradient mask maybe? Since usually streaking lights bleed out the Primary colors at eye value, but not camera value, this effect is especially apparent with hot lights at night when driving.
  • Minato
    Offline / Send Message
    Minato polycounter lvl 5
    Damn dem samplings man...damn dem samplings...
Sign In or Register to comment.