Computer Graphics Blending CO2409 Computer Graphics Week 14

Lecture Contents 1.Pixel Rendering 2.Additive / Multiplicative Blending 3.Alpha Testing 4.Alpha Blending 5.Depth Buffer / Sorting Issues

Pixel Rendering The output-merger stage is the final stage in the rendering pipeline –We have looked (in part) at all the other stages now Blends final pixel colours for the primitive being rendered with those pixels already on the viewport Can be used to create various forms of transparency: –Semi-transparent objects: glass, plastic, membranes –Effects that brighten the scene: fire, glow, lens flare –Or obscure (darken) the scene: smoke, dust, shadows –Plus other effects: e.g. detail textures, UI sprites etc. –[Same list as for sprites] Simpler blending methods combine the colours red, green and blue components, other methods use alpha values

Blending Recap The multiplicative blending equation is: Final.Red = Source.Red * Destination.Red Similar for green and blue, RGB range must be [0-1] (or need to scale) –Source colour is the pixel colour output from the pixel shader –Destination colour is the existing viewport pixel colour –Final colour the new colour written to the viewport –We previously used this to blend smoke sprites A darkening effect, suitable for representation of glass, shadows, smoke etc –If source pixel is white, destination colour stays same –As source pixel tends to black, destination is darkened

Multiplicative Blending Example Test Pattern RGB, but no alpha channel Multiplicative Smoke

Additive Blending and Others The additive blending equation is: Final.Red = Source.Red + Destination.Red Similar for green and blue, RGB range can be [0-1] or [0-255] This is a lightening effect, mainly used for the representation of lights –Source black = no effect, brightens as source -> white –We previously used this to blend fire and flare sprites Many other blending equations are possible, e.g.: Final.Red = 2 * (Source.Red * Destination.Red) –Darkens & lightens depending on source colour Final.Red = (Source.Red + Destination.Red) / 2 –Average of source and destination colour

Additive Blending Example Test Pattern RGB, but no alpha channel Additive Flare

Blending using Alpha Recall that pixel colours often contain a fourth component, the alpha value/channel Some blending methods use this alpha channel to regulate the blending –Key methods are alpha testing & alpha blending Usually only the source alpha value is used –Generally avoid use of destination (viewport) alpha So the alpha value is output from the pixel shader –Typically, the alpha value comes directly from the texture –Can come from vertex data/colours or from specialised pixel shader work (wiggle!)

Alpha Testing Alpha testing is a method to test the alpha channel quickly without a blending equation –Although it can be combined with blending methods The test checks the alpha value of each source (polygon) pixel before rendering it Pixel is only rendered if the alpha level is within a user- defined limit –E.g. If alpha >= 128 render pixel, otherwise discard This allows for areas of a polygon to be cut out, similar to the cut-out sprites from the 2D work –Efficient method to discard fully transparent pixels –Sorting problems discussed later do not affect alpha testing

Alpha Testing Example Test Pattern RGB Channel Alpha Channel Using Alpha >= 128 Test

Alpha Blending The alpha blending equation is: Final.Red = Source.Red * Source.Alpha + Destination.Red * (1 – Source.Alpha) Similar for green and blue, RGBA range is [0-1] This blending allows for variable transparency based on the alpha value –Low alpha = very transparent, high alpha = very opaque –It can be used for smooth & precise transparency effects –Previously used as an alternative for smoke sprites Alpha blending can create technical challenges due to the difficulties in sorting described later

Alpha Blending Example Test Pattern RGB Channel Alpha Channel Alpha provides variable transparency

3D Blending & Depth Buffers The depth buffer causes issues with blending in 3D –We will cover the depth buffer in detail in a later lecture –Idea: Store each pixel’s distance in the depth buffer, if another pixel needs to be drawn in same place, compare its depth first By default, pixels are recorded in the depth buffer regardless of transparency, e.g: –A nearby pixel is rendered with additive blending Its depth (distance) is recorded in the depth buffer –Another pixel is rendered in the same place, but further away: It should be visible through the additive pixel There should be an additive blend between them –However, the depth buffer contains a closer pixel, so it rejects this new further pixel – the depth buffer doesn’t ‘know’ about blending

Quick Fix for Depth Problems The visual effect of this depth buffer problem with blending is illustrated below –Occurs with any blending mode except alpha testing Simple solution: Don’t write blended polygons to the depth buffer –Still test (read) the depth buffer to see if the blended polygons are obscured by something opaque Pixels behind the blended polygon will not be rejected Depth buffer causing errors when blending

Quick Fix for Sorting Problems This fix only works if: –Blended polygons are rendered last in the scene –Blending method is order independent (symmetrical) I.e. Formula result same if source & destination are swapped Additive and multiplicative are order independent: A + B = B + A A * B = B * A But alpha blending is not symmetrical –Full solution is to manually sort polygons by depth –Draw polygons from back to front to avoid the issue There is also an alternative “Alpha-to-Coverage” technique

Sorting Alpha Blended Polygons Sorting polygons in 3D is non-trivial: –Beyond scope of this module –Covered in 3 rd year games module