Announcement

Collapse
No announcement yet.

So Blurred glass material is impossible in Unreal Engine 4?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    So Blurred glass material is impossible in Unreal Engine 4?

    EDIT:

    From this thread, I started to work on various glass and mirror materials.
    If you're interested in what's going on, you can check these 2 posts:
    https://forums.unrealengine.com/show...reflecting-etc
    https://forums.unrealengine.com/show...-Mirror-shader

    Cheers.
    Ed

    ------------------------------


    Hi,
    I searched a way to make a blurred glass material with UE4, I mean a glass material which is blurring all that's behind it.
    So I DON'T MEAN FROSTED GLASS, which can be more or less be done, as shown in this thread: https://forums.unrealengine.com/show...hlight=FROSTED
    I mean regular, smooth blurring, like with a gaussian blur filter in Photoshop and changing in real time.

    I didn't find any tutorial about this on the web.
    I searched in Epic documentation but found nothing really useful for this.
    So, is it something the engine can't do for the moment or did I (certainly) miss something? When I see all the incredible materials and visual effects you can achieve with UE4,
    I have no reason to think that this particular effect couldn't be done.
    Last edited by EdWasHere; 02-07-2016, 09:11 PM.
    GLASSES & WATER SHADERS & CUSTOM PLANAR REFLECTIONS on my Youtube Channel: https://www.youtube.com/channel/UCP2...26Y2bEV4kfl9kA

    #2
    It can be done but requires looking up several copies of the SceneColor node and offsetting them and then averaging them. This technique is a bit slow though. It is probably possible to do something better in code like use one of the downresed buffers for bloom. I asked BrianK about this and the reason it isn't done already is that the bloom buffers are from the previous frame and have to be reprojected with camera movement. This means when there is a camera cut there will be no information for one frame. And when rotating the camera quickly you would see weird behavior on the edge of the screen that revealed new parts of the blurred image. I wouldn't expect an epic solution to this anytime soon as a result of these issues but maybe one day.
    Ryan Brucks
    Principal Technical Artist, Epic Games

    Comment


      #3
      OK. Thanks for these explanations.
      Searching through the post process effects documentation, i wondered if you could find a way to make something like a "limited" gaussian DOF post process effect.
      I mean: not applying the effect all over the screen but only on the part of the screen where the glass is visible, using an opacity mask recalculated every frame.
      Is it currently undoable or could it be implemented?
      Last edited by EdWasHere; 07-02-2015, 03:22 AM.
      GLASSES & WATER SHADERS & CUSTOM PLANAR REFLECTIONS on my Youtube Channel: https://www.youtube.com/channel/UCP2...26Y2bEV4kfl9kA

      Comment


        #4
        You could achieve such an optimized result by using a sprite that is of the same size as the bounding box of the mesh you want to use the blur. Jon Lindquist used a technique like this on fortnite to layer specific effects on various characters using the post process system. Using that method, only the pixels in the sprite are processed.
        Ryan Brucks
        Principal Technical Artist, Epic Games

        Comment


          #5
          Great, thanks again ! I'll experiment in this way.
          GLASSES & WATER SHADERS & CUSTOM PLANAR REFLECTIONS on my Youtube Channel: https://www.youtube.com/channel/UCP2...26Y2bEV4kfl9kA

          Comment


            #6
            Coincidentally last "Epic Friday" I messed around with doing a radial style blur custom node. It only took 2 line changes to make it work with SceneColor like you want.

            I added a distance mask as well so you can have the blur get slightly less as objects get closer to the glass.

            This is probably not very optimized, I just barely got TempAA dithering working on it but the settings are very fiddly to fix the specular artifacts.

            Click image for larger version

Name:	SceneBlur.JPG
Views:	1
Size:	40.7 KB
ID:	1076470

            It requires that you hook up the SceneColor node somewhere in opacity otherwise the compiler won't recognize the texture.

            The material graph:
            Click image for larger version

