Forward Rendering Distortion Effect

Question

(example of effect i am trying to render)

Rendering Transparent Object in forward rendering is far easier. However I am having an issue when it comes to transparent glass like object that applies post processing like effect when seen through it.

I do know how to render "glass" that reflects "skybox" however I do not know how to render a glass like object that applies its distortion effect around its dynamic surroundings.

I need help figuring out how to render this effect.

Answer 1

An effect like that is most likely done as a second pass, after storing a copy of the color buffer.

When looking carefully, you can see some of the vertices from the shape of the effect above the character. So this scene in particular probably does something like this:

1. First render the scene into a color buffer, without the distortion effect.
2. Because it's not possible to both read from and write to a same frame buffer at the same time, copy it as is (blit) into another frame buffer. From now on, new draws will go into that new frame buffer.
3. In the new frame buffer, draw a mesh with the shape of the effect, using a shader that will fetch the texture of the first color buffer, with an offset depending on the normal. Also note that:
   • The mesh is opaque (no blending): it's the texture that makes it look transparent.
   • Although we don't see this in the screenshot, it's also perfectly possible to use the depth buffer as usual and have the effect intersect with the scene.

Finally a simpler effect, like rain drops on the screen, could be done this way:

1. First render the scene into a frame buffer, without the distortion effect.
2. Copy the entire frame buffer into another frame buffer using a custom shader. The shader will apply some offset to the texture coordinates (either directly or maybe using a distortion texture), thus distorting the image.