GLSL Programming/Blender/Order-Independent Transparency

This tutorial covers order-independent blending.

“Where Have You Bean” by flickr user Ombligotron. The typo in the title refers to the depicted sculpture “Cloud Gate” a.k.a. “The Bean”.

It continues the discussion of the tutorial on transparency and solves some problems of standard transparency. If you haven't read that tutorial, you should read it first.

“84 – Father son” by Ben Newton. An example of double exposure.

Order-Independent Blending

As noted in the tutorial on transparency, the result of blending often (in particular for standard alpha blending) depends on the order in which triangles are rendered and therefore results in rendering artifacts if the triangles are not sorted from back to front (which they usually aren't). The term “order-independent transparency” describes various techniques to avoid this problem. One of these techniques is order-independent blending, i.e. the use of a blend equation that does not depend on the order in which triangles are rasterized. There two basic possibilities: additive blending and multiplicative blending.

Additive Blending

The standard example for additive blending are double exposures as in the images on this page: colors are added such that it is impossible (or at least very hard) to say in which order the photos were taken. Additive blending can be characterized in terms of the blend equation introduced in the tutorial on transparency:

vec4 result = SrcFactor * gl_FragColor + DstFactor * pixel_color;

where SrcFactor and DstFactor are set by a function of Blender's Python API:

bge.types.KX_BlenderMaterial.setBlending({code for SrcFactor},{code for DstFactor})

For additive blending, the code for DstFactor has to be bge.logic.BL_ONE and the code for SrcFactor must not depend on the pixel color in the framebuffer; i.e., it can be bge.logic.BL_ONE, bge.logic.BL_SRC_COLOR, bge.logic.BL_SRC_ALPHA, bge.logic.BL_ONE_MINUS_SRC_COLOR, or bge.logic.BL_ONE_MINUS_SRC_ALPHA.

An example is:

import bge

cont = bge.logic.getCurrentController()

VertexShader = """
         void main()
         {
            gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
         }

"""

FragmentShader = """
         void main()
         {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 0.3); 
         }
"""

mesh = cont.owner.meshes[0]
for mat in mesh.materials:
    shader = mat.getShader()
    if shader != None:
        if not shader.isValid():
            shader.setSource(VertexShader, FragmentShader, 1)
            mat.setBlending(bge.logic.BL_SRC_ALPHA, bge.logic.BL_ONE)

Remember that you have to set Viewport Shading to Texture in the menu of a 3D View in order to activate blending. Also, you should activate Z Transparency and deactivate Backface Culling as described in the tutorial on transparency.

Multiplicative Blending

An example for multiplicative blending in photography is the use of multiple uniform grey filters: the order in which the filters are put onto a camera doesn't matter for the resulting attenuation of the image. In terms of the rasterization of triangles, the image corresponds to the contents of the framebuffer before the triangles are rasterized, while the filters correspond to the triangles.

When specifying mutiplicative blending in Python with

bge.types.KX_BlenderMaterial.setBlending({code for SrcFactor},{code for DstFactor})

the code for SrcFactor has to be bge.logic.BL_ZERO and the code for DstFactor must depend on the fragment color; i.e., it can be bge.logic.BL_SRC_COLOR, bge.logic.BL_SRC_ALPHA, bge.logic.BL_ONE_MINUS_SRC_COLOR, or bge.logic.BL_ONE_MINUS_SRC_ALPHA. A typical example for attenuating the background with the opacity specified by the alpha component of fragments would use bge.logic.BL_ONE_MINUS_SRC_ALPHA for the code for DstFactor:

import bge

cont = bge.logic.getCurrentController()

VertexShader = """
         void main()
         {
            gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
         }

"""

FragmentShader = """
         void main()
         {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 0.3); 
         }
"""

mesh = cont.owner.meshes[0]
for mat in mesh.materials:
    shader = mat.getShader()
    if shader != None:
        if not shader.isValid():
            shader.setSource(VertexShader, FragmentShader, 1)
            mat.setBlending(bge.logic.BL_ZERO, 
                            bge.logic.BL_ONE_MINUS_SRC_ALPHA)

Summary

Congratulations, you have reached the end of this tutorial. We have looked at:

• What order-independent transparency and order-independent blending is.
• What the two most important kinds of order-independent blending are (additive and multiplicative).
• How to implement additive and multiplicative blending.

Further Reading

If you still want to know more

• about the shader code, you should read the tutorial on transparency.
• about another technique for order-independent transparency, namely depth peeling, you could read a technical report by Cass Everitt: “Interactive Order-Independent Transparency”, which is available online.

< GLSL Programming/Blender

Unless stated otherwise, all example source code on this page is granted to the public domain.