LearnOpenGL

Postprocessing.html (11340B)

---

     <h1 id="content-title">Postprocessing</h1>
 <h1 id="content-url" style='display:none;'>In-Practice/2D-Game/Postprocessing</h1>
 <p>
   Wouldn't it be fun if we could completely spice up the visuals of the Breakout game with just a few postprocessing effects? We could create a blurry shake effect, inverse all the colors of the scene, do crazy vertex movement, and/or make use of other interesting effects with relative ease thanks to OpenGL's framebuffers.
 </p>
 
 <note>
   This chapters makes extensive use of concepts from the <a href="https://learnopengl.com/Advanced-OpenGL/Framebuffers" target="_blank">framebuffers</a> and <a href="https://learnopengl.com!Advanced-OpenGL/Anti-Aliasing" target="_blank">anti-aliasing</a> chapters. 
 </note>
 
 <p>
   In the framebuffers chapter we demonstrated how we could use postprocessing to achieve interesting effects using just a single texture. In Breakout we're going to do something similar: we're going to create a framebuffer object with a multisampled renderbuffer object attached as its color attachment. All the game's render code should render to this multisampled framebuffer that then blits its content to a different framebuffer with a texture attachment as its color buffer. This texture contains the rendered anti-aliased image of the game that we'll render to a full-screen 2D quad with zero or more postprocessing effects applied. 
 </p>
 
 <p>
   So to summarize, the rendering steps are:
 </p>
 
 <ol>
   <li>Bind to multisampled framebuffer.</li>
   <li>Render game as normal.</li>
   <li>Blit multisampled framebuffer to normal framebuffer with texture attachment.</li>
   <li>Unbind framebuffer (use default framebuffer).</li>
   <li>Use color buffer texture from normal framebuffer in postprocessing shader.</li>
   <li>Render quad of screen-size as output of postprocessing shader.</li>  
 </ol>
 
 <p>
   The postprocessing shader allows for three type of effects: shake, confuse, and chaos.
 </p>
 
 <ul>
   <li><strong>shake</strong>: slightly shakes the scene with a small blur.</li>
   <li><strong>confuse</strong>: inverses the colors of the scene, but also the <code>x</code> and <code>y</code> axis.</li>
   <li><strong>chaos</strong>: makes use of an edge detection kernel to create interesting visuals and also moves the textured image in a circular fashion for an interesting <em>chaotic</em> effect.</li>
 </ul>
 
 
 <p>
   Below is a glimpse of what these effects are going to look like:
 </p>
 
 <img src="/img/in-practice/breakout/postprocessing_effects.png" alt="Postprocessing effects in OpenGL Breakout game"/>
 
 <p>
   Operating on a 2D quad, the vertex shader looks as follows:
 </p>
 
 <pre><code>
 #version 330 core
 layout (location = 0) in vec4 vertex; // &lt;vec2 position, vec2 texCoords&gt;
 
 out vec2 TexCoords;
 
 uniform bool  chaos;
 uniform bool  confuse;
 uniform bool  shake;
 uniform float time;
 
 void main()
 {
     gl_Position = vec4(vertex.xy, 0.0f, 1.0f); 
     vec2 texture = vertex.zw;
     if (chaos)
     {
         float strength = 0.3;
         vec2 pos = vec2(texture.x + sin(time) * strength, texture.y + cos(time) * strength);        
         TexCoords = pos;
     }
     else if (confuse)
     {
         TexCoords = vec2(1.0 - texture.x, 1.0 - texture.y);
     }
     else
     {
         TexCoords = texture;
     }
     if (shake)
     {
         float strength = 0.01;
         gl_Position.x += cos(time * 10) * strength;        
         gl_Position.y += cos(time * 15) * strength;        
     }
 }  
 </code></pre>
   
 <p>
   Based on whatever uniform is set to <code>true</code>, the vertex shader takes different paths. If either <var>chaos</var> or <var>confuse</var> is set to <code>true</code>, the vertex shader will manipulate the texture coordinates to move the scene around (either translate texture coordinates in a circle-like fashion, or inverse them). Because we set the texture wrapping methods to <code>GL_REPEAT</code>, the chaos effect will cause the scene to repeat itself at various parts of the quad. Additionally if <var>shake</var> is set to <code>true</code>, it will move the vertex positions around by a small amount, as if the screen shakes. Note that <var>chaos</var> and <var>confuse</var> shouldn't be <code>true</code> at the same time while <var>shake</var> is able to work with any of the other effects on.
 </p>
 
 <p>
   In addition to offsetting the vertex positions or texture coordinates, we'd also like to create some visual change as soon as any of the effects are active. We can accomplish this within the fragment shader:
 </p>
 
 <pre><code>
 #version 330 core
 in  vec2  TexCoords;
 out vec4  color;
   
 uniform sampler2D scene;
 uniform vec2      offsets[9];
 uniform int       edge_kernel[9];
 uniform float     blur_kernel[9];
 
 uniform bool chaos;
 uniform bool confuse;
 uniform bool shake;
 
 void main()
 {
     color = vec4(0.0f);
     vec3 sample[9];
     // sample from texture offsets if using convolution matrix
     if(chaos || shake)
         for(int i = 0; i &lt; 9; i++)
             sample[i] = vec3(texture(scene, TexCoords.st + offsets[i]));
 
     // process effects
     if (chaos)
     {           
         for(int i = 0; i &lt; 9; i++)
             color += vec4(sample[i] * edge_kernel[i], 0.0f);
         color.a = 1.0f;
     }
     else if (confuse)
     {
         color = vec4(1.0 - texture(scene, TexCoords).rgb, 1.0);
     }
     else if (shake)
     {
         for(int i = 0; i &lt; 9; i++)
             color += vec4(sample[i] * blur_kernel[i], 0.0f);
         color.a = 1.0f;
     }
     else
     {
         color =  texture(scene, TexCoords);
     }
 }
 
 </code></pre>
 
 <p>
   This long shader almost directly builds upon the fragment shader from the framebuffers chapter and processes several postprocessing effects based on the effect type activated. This time though, the offset matrix and convolution kernels are defined as a uniform that we set from the OpenGL code. The advantage is that we only have to set this once, instead of recalculating these matrices each fragment shader run. For example, the <var>offsets</var> matrix is configured as follows:
 </p>
   
 <pre><code>
 float offset = 1.0f / 300.0f;
 float offsets[9][2] = {
     { -offset,  offset  },  // top-left
     {  0.0f,    offset  },  // top-center
     {  offset,  offset  },  // top-right
     { -offset,  0.0f    },  // center-left
     {  0.0f,    0.0f    },  // center-center
     {  offset,  0.0f    },  // center - right
     { -offset, -offset  },  // bottom-left
     {  0.0f,   -offset  },  // bottom-center
     {  offset, -offset  }   // bottom-right    
 };
 <function id='44'>glUniform</function>2fv(<function id='45'>glGetUniformLocation</function>(shader.ID, "offsets"), 9, (float*)offsets);  
 </code></pre>
 
 <p>
   Since all of the concepts of managing (multisampled) framebuffers were already extensively discussed in earlier chapters, I won't delve into the details this time. Below you'll find the code of a <fun>PostProcessor</fun> class that manages initialization, writing/reading the framebuffers, and rendering a screen quad. You should be able to understand the code if you understood the framebuffers and anti-aliasing chapter:
 </p>
 
 <ul>
   <li><strong>PostProcessor</strong>: <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/post_processor.h" target="_blank">header</a>, <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/post_processor.cpp" target="_blank">code</a>.</li>
 </ul>
 
 <p>
   What is interesting to note here are the <fun>BeginRender</fun> and <fun>EndRender</fun> functions. Since we have to render the entire game scene into the framebuffer we can conventiently call <fun>BeginRender()</fun> and <fun>EndRender()</fun> before and after the scene's rendering code respectively. The class will then handle the behind-the-scenes framebuffer operations. For example, using the <fun>PostProcessor</fun> class will look like this within the game's <fun>Render</fun> function:
 </p>
 
 <pre><code>
 PostProcessor   *Effects;
   
 void Game::Render()
 {
     if (this-&gt;State == GAME_ACTIVE)
     {
         Effects-&gt;BeginRender();
             // draw background
             // draw level
             // draw player
             // draw particles	
             // draw ball
         Effects-&gt;EndRender();
         Effects-&gt;Render(<function id='47'>glfwGetTime</function>());
     }
 }
 </code></pre>
 
 <p>
   Wherever we want, we can now conveniently set the required effect property of the postprocessing class to <code>true</code> and its effect will be immediately active.
 </p>
 
 <h3>Shake it</h3>
 <p>
   As a (practical) demonstration of these effects we'll emulate the visual impact of the ball when it hits a solid concrete block. By enabling the shake effect for a short period of time wherever a solid collision occurs, it'll look like the collision had a stronger impact.
 </p>
   
 <p>
    We want to enable the screen shake effect only over a small period of time. We can get this to work by creating a variable called <var>ShakeTime</var> that manages the duration the shake effect is supposed to be active. Wherever a solid collision occurs, we reset this variable to a specific duration:
 </p>
   
 <pre><code>
 float ShakeTime = 0.0f;  
 
 void Game::DoCollisions()
 {
     for (GameObject &box : this-&gt;Levels[this-&gt;Level].Bricks)
     {
         if (!box.Destroyed)
         {
             Collision collision = CheckCollision(*Ball, box);
             if (std::get&lt;0&gt;(collision)) // if collision is true
             {
                 // destroy block if not solid
                 if (!box.IsSolid)
                     box.Destroyed = true;
                 else
                 {   // if block is solid, enable shake effect
                     ShakeTime = 0.05f;
                     Effects-&gt;Shake = true;
                 }
                 [...]
             }
         }    
     }
     [...]
 }  
 </code></pre>
   
 <p>
   Then within the game's <fun>Update</fun> function, we decrease the <var>ShakeTime</var> variable until it's <code>0.0</code> after which we disable the shake effect:
 </p>
   
 <pre><code>
 void Game::Update(float dt)
 {
     [...]
     if (ShakeTime &gt; 0.0f)
     {
         ShakeTime -= dt;
         if (ShakeTime &lt;= 0.0f)
             Effects-&gt;Shake = false;
     }
 }  
 </code></pre>
   
 <p>
   Then each time we hit a solid block, the screen briefly starts to shake and blur, giving the player some visual feedback the ball collided with a solid object. 
 </p>
   
 <div class="video paused" onclick="ClickVideo(this)">
   <video width="600" height="450" loop>
     <source src="/video/in-practice/breakout/postprocessing_shake.mp4" type="video/mp4" />
     <img src="/img/in-practice/breakout/postprocessing_shake.png" class="clean"/>
   </video>
 </div>
   
 <p>
   You can find the updated source code of the game class <a href="/code_viewer_gh.php?code=src/7.in_practice/3.2d_game/0.full_source/progress/7.game.cpp" target="_blank">here</a>.
 </p>
   
 <p>
   In the <a href="https://learnopengl.com/In-Practice/2D-Game/Powerups" target="_blank">next</a> chapter about powerups we'll bring the other two postprocessing effects to good use.
 </p>       
 
     </div>
     
     <div id="hover">
         HI
     </div>
    <!-- 728x90/320x50 sticky footer -->
 <div id="waldo-tag-6196"></div>
 
    <div id="disqus_thread"></div>
 
     
 
 
 </div> <!-- container div -->
 
 
 </div> <!-- super container div -->
 </body>
 </html>