Name:	SceneBlur_Mat.JPG
Views:	1
Size:	98.3 KB
ID:	1076471

            The hlsl code for the custom material node:

            float3 CurColor;
            float2 BaseUV = MaterialFloat2(ScreenAlignedPosition(Parameters.ScreenPosition).xy);
            float2 NewUV = BaseUV;
            int i;
            float StepSize = Distance / (int) DistanceSteps;
            float CurDistance;
            float2 CurOffset;
            float TwoPi = 6.283185;
            float Substep;
            float2 ScenePixels = View.RenderTargetSize*BaseUV;
            float2 RandomSamp = View.TemporalAAParams.r+ScenePixels;
            RandomSamp = ((uint)(RandomSamp.x) + 2 * (uint)(RandomSamp.y)) % 5;
            RandomSamp*=TempAARandom;
            if (DistanceSteps<1)
            {
            return DecodeSceneColorForMaterialNode(NewUV);
            }
            else
            {
            while ( i < (int) DistanceSteps)
            {

            CurDistance += StepSize;
            for (int j = 0; j < (int) RadialSteps; j++)
            {
            Substep++;
            CurOffset.x = cos(TwoPi*((RandomSamp+Substep) / RadialSteps));
            CurOffset.y = sin(TwoPi*((RandomSamp+Substep) / RadialSteps));
            CurOffset *=DistanceMask;
            NewUV.x = BaseUV.x + (CurOffset.x * (CurDistance+RandomSamp*StepSize));
            NewUV.y = BaseUV.y + (CurOffset.y * (CurDistance+RandomSamp*StepSize));
            CurColor += DecodeSceneColorForMaterialNode(NewUV);
            }
            Substep+=0;
            i++;
            }
            CurColor = CurColor / ((int)DistanceSteps*(int)RadialSteps);
            return CurColor;
            }
            Ryan Brucks
            Principal Technical Artist, Epic Games

            Comment


              #7
              With the TempAARandom set to 0 you can see some cool artifacts in specular highlights using various values of "Radial Steps"

              3 radial steps:


              3.1 Radial steps causes a spiral instead:


              3.3 Radial steps causes a sort of fibonacci spiral:


              The tempAA random fixes some of this up but not all of it without using tons of samples.

              I think there is way better way of using TempAA here this was just an experiment.
              Ryan Brucks
              Principal Technical Artist, Epic Games

              Comment


                #8
                That's so cool! Blows my mind what can be done in realtime these days.
                Trevor Lee

                Comment


                  #9
                  turns out the tempAA dither thing really needs the dither texture in addition to the math pattern offset. Makes the spec patterns much smoother except at very far distances.

                  I would have just used the DitherTemporalAA material node but for some reason plugging it in consistently caused a crash so I basically had to put all the code from that function into here.

                  float3 CurColor;
                  float2 BaseUV = MaterialFloat2(ScreenAlignedPosition(Parameters.ScreenPosition).xy);
                  float2 NewUV = BaseUV;
                  float StepSize = Distance / (int) DistanceSteps;
                  float CurDistance;
                  float2 CurOffset;
                  float TwoPi = 6.283185;
                  float Substep;
                  float2 ScenePixels=View.RenderTargetSize*BaseUV;
                  ScenePixels+=View.TemporalAAParams.r;
                  float2 RandomSamp = ((uint)(ScenePixels.x) + 2 * (uint)(ScenePixels.y)) % 5;
                  RandomSamp+=TempAARandom+Texture2DSample(Tex,TexSampler,ScenePixels);
                  RandomSamp/=6;
                  RandomSamp-=0.5;
                  RandomSamp*=TempAARandom;


                  int i;
                  if (DistanceSteps<1)
                  {
                  return DecodeSceneColorForMaterialNode(NewUV);
                  }
                  else
                  {
                  while ( i < (int) DistanceSteps)
                  {

                  CurDistance += StepSize;
                  for (int j = 0; j < (int) RadialSteps; j++)
                  {
                  Substep++;
                  CurOffset.x = cos(TwoPi*((RandomSamp+Substep) / RadialSteps));
                  CurOffset.y = sin(TwoPi*((RandomSamp+Substep) / RadialSteps));
                  CurOffset *=DistanceMask;
                  NewUV.x = BaseUV.x + (CurOffset.x * (CurDistance));
                  NewUV.y = BaseUV.y + (CurOffset.y * (CurDistance));
                  CurColor += DecodeSceneColorForMaterialNode(NewUV);
                  }
                  Substep+=0.618;
                  i++;
                  }
                  CurColor = CurColor / ((int)DistanceSteps*(int)RadialSteps);
                  return CurColor;
                  }
                  Click image for larger version

