BlendingBlending

MAE152Computer Graphics for Engineers and ScientistsFall 03

OutlineOutline

Why do we want to blend?Why do we want to blend? What is blending?What is blending? Math behind blendingMath behind blending Blending in OpenGLBlending in OpenGL

Why do we want to blend?Why do we want to blend? We use triangles to describe surfacesWe use triangles to describe surfaces We always assumed opaque surfacesWe always assumed opaque surfaces How would we do transparent surfaces?How would we do transparent surfaces? What are some types of transparent What are some types of transparent

surfaces?surfaces?– WindowsWindows– Saran WrapSaran Wrap– PlasticPlastic– Stained GlassStained Glass– WaterWater

Alpha: the 4Alpha: the 4thth Color Component Color Component

Measure of OpacityMeasure of Opacity– simulate translucent objectssimulate translucent objects

glass, water, etc.glass, water, etc.

– composite imagescomposite images– antialiasingantialiasing– ignored if blending is not enabledignored if blending is not enabled

glEnable( GL_BLEND )glEnable( GL_BLEND )

BlendBlend

Source and DestinationSource and Destination

Objects are blended together in a scene Objects are blended together in a scene in the order in which they are drawn.in the order in which they are drawn.

An object being drawn it is the An object being drawn it is the ""sourcesource“.“.

Any object, over which a source object Any object, over which a source object is drawn is a “is drawn is a “destinationdestination”. ”. 

Blending functions, along with Blending functions, along with alpha alpha valuesvalues control how source and control how source and destination colors are mixed together.destination colors are mixed together.

Source and Destination FactorsSource and Destination Factors RGBA blending factorsRGBA blending factors

– Source Sr, Sg, Sb, SaSource Sr, Sg, Sb, Sa– Destination Dr, Dg, Db, DaDestination Dr, Dg, Db, Da

““Current” RGBA componentsCurrent” RGBA components– Source Rs, Gs, Bs, AsSource Rs, Gs, Bs, As– Destination Rd, Gd, Bd, AdDestination Rd, Gd, Bd, Ad

Resultant RGBA components (destination)Resultant RGBA components (destination)((Rs x Sr) + (Rd x Dr),((Rs x Sr) + (Rd x Dr), (Gs x Sg) + (Gd x Dg),(Gs x Sg) + (Gd x Dg), (Bs x Sb) + (Bd x Db),(Bs x Sb) + (Bd x Db), (As x Sa) +(Ad x Da))(As x Sa) +(Ad x Da))

The new destination values are clamped to [0.0-1.0]. The new destination values are clamped to [0.0-1.0].   

Blending in OGLBlending in OGL If a fragment makes it to FB, the pixel is read out If a fragment makes it to FB, the pixel is read out

and blended with the fragment’s color and then and blended with the fragment’s color and then written back to FBwritten back to FB

The contributions of fragment and FB pixel is The contributions of fragment and FB pixel is specified: glBlendFunc( src, dst )specified: glBlendFunc( src, dst )

We would like to combine We would like to combine the two colorsthe two colors

Fragment or source - incoming colorFragment or source - incoming color destination - existing colordestination - existing color How should we combine them?How should we combine them? We use the We use the alphaalpha channel to describe the channel to describe the

combination of the source and destination.combination of the source and destination. ColorColorFinalFinal = A*Color = A*ColorSourceSource + B*Color + B*ColorDestinationDestination

Most APIs let you specify A and BMost APIs let you specify A and B What does A and B mean qualitatively?What does A and B mean qualitatively?

Combining ColorsCombining Colors Usually we take the source alpha as a Usually we take the source alpha as a

“percentage” of the incoming fragment.“percentage” of the incoming fragment. Thus the equation becomes:Thus the equation becomes: ColorColorFinalFinal=Alpha=AlphaSourceSource*Color*ColorSourceSource

+(1- Alpha+(1- AlphaSourceSource)*Color)*ColorDestinationDestination

What is the “default” alpha values for no blending?What is the “default” alpha values for no blending? What does this mean about the order of objects?What does this mean about the order of objects? Order DOES MATTER when you have alpha objects!Order DOES MATTER when you have alpha objects!

Order Matters with Alpha!Order Matters with Alpha!

Setting Alpha ValuesSetting Alpha Values Unlit modelsUnlit models

– Use the fourth parameter of the glColor4f() command Use the fourth parameter of the glColor4f() command to set the alpha valueto set the alpha value

