Home Unreal Engine

Diffuse Refraction material ala frosted glass

greentooth
Offline / Send Message
marks greentooth
I've spent a few hours hammering through the UDK material docs now, and I'm still no closer to an actual solution to this. What I want, is a translucent material which renders everything behind it blurred (as if you had put a blur filter on it in photoshop, for example).

Basically, I want to make this:
Frosted_02.jpg
800px-FrostedGlassWindow.JPG

And I cannot work out for the life of me how to even begin to go about achieving the blur on the viewed-through-glass objects. If anybody has any tips or pointers about where to start I'd really appreciate it!

Replies

  • tharle
    Options
    Offline / Send Message
    tharle polycounter lvl 9
    http://www.polycount.com/forum/showthread.php?t=75437

    some combination of the above realtime blur material, a scene capture actor and some noise plugged into the distortion of a slightly transparent material might do it.

    would be bloody expensive though. i presume you're planning on having something affect the material in realtime so you can't just use a texture? like a person walking past the window etc?

    it may be possible to use a very low res scene capture since you're going to blur it anyway which would save memory but not instructions. is this for a portfolio piece or for an actual game? apart from that i think you'd have to get into writing custom nodes.

    hope that helps
  • marks
    Options
    Offline / Send Message
    marks greentooth
    Yeah I did look into that realtime blur, it looks like it will blur only the textures on the material though - not whats rendered through it. This will be for an actual game, seems like such a simple thing to be so hard/expensive heh.
  • Ace-Angel
    Options
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    Did you play around with the Distortion node?
  • marks
    Options
    Offline / Send Message
    marks greentooth
    I did, it seems to only be good for a kind of stippled surface type rather than a flat smooth surface. It also doesn't blur the objects behind it.
  • PolyHertz
    Options
    Offline / Send Message
    PolyHertz polycount lvl 666
  • marks
    Options
    Offline / Send Message
    marks greentooth
    Checked through that already, some useful techniques I'll probably use but no dice regarding the blur effect.
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    so this isn't exactly what you asked for, but its on the right road.

    Also thanks to pondering this I finally found a decent way to blur a cube map. :) Thanks.

    BlurryCubemap3.jpg

    The blur quality could be increased by changing how the blocks are interpolated, at the expense of more operations. Current shader is 120 instructions, so not terrible, and not super light either.

    edit: one more.. just added in a control for how much of the normal map gets taken into account
    GlassCube.jpg
  • marks
    Options
    Offline / Send Message
    marks greentooth
    Looks pretty close to what I'm after! Camera is likely to be quite far from the material so blur quality isnt tooooo important. Did you use an inverted cubemap for the diffuse, and blurred via the method linked earlier?
  • rasmus
    Options
    Offline / Send Message
    Haha, damn you Vailias, I was just about to post my findings :) I'll do it anyway, but what you have looks very promising - awaiting details.

    What I did was to use the SceneTex as texture lookup with Virtuosics example, but I couldn't get it to map to screenspace due to my usual very limited math muscles (do fill me in!), which seems to me should do the trick on flat-window surfaces atleast. No normals though, just blur:

    SceneTexBlurring.gif
  • sprunghunt
    Options
    Offline / Send Message
    sprunghunt polycounter
    rasmus wrote: »
    but I couldn't get it to map to screenspace due to my usual very limited math muscles

    To do this you can just use a screenpos node as UV's

    I have an example of that in this shader: (top right of image)
    http://www.flickr.com/photos/sprunghunt/5177430382/
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    .. full explanation coming later tonight.

    Rasmus: Thanks man! you totally inspired me to make another approach at this. My earlier example is using a realtime cubemap, again, explaining later tonight.

    Here's the new version and its shader network. Can definitely use refinement, but I'm outa time right now.

    Glass_2.jpg
    Glass_2_Network.jpg
  • Ace-Angel
    Options
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    Awesome Vailias! You is the Guru mate!
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    Alright I have a video uploading to explain the overall ideas that went into this material and its execution.. and video just shows the effect better.

    I also refined the refracting glass a bit, as I had made an error in one part. Not serious, but it makes a difference.

    here's a new screenshot
    GlassBlocks.jpg


    I'll give a short detail of how this is done now: and get the shader network labeled and captured for upload a little later.

    When Marks posted the goal look of the material, I noticed that the nature of the effect was very close to the transmitted contents being mosaiced at different block sizes, along with some smoothing. Realworld wise this is small scale changes in refraction due to surface faceting.
    I thought of how cubemaps work by projecting a vector from the center of a cube to its faces, and returning the color of a texel hit by that ray. Normally you reflect into them, but if you just pass the camera vector you get what amounts to transmission. Simple refraction can be achieved by altering the camera vector before it is used in the cube map.

    So to facet or mosaic something I figured you just need to pass the same vector for multiple samples. With infinite vectors to choose from this could be hard, but since we're dealing with the space of a cubemap, only unit vectors are valid, which makes life much easier. Numerically, you can get discrete steps from a continuum by multiplying by the number of steps you want, then rounding down the product to the nearest integer. To get it back to the same start and end points you divide the product by the number of steps you originally multiplied by.

    This works for 2d and for 3d. 2d you can do it with texcoords, 3d you do it with spacial vectors.

    I added a step to attempt some smoothing, by linearly interpolating between different scales of steps, so you get sub-blocks per full block. And now I remember I was going to do that differently at first, but my first attempt was flawed because I did it wrong. :) I have an idea that I might be able to smooth out the blocks.. if it works I'll post it here too.

    In my first post the real magic happened when I tossed in a normal map to perturb the surface normal. Combining a semi-random surface normal with the texture chunking gave a nice blurry glass look.

    The other glass type effects, like color, varying opacity, external reflection, etc, all added to the look, and took more time than just setting up the mosaic blur.

    Will edit in the morning with the video and probably some shader refinements.
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    Alrighty sorry for the delay, here's the video.

    [ame]http://www.youtube.com/watch?v=mYgh3VKF-7U&hd=1[/ame]

    and the shader network.

    click for full size
    RefractiveGlass_ShaderNetwork_T.jpg
  • rasmus
    Options
    Offline / Send Message
    I understand your thinking behind the blocks, but aesthetically the effect looks too much like plain pixellation to me, I think that's what's bothering me a bit about the results. I think if I was going for a mosaic effect I'd go for a straight up, smoother-looking blur as a base and do any blockiness with a distortion map like below - but then again I'm stuck on my 2d planes :) Ofcourse the trouble too with a screenbuffer solution is that anything in front of the window will get a slight blur-halo... Thanks as always Vailias for thinking and sharing.

    SceneTexBlurring_02.gif
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    @Rasmus: yes that is definitely a drawback of the current solutions. I'm thinking about the color blending and may take another crack at an efficient blur method. Would work wonderously on the screenbuffer version.

    I do find, however, that adding in a distortion like normal map to the overall chain with the mosaic effect really gets some nice effects. I altered the screenbuffer version to include a scaleable normal map to use both in its chunking effects and in the sort of front frosting effect. The normal map does a lot of the work, but the pixelation helps break up the background into large bits of color for the normal map to distort.
    I played around a bit on the VCTF map included since the foliage demo map is too hardcore for my current hardware.
    Here's a few shots. From and angle and up close. EDIT: Oh, btw the big black uglyness in the upclose shot is thanks to some odd post process thing happening in the editor. There are some edges of the screen that have this subtle black fade on them, and when they hit the screenbuffer chunking effect they get chunked too. :(
    ScreenbufferGlass_UpClose.jpg
    Showing different transmission attribute settings. (kinda cool lookin)
    ScreenbufferGlass_Transmission1.jpg
    ScreenbufferGlass_Transmission2.jpg

    One very noticeable artifact on these is the block size is in screenspace, so the chunking gets visibly larger as you get further from the object. Could modulate the block size with scene depth perhaps to get a more consistent look no matter how far away you are from the glass surface.
    Anyway, Marks, or anyone else, if you want the node structures for this or anything else I can make up a udk package and post it to dropbox for easy reference
  • marks
    Options
    Offline / Send Message
    marks greentooth
    If you wouldn't mind packing up a upk, that would be fantastic. Definitely good reference :) thanks!
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    FramebufferGlass_2.jpg


    So I remembered how I thought of doing the block blending the first time and fixed up the framebuffer shader to be less pixelated. Turns out I've been re-inventing my way toward the ever so standard bilinear filtering algorithm... One the one hand, its nice to know that I CAN re-invent wheels.. on the other its a bit of a "duh" moment that I wasn't able to make the abstract jump to known algorithms from where I was at.

    Also there is a video to show it in motion:

    [ame]http://www.youtube.com/watch?v=yqFU5I9QR68[/ame]

    and the package of materials, including a few I've made up before, but aren't relevant to this thread can be found here (13mb rar archive)
  • Oniram
    Options
    Offline / Send Message
    Oniram polycounter lvl 16
    haha i like the old and busted/new hotness in the image.. reminds me of MIB2. thanks for the update on this. havent checked into yet but im downloading it now. :D
  • Vailias
    Options
    Offline / Send Message
    Vailias polycounter lvl 18
    So since I realized that I was trending toward bilinear filtering on the chunking part of the shader, I implemented actual bilinear filtering between neighboring texture blocks tonight.
    ScreenbufferGlass_Transmission3.jpg

    I haven't updated the package, but the unreal object text can be downloaded here.

    Edit: Upper bit has block size 128, lower has 64

    Just import it into udk and it will create the material for you, though you'll need to re-link the normal map in the shader.
  • rasmus
    Options
    Offline / Send Message
    Oh man, now that's nice :)
  • [Deleted User]
    Options
    Offline / Send Message
    [Deleted User] insane polycounter
    The user and all related content has been deleted.
  • ambershee
    Options
    Offline / Send Message
    ambershee polycounter lvl 17
    This looks awesome - thanks for sharing. Glass effects can sometimes be really hard to pull off. I'll update this thread if I make any adjustments of my own :)
  • Donny V
    Options
    Offline / Send Message
    I'm a little confused. Where exactly do you set up your cubemapreflectactor in relation to the mesh you're using as glass?
  • Ace-Angel
    Options
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    You don't? He's using a SceneTexture.
Sign In or Register to comment.