Wanting to use bump offset parallax combined with a refraction effect

I posted this as a question on the Answer Hub but it may be more complex of a discussion than that’s suited for.

I’m wanting to create a material like the one used in the “Showdown” demo shop windows but with an added refraction effect on the “window” that distorts the parallax background (like water droplets).

Here’s a short video of the Showdown VR Demo parallax material I’m talking about.

The “Showdown” demo uses Bump Offset to shift the texture(s) as your perspective changes and I’ve gotten that part to work just fine. However, I’m not sure what to do to the material to have droplets or ridged glass that further distorted the already distorted parallax background texture.

Here’s some example images showing the effect I’m after:


Or like the window is made out of a ridged glass defined by a normal map or height map.


8f02bc8b3d18e0dde52390e597f54c096fdc4bd5.jpeg

My guess is perhaps another bump offset node at plane zero with a height-map defining the glass distortion that further modifies the uvs coming out of the parallax bump offset node?

Take your parallax uv and add a normalmap’s RG channels multiplied by a small number to it, that should do what you want without wrecking the parallax.

+1. The only thing you may want to do for polish is use fresnel to alter the amount of refraction so that it is less when looking straight at the surface. That would help make up for the fact that you wouldn’t be using a correct view space normal (probably not worth doing).

If you wanted the full math you could look into snell’s law, but even in the ue4 code version of refraction, the amount of refraction is pretty much an approximation. To have correct refraction would require raytracing through the scene depth to find the right intersection value based on the angle of refraction.

Since you are just simulating refraction for a single plane value, the scalar that you choose as the strength would kind of encode the distance to the surface and the refractive index of the material into one number, but it should give good results.

Thank you very much, Legend! Your suggestion worked great!

It looks great in motion and completely 3D with a VR headset on. :slight_smile:

See my response to Ryan below for screenshot.

Hi, Ryan. Could you give me some additional info on where I would work that fresnel node in? Here is my material so far with a real life reference image. Sort of looking through a light house lens. With Legend286s suggestion I was able to get really close to the effect I was after, but if it can be improved even more with fresnel that’d be great!

A few things to point out. I’m using this on a deferred decal which I why I’m using BumpOffsetAdvanced node instead of the normal one which doesn’t seem to work with decals. The texture being sampled near the center of the graph is just something that represents the light “glow” something you might use for a particle texture like this…

feather-1.0.png

At the bottom you are multiplying your normal map by constant 0.3 before subtracting from the UVs.

Basically you could use fresnel there, and use the fresnel as the alpha input to a “Linear Interpolate” node. Then make both A and B scalar parameters. Default them both to 0.3 like you have now, then try tweaking them so there is more refraction at glancing angles. I think you will need B to be a bit higher than A.