Name:	SceneBlur_Mat2.JPG
Views:	1
Size:	45.8 KB
ID:	1076472
                  Ryan Brucks
                  Principal Technical Artist, Epic Games

                  Comment


                    #10
                    Hi there - i didn't understand which file (and file format) i must edit or create to put these HLSL code to it? And in which directory it must be stored?

                    Comment


                      #11
                      Originally posted by Jandar-man View Post
                      Hi there - i didn't understand which file (and file format) i must edit or create to put these HLSL code to it? And in which directory it must be stored?
                      You have to add a "Custom" node, and paste the HLSL code there (and add the appropriate inputs).

                      Comment


                        #12
                        I reproduced your material graph and pasted the second code in the custom node.
                        I checked it multiples times but I can't get it to work.
                        Can't figure out what the problem is.
                        Do you apply this material to a plane, a cube or a sprite? Does it matter?
                        Are there important settings you didn't indicate?

                        Othewise: no doubt using a shader is the way to achieve this blurring effect but I have no skills to do it.
                        So I tried to achieve my limited gaussian blur DOF effect in a post process material as a first step.
                        Quite simple, in fact. Here is the graph, if it can be useful to someone:

                        Click image for larger version

Name:	Limited_Gaussian_DOF_Graph.jpg
Views:	1
Size:	46.7 KB
ID:	1076518

                        And the texture I used as a mask in the material:

                        Click image for larger version

Name:	Screen_Mask.jpg
Views:	1
Size:	9.0 KB
ID:	1076519

                        And here is what i get in game:

                        Click image for larger version

Name:	Blurring_Window.jpg
Views:	1
Size:	58.5 KB
ID:	1076520
                        Attached Files
                        Last edited by EdWasHere; 07-02-2015, 03:24 AM.
                        GLASSES & WATER SHADERS & CUSTOM PLANAR REFLECTIONS on my Youtube Channel: https://www.youtube.com/channel/UCP2...26Y2bEV4kfl9kA

                        Comment


                          #13
                          Nice setup

                          You could try using CustomDepth to create masks for the objects in your scene to use.

                          In terms of why the other approach didnt work, did you have scenecolor hooked up to opacity somewhere? You also need to make sure that the values for Distance, Distance Steps and Radial Steps are all above 1 or nothing happens. Also just set DistanceMask to 1 to rule that out.
                          Ryan Brucks
                          Principal Technical Artist, Epic Games

                          Comment


                            #14
                            Even with these tweaks, it doesn't work for me.
                            Wondering what I'm missing here.
                            What was the map you tested it on?
                            Does it work for someone else?
                            Last edited by EdWasHere; 05-16-2015, 11:07 PM.
                            GLASSES & WATER SHADERS & CUSTOM PLANAR REFLECTIONS on my Youtube Channel: https://www.youtube.com/channel/UCP2...26Y2bEV4kfl9kA

                            Comment


                              #15
                              I tried your setup as well and for some reason the DOF blur shows up even when I just plug in the straight "SceneTexture:SceneColor" sample or PostProcessInput0. Were you just defining DOF in a post process volume or was there something else going on?

                              In terms of why the custom node didn't work, is what ue4 version are you in? What did the output of the node give? Any errors? A pic of the material graph would be useful.
                              Ryan Brucks
                              Principal Technical Artist, Epic Games

                              Comment

                              Working...
                              X