Computer Graphics Blending CO2409 Computer Graphics Week 14.

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Computer Graphics Blending CO2409 Computer Graphics Week 14.

  • Computer GraphicsBlendingCO2409 Computer GraphicsWeek 14

  • Lecture ContentsPixel RenderingAdditive / Multiplicative BlendingAlpha TestingAlpha BlendingDepth Buffer / Sorting Issues

  • Pixel RenderingThe output-merger stage is the final stage in the rendering pipelineWe 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 viewportCan be used to create various forms of transparency:Semi-transparent objects: glass, plastic, membranesEffects that brighten the scene: fire, glow, lens flareOr obscure (darken) the scene: smoke, dust, shadowsPlus 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 RecapThe 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 shaderDestination colour is the existing viewport pixel colourFinal colour the new colour written to the viewportWe previously used this to blend smoke sprites

    A darkening effect, suitable for representation of glass, shadows, smoke etcIf source pixel is white, destination colour stays sameAs source pixel tends to black, destination is darkened

  • Multiplicative Blending ExampleTest PatternRGB, but no alpha channelMultiplicative Smoke

  • Additive Blending and OthersThe 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 lightsSource black = no effect, brightens as source -> whiteWe 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) / 2Average of source and destination colour

  • Additive Blending ExampleTest PatternRGB, but no alpha channelAdditive Flare

  • Blending using AlphaRecall that pixel colours often contain a fourth component, the alpha value/channelSome blending methods use this alpha channel to regulate the blendingKey methods are alpha testing & alpha blending

    Usually only the source alpha value is usedGenerally avoid use of destination (viewport) alphaSo the alpha value is output from the pixel shaderTypically, the alpha value comes directly from the textureCan come from vertex data/colours or from specialised pixel shader work (wiggle!)

  • Alpha TestingAlpha testing is a method to test the alpha channel quickly without a blending equationAlthough it can be combined with blending methods

    The test checks the alpha value of each source (polygon) pixel before rendering itPixel is only rendered if the alpha level is within a user-defined limitE.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 workEfficient method to discard fully transparent pixelsSorting problems discussed later do not affect alpha testing

  • Alpha Testing ExampleTest PatternRGB ChannelAlpha ChannelUsing Alpha >= 128 Test

  • Alpha BlendingThe 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 valueLow alpha = very transparent, high alpha = very opaqueIt can be used for smooth & precise transparency effectsPreviously used as an alternative for smoke sprites

    Alpha blending can create technical challenges due to the difficulties in sorting described later

  • Alpha Blending ExampleTest PatternRGB ChannelAlpha ChannelAlpha provides variable transparency

  • 3D Blending & Depth BuffersThe depth buffer causes issues with blending in 3DWe will cover the depth buffer in detail in a later lectureIdea: Store each pixels 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 blendingIts depth (distance) is recorded in the depth bufferAnother pixel is rendered in the same place, but further away:It should be visible through the additive pixelThere should be an additive blend between themHowever, the depth buffer contains a closer pixel, so it rejects this new further pixel the depth buffer doesnt know about blending

  • Quick Fix for Depth ProblemsThe visual effect of this depth buffer problem with blending is illustrated belowOccurs with any blending mode except alpha testing

    Simple solution:Dont write blended polygons to the depth bufferStill test (read) the depth buffer to see if the blended polygons are obscured by something opaquePixels behind the blended polygon will not be rejected

    Depth buffer causing errors when blending

  • Quick Fix for Sorting ProblemsThis fix only works if:Blended polygons are rendered last in the sceneBlending 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 symmetricalFull solution is to manually sort polygons by depthDraw polygons from back to front to avoid the issueThere is also an alternative Alpha-to-Coverage technique

  • Sorting Alpha Blended PolygonsSorting polygons in 3D is non-trivial:Beyond scope of this moduleCovered in 3rd year games module