LearnOpenGL

Weighted-Blended.html (28226B)

---

     <div id="content">
     <h1 id="content-title">Weighted Blended</h1>
 <h1 id="content-url" style='display:none;'>Guest-Articles/2020/OIT/Weighted-Blended</h1>
     <p>
         Weighted, Blended is an approximate order-independent transparency technique which was published in the <a href="http://jcgt.org/published/0002/02/09/">journal of computer graphics techniques</a> in 2013 by Morgan McGuire and Louis Bavoil at NVIDIA to address the transparency problem on a broad class of then gaming platforms.
     </p>
 
     <p>
         Their approach to avoid the cost of storing and sorting primitives or fragments is to alter the compositing operator so that it is order independent, thus allowing a pure streaming approach.
     </p>
 
     <p>
         Most games have ad-hoc and scene-dependent ways of working around transparent surface rendering limitations. These include limited sorting, additive-only blending, and hard-coded render and composite ordering. Most of these methods also break at some point during gameplay and create visual artifacts. One not-viable alternative is <a href="http://developer.download.nvidia.com/SDK/10/opengl/screenshots/samples/dual_depth_peeling.html" target="_blank">depth peeling</a>, which produces good images, but is too slow for scenes with many layers both in theory and practice.
     </p>
 
     <p>
         There are many <a href="https://en.wikipedia.org/wiki/Asymptotic_analysis" target="_blank">asymptotically</a> fast solutions for transparency rendering, such as bounded A-buffer approximations using programmable blending (e.g., <a href="http://software.intel.com/en-us/articles/multi-layer-alpha-blending">Marco Salvi's work</a>), stochastic transparency (as <a href="https://www.computer.org/csdl/journal/tg/2011/08/ttg2011081036/13rRUxBa55X" target="_blank">explained by Eric Enderton and others</a>), and ray tracing. One or more of these will probably dominate at some point, but all were impractical on the game platforms of five or six years ago, including PC DX11/GL4 GPUs, mobile devices with OpenGL ES 3.0 GPUs, and last-generation consoles like PlayStation 4.
     </p>
 
     <note>
         In mathematical analysis, asymptotic analysis, also known as asymptotics, is a method of describing limiting behavior.
     </note>
 
     <p>
         The below image is a transparent CAD view of a car engine rendered by this technique.
     </p>
 
 <img src="/img/guest/2020/oit/cad_view_of_an_engine.png" width="560" alt="A transparent CAD view of a car engine rendered by this technique.">
 
     <h2>Theory</h2>
 
     <p>
         This technique renders non-refractive, monochrome transmission through surfaces that themselves have color, without requiring sorting or new hardware features. In fact, it can be implemented with a simple shader for any GPU that supports blending to render targets with more than 8 bits per channel.
     </p>
 
     <p>
         It works best on GPUs with multiple render targets and floating-point texture, where it is faster than sorted transparency and avoids sorting artifacts and popping for particle systems. It also consumes less bandwidth than even a 4-deep RGBA8 K-buffer and allows mixing low-resolution particles with full-resolution surfaces such as glass.
     </p>
 
     <p>
         For the mixed resolution case, the peak memory cost remains that of the higher resolution render target but bandwidth cost falls based on the proportional of low-resolution surfaces.
     </p>
 
     <p>
         The basic idea of Weighted, Blended method is to compute the coverage of the background by transparent surfaces exactly, but to only approximate the light scattered towards the camera by the transparent surfaces themselves. The algorithm imposes a heuristic on inter-occlusion factor among transparent surfaces that increases with distance from the camera.
     </p>
 
     <note>
         A heuristic technique, or a heuristic, is any approach to problem solving or self-discovery that employs a practical method that is not guaranteed to be optimal, perfect, or rational, but is nevertheless sufficient for reaching an immediate, short-term goal or approximation. In our case, the heuristic is the weighting function.
     </note>
 
     <p>
         After all transparent surfaces have been rendered, it then performs a full-screen normalization and compositing pass to reduce errors where the heuristic was a poor approximation of the true inter-occlusion.
     </p>
 
     <p>
         The below image is a glass chess set rendered with this technique. Note that the glass pieces are not refracting any light.
     </p>
 
       <img src="/img/guest/2020/oit/a_glass_chess_set.png" width="560" alt="A glass chess set rendered with this technique.">
 
     <p>
         For a better understanding and a more detailed explanation of the weight function, please refer to page 5, 6 and 7 of the original paper as the Blended OIT has been implemented and improved by different methods along the years. Link to the paper is provided at the end of this article.
     </p>
 
     <h2>Limitation</h2>
 
     <p>
         The primary limitation of the technique is that the weighting heuristic must be tuned for the anticipated depth range and opacity of transparent surfaces.
     </p>
 
     <p>
         The technique was implemented in OpenGL for the <a href="http://g3d.sf.net/">G3D Innovation Engine</a> and DirectX for the <a href="http://www.unrealengine.com/">Unreal Engine</a> to produce the results live and in the paper. Dan Bagnell and Patrick Cozzi <a href="http://bagnell.github.io/cesium/Apps/Sandcastle/gallery/OIT.html">implemented it in WebGL</a> for their open-source Cesium engine (see also their <a href="http://cesiumjs.org/2014/03/14/Weighted-Blended-Order-Independent-Transparency/">blog post</a> discussing it).
     </p>
 
     <p>
         From those implementations, a good set of weighting functions were found, which are reported in the journal paper. In the paper, they also discuss how to spot artifacts from a poorly-tuned weighting function and fix them.
     </p>
 
     <p>
         Also, I haven't been able to find a proper way to implement this technique in a deferred renderer. Since pixels override each other in a deferred renderer, we lose information about the previous layers so we cannot correctly accumulate the color values for the lighting stage.
     </p>
 
     <p>
         One feasible solution is to apply this technique as you would ordinarily do in a forward renderer. This is basically borrowing the transparency pass of a forward renderer and incorporate it in a deferred one.
     </p>
 
     <h2>Implementation</h2>
 
     <p>
         This technique is fairly straight forward to implement and the shader modifications are very simple. If you're familiar with how Framebuffers work in OpenGL, you're almost halfway there.
     </p>
 
     <p>
         The only caveat is we need to write our code in OpenGL ^4.0 to be able to use blending to multiple render targets (e.g. utilizing <fun><function id='70'>glBlendFunc</function>i</fun>). In the paper, different ways of implementation have been discussed for libraries that do not support rendering or blending to multiple targets.
     </p>
 
     <warning>Don't forget to change your OpenGL version when initializng GLFW and also your GLSL version in your shaders.</warning>
 
     <h3>Overview</h3>
 
     <p>
         During the transparent surface rendering, shade surfaces as usual, but output to two render targets. The first render target (<def>accum</def>) must have at least <var>RGBA16F</var> precision and the second (<def>revealage</def>) must have at least <var>R8</var> precision. Clear the first render target to <var>vec4(0)</var> and the second render target to 1 (using a pixel shader or <fun><function id='10'>glClear</function>Buffer</fun> + <fun><function id='10'>glClear</function></fun>).
     </p>
 
     <p>
         Then, render the surfaces in any order to these render targets, adding the following to the bottom of the pixel shader and using the specified blending modes:
     </p>
 
 <pre><code>
 // your first render target which is used to accumulate pre-multiplied color values
 layout (location = 0) out vec4 accum;
 
 // your second render target which is used to store pixel revealage
 layout (location = 1) out float reveal;
 
 ...
 
 // output linear (not gamma encoded!), unmultiplied color from the rest of the shader
 vec4 color = ... // regular shading code
 
 // insert your favorite weighting function here. the color-based factor
 // avoids color pollution from the edges of wispy clouds. the z-based
 // factor gives precedence to nearer surfaces
 float weight =
     max(min(1.0, max(max(color.r, color.g), color.b) * color.a), color.a) *
     clamp(0.03 / (1e-5 + pow(z / 200, 4.0)), 1e-2, 3e3);
 
 // blend func: GL_ONE, GL_ONE
 // switch to pre-multiplied alpha and weight
 accum = vec4(color.rgb * color.a, color.a) * weight;
 
 // blend func: GL_ZERO, GL_ONE_MINUS_SRC_ALPHA
 reveal = color.a;
 </code></pre>
 
     <p>
         Finally, after all surfaces have been rendered, composite the result onto the screen using a full-screen pass:
     </p>
 
 <pre><code>
 // bind your accum render target to this texture unit
 layout (binding = 0) uniform sampler2D rt0;
 
 // bind your reveal render target to this texture unit
 layout (binding = 1) uniform sampler2D rt1;
 
 // shader output
 out vec4 color;
 
 // fetch pixel information
 vec4 accum = texelFetch(rt0, int2(gl_FragCoord.xy), 0);
 float reveal = texelFetch(rt1, int2(gl_FragCoord.xy), 0).r;
 
 // blend func: GL_ONE_MINUS_SRC_ALPHA, GL_SRC_ALPHA
 color = vec4(accum.rgb / max(accum.a, 1e-5), reveal);
 </code></pre>
 
     <p>
         Use this table as a reference for your render targets:
     </p>
 
     <table border="1">
         <tbody>
             <tr><td>Render Target</td><td>Format</td><td>Clear</td><td>Src Blend</td><td>Dst Blend</td><td>Write ("Src")</td></tr>
             <tr><td>accum</td><td>RGBA16F</td><td>(0,0,0,0)</td><td>ONE</td><td>ONE</td><td><code>(r*a, g*a, b*a, a) * w</code></td></tr>
             <tr><td>revealage</td><td>R8</td><td>(1,0,0,0)</td><td>ZERO</td><td>ONE_MINUS_SRC_COLOR</td><td><code>a</code></td></tr>
         </tbody>
     </table>
 
     <p>
         A total of three rendering passes are needed to accomplish the finished result which is down below:
     </p>
 
       <img src="/img/guest/2020/oit/weighted_blended_result.png" width="640" alt="Weighted, Blended result.">
 
     <h3>Details</h3>
 
     <p>
         To get started, we would have to setup a quad for our solid and transparent surfaces. The red quad will be the solid one, and the green and blue will be the transparent one. Since we're using the same quad for our screen quad as well, here we define UV values for texture mapping purposes at the screen pass.
     </p>
 
 <pre><code>
 float quadVertices[] = {
     // positions        // uv
     -1.0f, -1.0f, 0.0f,	0.0f, 0.0f,
      1.0f, -1.0f, 0.0f, 1.0f, 0.0f,
      1.0f,  1.0f, 0.0f, 1.0f, 1.0f,
 
      1.0f,  1.0f, 0.0f, 1.0f, 1.0f,
     -1.0f,  1.0f, 0.0f, 0.0f, 1.0f,
     -1.0f, -1.0f, 0.0f, 0.0f, 0.0f
 };
 
 // quad VAO
 unsigned int quadVAO, quadVBO;
 <function id='33'>glGenVertexArrays</function>(1, &quadVAO);
 <function id='12'>glGenBuffers</function>(1, &quadVBO);
 <function id='27'>glBindVertexArray</function>(quadVAO);
 <function id='32'>glBindBuffer</function>(GL_ARRAY_BUFFER, quadVBO);
 <function id='31'>glBufferData</function>(GL_ARRAY_BUFFER, sizeof(quadVertices), quadVertices, GL_STATIC_DRAW);
 <function id='29'><function id='60'>glEnable</function>VertexAttribArray</function>(0);
 <function id='30'>glVertexAttribPointer</function>(0, 3, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)0);
 <function id='29'><function id='60'>glEnable</function>VertexAttribArray</function>(1);
 <function id='30'>glVertexAttribPointer</function>(1, 2, GL_FLOAT, GL_FALSE, 5 * sizeof(float), (void*)(3 * sizeof(float)));
 <function id='27'>glBindVertexArray</function>(0);
 </code></pre>
 
     <p>
         Next, we will create two framebuffers for our solid and transparent passes. Our solid pass needs a color buffer and a depth buffer to store color and depth information. Our transparent pass needs two color buffers to store color accumulation and pixel revealage threshold. We will also attach the opaque framebuffer's depth texture to our transparent framebuffer, to utilize it for depth testing when rendering our transparent surfaces.
     </p>
 
 <pre><code>
 // set up framebuffers
 unsigned int opaqueFBO, transparentFBO;
 <function id='76'>glGenFramebuffers</function>(1, &opaqueFBO);
 <function id='76'>glGenFramebuffers</function>(1, &transparentFBO);
 
 // set up attachments for opaque framebuffer
 unsigned int opaqueTexture;
 <function id='50'>glGenTextures</function>(1, &opaqueTexture);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, opaqueTexture);
 <function id='52'>glTexImage2D</function>(GL_TEXTURE_2D, 0, GL_RGBA16F, SCR_WIDTH, SCR_HEIGHT, 0, GL_RGBA, GL_HALF_FLOAT, NULL);
 <function id='15'>glTexParameter</function>i(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
 <function id='15'>glTexParameter</function>i(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, 0);
 
 unsigned int depthTexture;
 <function id='50'>glGenTextures</function>(1, &depthTexture);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, depthTexture);
 <function id='52'>glTexImage2D</function>(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, SCR_WIDTH, SCR_HEIGHT,
              0, GL_DEPTH_COMPONENT, GL_FLOAT, NULL);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, 0);
 
 ...
 
 // set up attachments for transparent framebuffer
 unsigned int accumTexture;
 <function id='50'>glGenTextures</function>(1, &accumTexture);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, accumTexture);
 <function id='52'>glTexImage2D</function>(GL_TEXTURE_2D, 0, GL_RGBA16F, SCR_WIDTH, SCR_HEIGHT, 0, GL_RGBA, GL_HALF_FLOAT, NULL);
 <function id='15'>glTexParameter</function>i(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
 <function id='15'>glTexParameter</function>i(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, 0);
 
 unsigned int revealTexture;
 <function id='50'>glGenTextures</function>(1, &revealTexture);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, revealTexture);
 <function id='52'>glTexImage2D</function>(GL_TEXTURE_2D, 0, GL_R8, SCR_WIDTH, SCR_HEIGHT, 0, GL_RED, GL_FLOAT, NULL);
 <function id='15'>glTexParameter</function>i(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
 <function id='15'>glTexParameter</function>i(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, 0);
 
 ...
 
 // don't forget to explicitly tell OpenGL that your transparent framebuffer has two draw buffers
 const GLenum transparentDrawBuffers[] = { GL_COLOR_ATTACHMENT0, GL_COLOR_ATTACHMENT1 };
 glDrawBuffers(2, transparentDrawBuffers);
 </code></pre>
 
     <note>
         For the sake of this article, we are creating two separate framebuffers, so it would be easier to understand how the technique unfolds. We could omit the opaque framebuffer and use backbuffer for our solid pass or just create a single framebuffer with four attachments all together (opaque, accumulation, revealage, depth) and render to different render targets at each pass.
     </note>
 
     <p>
         Before rendering, setup some model matrices for your quads. You can set the Z axis however you want since this is an order-independent technique and objects closer or further to the camera would not impose any problem.
     </p>
 
 <pre><code>glm::mat4 redModelMat = calculate_model_matrix(glm::vec3(0.0f, 0.0f, 0.0f));
 glm::mat4 greenModelMat = calculate_model_matrix(glm::vec3(0.0f, 0.0f, 1.0f));
 glm::mat4 blueModelMat = calculate_model_matrix(glm::vec3(0.0f, 0.0f, 2.0f));
 </code></pre>
 
     <p>
         At this point, we have to perform our solid pass, so configure the render states and bind the opaque framebuffer.
     </p>
 
 <pre><code>
 // configure render states
 <function id='60'>glEnable</function>(GL_DEPTH_TEST);
 <function id='66'>glDepthFunc</function>(GL_LESS);
 <function id='65'>glDepthMask</function>(GL_TRUE);
 glDisable(GL_BLEND);
 <function id='13'><function id='10'>glClear</function>Color</function>(0.0f, 0.0f, 0.0f, 0.0f);
 
 // bind opaque framebuffer to render solid objects
 <function id='77'>glBindFramebuffer</function>(GL_FRAMEBUFFER, opaqueFBO);
 <function id='10'>glClear</function>(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
 </code></pre>
 
     <p>
         We have to reset our depth function and depth mask for the solid pass at every frame since pipeline changes these states further down the line.
     </p>
 
     <p>
         Now, draw the solid objects using the solid shader. You can draw alpha cutout objects both at this stage and the next stage as well. The solid shader is just a simple shader that transforms the vertices and draws the mesh with the supplied color.
     </p>
 
 <pre><code>
 // use solid shader
 solidShader.use();
 
 // draw red quad
 solidShader.setMat4("mvp", vp * redModelMat);
 solidShader.setVec3("color", glm::vec3(1.0f, 0.0f, 0.0f));
 <function id='27'>glBindVertexArray</function>(quadVAO);
 <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
 </code></pre>
 
     <p>
         So far so good. For our transparent pass, like in the solid pass, configure the render states to blend to these render targets as below, then bind the transparent framebuffer and clear its two color buffers to <var>vec4(0.0f)</var> and <var>vec4(1.0)</var>.
     </p>
 
 <pre><code>
 // configure render states
 // disable depth writes so transparent objects wouldn't interfere with solid pass depth values
 <function id='65'>glDepthMask</function>(GL_FALSE);
 <function id='60'>glEnable</function>(GL_BLEND);
 <function id='70'>glBlendFunc</function>i(0, GL_ONE, GL_ONE); // accumulation blend target
 <function id='70'>glBlendFunc</function>i(1, GL_ZERO, GL_ONE_MINUS_SRC_COLOR); // revealge blend target
 <function id='72'>glBlendEquation</function>(GL_FUNC_ADD);
 
 // bind transparent framebuffer to render transparent objects
 <function id='77'>glBindFramebuffer</function>(GL_FRAMEBUFFER, transparentFBO);
 // use a four component float array or a glm::vec4(0.0)
 <function id='10'>glClear</function>Bufferfv(GL_COLOR, 0, &zeroFillerVec[0]); 
  // use a four component float array or a glm::vec4(1.0)
 <function id='10'>glClear</function>Bufferfv(GL_COLOR, 1, &oneFillerVec[0]);
 </code></pre>
 
     <p>
         Then, draw the transparent surfaces with your preferred alpha values.
     </p>
 
 <pre><code>
 // use transparent shader
 transparentShader.use();
 
 // draw green quad
 transparentShader.setMat4("mvp", vp * greenModelMat);
 transparentShader.setVec4("color", glm::vec4(0.0f, 1.0f, 0.0f, 0.5f));
 <function id='27'>glBindVertexArray</function>(quadVAO);
 <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
 
 // draw blue quad
 transparentShader.setMat4("mvp", vp * blueModelMat);
 transparentShader.setVec4("color", glm::vec4(0.0f, 0.0f, 1.0f, 0.5f));
 <function id='27'>glBindVertexArray</function>(quadVAO);
 <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
 </code></pre>
 
     <p>
         The transparent shader is where half the work is done. It's primarily a shader that collects pixel information for our composite pass:
     </p>
 
 <pre><code>
 // shader outputs
 layout (location = 0) out vec4 accum;
 layout (location = 1) out float reveal;
 
 // material color
 uniform vec4 color;
 
 void main()
 {
     // weight function
     float weight = clamp(pow(min(1.0, color.a * 10.0) + 0.01, 3.0) * 1e8 * 
                          pow(1.0 - gl_FragCoord.z * 0.9, 3.0), 1e-2, 3e3);
 
     // store pixel color accumulation
     accum = vec4(color.rgb * color.a, color.a) * weight;
 
     // store pixel revealage threshold
     reveal = color.a;
 }
 </code></pre>
 
 	<p>
 		Note that, we are directly using the color passed to the shader as our final fragment color. Normally, if you are in a lighting shader, you want to use the final result of the lighting to store in accumulation and revealage render targets.
 	</p>
 
     <p>
         Now that everything has been rendered, we have to <def>composite</def> these two images so we can have the finished result.
     </p>
 
     <note>
         Compositing is a common method in many techniques that use a post-processing quad drawn all over the screen. Think of it as merging two layers in a photo editing software like Photoshop or Gimp.
     </note>
 
     <p>
         In OpenGL, we can achieve this by color blending feature:
     </p>
 
 <pre><code>
 // set render states
 <function id='66'>glDepthFunc</function>(GL_ALWAYS);
 <function id='60'>glEnable</function>(GL_BLEND);
 <function id='70'>glBlendFunc</function>(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
 
 // bind opaque framebuffer
 <function id='77'>glBindFramebuffer</function>(GL_FRAMEBUFFER, opaqueFBO);
 
 // use composite shader
 compositeShader.use();
 
 // draw screen quad
 <function id='49'>glActiveTexture</function>(GL_TEXTURE0);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, accumTexture);
 <function id='49'>glActiveTexture</function>(GL_TEXTURE1);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, revealTexture);
 <function id='27'>glBindVertexArray</function>(quadVAO);
 <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
 </code></pre>
 
     <p>
         Composite shader is where the other half of the work is done. We're basically merging two layers, one being the solid objects image and the other being the transparent objects image. Accumulation buffer tells us about the color and revealage buffer determines the visibility of the the underlying pixel:
     </p>
 
 <pre><code>
 // shader outputs
 layout (location = 0) out vec4 frag;
 
 // color accumulation buffer
 layout (binding = 0) uniform sampler2D accum;
 
 // revealage threshold buffer
 layout (binding = 1) uniform sampler2D reveal;
 
 // epsilon number
 const float EPSILON = 0.00001f;
 
 // calculate floating point numbers equality accurately
 bool isApproximatelyEqual(float a, float b)
 {
     return abs(a - b) &lt;= (abs(a) &lt; abs(b) ? abs(b) : abs(a)) * EPSILON;
 }
 
 // get the max value between three values
 float max3(vec3 v)
 {
     return max(max(v.x, v.y), v.z);
 }
 
 void main()
 {
     // fragment coordination
     ivec2 coords = ivec2(gl_FragCoord.xy);
 
     // fragment revealage
     float revealage = texelFetch(reveal, coords, 0).r;
 
     // save the blending and color texture fetch cost if there is not a transparent fragment
     if (isApproximatelyEqual(revealage, 1.0f))
         discard;
 
     // fragment color
     vec4 accumulation = texelFetch(accum, coords, 0);
 
     // suppress overflow
     if (isinf(max3(abs(accumulation.rgb))))
         accumulation.rgb = vec3(accumulation.a);
 
     // prevent floating point precision bug
     vec3 average_color = accumulation.rgb / max(accumulation.a, EPSILON);
 
     // blend pixels
     frag = vec4(average_color, 1.0f - revealage);
 }
 </code></pre>
 
     <p>
         Note that, we are using some helper functions like <fun>isApproximatelyEqual</fun> or <fun>max3</fun> to help us with the accurate calculation of floating-point numbers. Due to inaccuracy of floating-point numbers calculation in current generation processors, we need to compare our values with an extremely small amount called an <def>epsilon</def> to avoid underflows or overflows.
     </p>
 
     <p>
         Also, we don't need an intermediate framebuffer to do compositing. We can use our opaque framebuffer as the base framebuffer and paint over it since it already has the opaque pass information. Plus, we're stating that all depth tests should pass since we want to paint over the opaque image.
     </p>
 
     <p>
         Finally, draw your composited image (which is the opaque texture attachment since you rendered your transparent image over it in the last pass) onto the backbuffer and observe the result.
     </p>
 
 <pre><code>
 // set render states
 glDisable(GL_DEPTH);
 <function id='65'>glDepthMask</function>(GL_TRUE); // enable depth writes so <function id='10'>glClear</function> won't ignore clearing the depth buffer
 glDisable(GL_BLEND);
 
 // bind backbuffer
 <function id='77'>glBindFramebuffer</function>(GL_FRAMEBUFFER, 0);
 <function id='13'><function id='10'>glClear</function>Color</function>(0.0f, 0.0f, 0.0f, 0.0f);
 <function id='10'>glClear</function>(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
 
 // use screen shader
 screenShader.use();
 
 // draw final screen quad
 <function id='49'>glActiveTexture</function>(GL_TEXTURE0);
 <function id='48'>glBindTexture</function>(GL_TEXTURE_2D, opaqueTexture);
 <function id='27'>glBindVertexArray</function>(quadVAO);
 <function id='1'>glDrawArrays</function>(GL_TRIANGLES, 0, 6);
 </code></pre>
 
     <p>
         Screen shader is just a simple post-processing shader which draws a full-screen quad.
     </p>
 
     <p>
         In a regular pipeline, you would also apply gamma-correction, tone-mapping, etc. in an intermediate post-processing framebuffer before you render to backbuffer, but ensure you are not applying them while rendering your solid and transparent surfaces and also not before composition since this transparency technique needs raw color values for calculating transparent pixels.
     </p>
 
     <p>
         Now, the interesting part is to play with the Z axis of your objects to see order-independence in action. Try to place your transparent objects behind the solid object or mess up the orders entirely.
     </p>
 
       <img src="/img/guest/2020/oit/weighted_blended_reordered.png" width="640" alt="Weighted, Blended reordered.">
 
     <p>
         In the image above, the green quad is rendered after the red quad, but behind it, and if you move the camera around to see the green quad from behind, you won't see any artifacts.
     </p>
 
     <p>
         As stated earlier, one limitation that this technique imposes is that for scenes with higher depth/alpha complexity we need to tune the weighting function to achieve the correct result. Luckily, a number of tested weighting functions are provided in the paper which you can refer and investigate them for your environment.
     </p>
 
     <p>
         Be sure to also check the colored transmission transparency which is the improved version of this technique in the links below.
     </p>
 
     <p>
         You can find the source code for this demo <a href="/code_viewer_gh.php?code=src/8.guest/2020/oit/weighted_blended.cpp" target="_blank">here</a>.
     </p>
 
     <h2>Further reading</h2>
 
     <ul>
         <li><a href="http://jcgt.org/published/0002/02/09" href="_blank">Weighted, Blended paper</a>: The original paper published in the journal of computer graphics. A brief history of the transparency and the emergence of the technique itself is provided. This is a must for the dedicated readers.</li>
         <li><a href="http://casual-effects.blogspot.com/2014/03/weighted-blended-order-independent.html" href="_blank">Weighted, Blended introduction</a>: Casual Effects is Morgan McGuire's personal blog. This post is the introduction of their technique which goes into further details and is definitely worth to read. Plus, there are videos of their implementation live in action that you would not want to miss.</li>
         <li><a href="http://casual-effects.blogspot.com/2015/03/implemented-weighted-blended-order.html" href="_blank">Weighted, Blended for implementors</a>: And also another blog post by him on implementing the technique for implementors.</li>
         <li><a href="http://casual-effects.blogspot.com/2015/03/colored-blended-order-independent.html" href="_blank">Weighted, Blended and colored transmission</a>: And another blog post on colored transmission for transparent surfaces.</li>
         <li><a href="http://bagnell.github.io/cesium/Apps/Sandcastle/gallery/OIT.html" href="_blank">A live implementation of the technique</a>: This is a live WebGL visualization from Cesium engine which accepts weighting functions for you to test in your browser!</li>
     </ul>
         
 <author>
   <strong>Article by: </strong>Mahan Heshmati Moghaddam<br/>
   <strong>Contact: </strong><a href="mailto:mahangm@gmail.com" target="_blank">e-mail</a>
 </author>       
 
     </div>