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

<p>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:</p>

<ol>
<li>First render the scene into a color buffer, without the distortion effect.</li>
<li>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.</li>
<li>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:

<ul>
<li>The mesh is opaque (no blending): it's the texture that makes it look transparent.</li>
<li>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.</li>
</ul></li>
</ol>

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

<ol>
<li>First render the scene into a frame buffer, without the distortion effect.</li>
<li>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.</li>
</ol>

CC BY-SA 3.0
2017-07-28T02:18:00.760Z
2017-07-28T02:18:00.760Z
Julien Guertault
<p><a href="https://i.sstatic.net/KGI2H.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/KGI2H.jpg" alt="enter image description here" /></a>
(example of effect i am trying to render)</p>
<p>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.</p>
<p>I do know how to render &quot;glass&quot; that reflects &quot;skybox&quot; however I do not know how to render a glass like object that applies its distortion effect around its dynamic surroundings.</p>
<p>I need help figuring out how to render this effect.</p>

CC BY-SA 3.0
2017-07-27T09:07:36.637Z
You probably need to use a separate pass to do this kind of effect.
Dan Hulme
<distortion>
Forward Rendering Distortion Effect
Blue Bug
# Forward Rendering Distortion Effect

(Asked by: username_0 on 2017-07-27)

[![enter image description here](https://i.sstatic.net/KGI2H.jpg)](https://i.sstatic.net/KGI2H.jpg)
(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.

**Tags:** distortion

> **Comments:**
> **username_1**: You probably need to use a separate pass to do this kind of effect.  

---

## 1 answers

### Answer by username_2 on 2017-07-28. Score: 3 | Accepted answer

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.


---