– alpha = 0.0 makes the object completely transparentalpha = 0.0 makes the object completely transparent– alpha = 1.0 makes the object completely opaquealpha = 1.0 makes the object completely opaque

   Lit modelsLit models

– The alpha value of an object is specified with the The alpha value of an object is specified with the glMaterial*() function when specifying, ambient, glMaterial*() function when specifying, ambient, diffuse, specular or emissive light parametersdiffuse, specular or emissive light parameters

– Example: Example: GLfloat mat_transparent[] = { 0.0, 0.8, 0.8, GLfloat mat_transparent[] = { 0.0, 0.8, 0.8, 0.6 }; //init fn0.6 }; //init fnglMaterialfv(GL_FRONT, GL_DIFFUSE, glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_transparent);mat_transparent);

Setting the Blend FunctionSetting the Blend Function Blend Function controls color and alpha Blend Function controls color and alpha

values between source and destination values between source and destination objectsobjectsvoid glBlendFunc( GLenum sfactor, GLenum void glBlendFunc( GLenum sfactor, GLenum

dfactor)dfactor)– Sfactor: Sfactor: source blending factorsource blending factor– Dfactor: Dfactor: destination blending factorsdestination blending factors

The value of these blending factors and The value of these blending factors and their computed blending factors is their computed blending factors is tabulated.tabulated.

Setting the Blend FunctionSetting the Blend Function

Constant ValueConstant Value Relevant FactorRelevant Factor Computed Blend Computed Blend FactorFactor

GL_ZEROGL_ZERO Source or Source or destinationdestination

(0,0,0,0)(0,0,0,0)

GL_ONEGL_ONE Source or Source or destinationdestination

(1,1,1,1)(1,1,1,1)

GL_DST_COLORGL_DST_COLOR SourceSource (Rd,Gd,Bd,Ad)(Rd,Gd,Bd,Ad)

GL_SRC_COLORGL_SRC_COLOR destinationdestination (Rs,Gs,Bs,As)(Rs,Gs,Bs,As)

GL_ONE_MINUS_DST_COLORGL_ONE_MINUS_DST_COLOR sourcesource (1,1,1,1)-(1,1,1,1)-(Rd,Gd,Bd,Ad)(Rd,Gd,Bd,Ad)

GL_ONE_MINUS_SRC_COLORGL_ONE_MINUS_SRC_COLOR destinationdestination (1,1,1,1)-(1,1,1,1)-(Rs,Gs,Bs,As)(Rs,Gs,Bs,As)

GL_SRC_ALPHAGL_SRC_ALPHA Source or Source or destinationdestination

(As,As,As,As)(As,As,As,As)

GL_ONE_MINUS_SRC_ALPHAGL_ONE_MINUS_SRC_ALPHA Source or Source or destinationdestination

(1,1,1,1)-(1,1,1,1)-(As,As,As,As)(As,As,As,As)

GL_DST_ALPHAGL_DST_ALPHA Source or Source or destinationdestination

(Ad,Ad,Ad,Ad)(Ad,Ad,Ad,Ad)

GL_ONE_MINUS_DST_ALPHAGL_ONE_MINUS_DST_ALPHA Source or Source or destinationdestination

(1,1,1,1)-(1,1,1,1)-(As,As,As,As)(As,As,As,As)

GL_SRC_ALPHA_SATURATEGL_SRC_ALPHA_SATURATE SourceSource (f,f,f,1): f-min(As,1-(f,f,f,1): f-min(As,1-Ad)Ad)

FragmentFragment Fragment in OGL: after the rasterization Fragment in OGL: after the rasterization

stage (including texturing), the data are not stage (including texturing), the data are not yet pixel, but are fragmentsyet pixel, but are fragments– Fragment is all the data associated with a pixel, Fragment is all the data associated with a pixel,

including coordinate, color, depth and texture including coordinate, color, depth and texture coordinates.coordinates.

DemoDemo Overlapping TrianglesOverlapping Triangles

3D Blending with Depth Buffer3D Blending with Depth Buffer

A scene of opaque and translucent objectsA scene of opaque and translucent objects– Enable depth buffering and depth testEnable depth buffering and depth test– Draw opaque objectsDraw opaque objects– Make the depth buffer read only, with Make the depth buffer read only, with

glDepthMask(GL_FALSE)glDepthMask(GL_FALSE)– Draw the translucent objects (sort those triangles Draw the translucent objects (sort those triangles

still, but which order, FTB or BTF?)still, but which order, FTB or BTF?)

DemoDemo 3-D blending with depth buffer3-D blending with depth buffer