2D 3D Graphics Programming

1
2D / 3D Graphics Programming

• Chapter 12
• Blending

2
12.1 The Blending Equation
How ?
An opaque teapot
A transparent teapot
We need to combine the pixel colors being
computed for the teapot with the pixel colors of
the crate in such a way that the crate shows
through the teapot.
3
The Blending Equation (Cont)

• The idea of combining the pixel values that are
  currently being computed (source pixel) with the
  pixel values previously written (destination
  pixel) is called blending.
• Note that the effect of blending is not limited
  to ordinary glass-like transparency.
• It is important to realize that the triangles
  currently being rasterized are blended with the
  pixels that were previously written to the back
  buffer.
• In the example figures, the crate image is drawn
  first so that the crates pixels are on the back
  buffer.
• We then draw the teapot so that the teapots
  pixels are blended with the crates pixels.

4
The Blending Equation (Cont)

• The following rule should be followed when using
  blending
• Draw objects that do not use blending first.
• Then sort the objects that use blending by their
  distance from the camera this is most
  efficiently done if the objects are in view space
  so that you can sort simply by the z-component.
• Finally, draw the objects that use blending in a
  back-to-front order.
• The following formula is used to blend two pixel
  values
• OutputPixel SourcePixel ? SourceBlendFactor
  DestPixel ? DestBlendFactor

5
The Blending Equation (Cont)

• Each of the above variables is a 4D color vector
  (r, g, b, a), and the symbol denotes
  component-wise multiplication.
• OutputPixelThe resulting blended pixel
• SourcePixelThe pixel currently being computed
  that is to be blended with the pixel on the back
  buffer
• SourceBlendFactorA value in the interval 0, 1
  that specifies the percent of the source pixel to
  use in the blend
• DestPixelThe pixel currently on the back buffer
• DestBlendFactorA value in the interval 0, 1
  that specifies the percent of the destination
  pixel to use in the blend

6
The Blending Equation (Cont)

• The source and destination blend factors let us
  modify the original source and destination pixels
  in a variety of ways, allowing for different
  effects to be achieved.
• Blending is disabled by default you can enable
  it by setting the D3DRS_ALPHABLENDENABLE render
  state to true
• Device-gtSetRenderState(D3DRS_ALPHABLENDENABLE,
  true)

7
The Blending Equation (Cont)

• Note
• Blending is not a cheap operation and should only
  be enabled for the geometry that needs it.
• When you are done rendering that geometry, you
  should disable alpha blending.
• Also try to batch triangles that use blending and
  render them at once so that you can avoid turning
  blending on and off multiple times per frame.

8
12.2 Blend Factor

• By setting different combinations of source and
  destination blend factors, you can create dozens
  of different blending effects.
• Experiment with different combinations to see
  what they do.
• You can set the source blend factor and the
  destination blend factor by setting the
  D3DRS_SRCBLEND and D3DRS_DESTBLEND render states,
  respectively.
• e.g.
• Device-gtSetRenderState(D3DRS_SRCBLEND, Source)
• Device-gtSetRenderState(D3DRS_DESTBLEND,
  Destination)

9
Blend Factor (Cont)

• where Source and Destination can be one of the
  following blend factors
• D3DBLEND_ZEROblendFactor(0, 0, 0, 0)
• D3DBLEND_ONEblendFactor(1, 1, 1, 1)
• D3DBLEND_SRCCOLORblendFactor(rs, gs, bs, as)
• D3DBLEND_INVSRCCOLORblendFactor(1 rs, 1 gs,
  1 bs, 1 as)
• D3DBLEND_SRCALPHAblendFactor(as, as, as, as)
• D3DBLEND_INVSRCALPHAblendFactor(1 as, 1
  as, 1 as, 1 as)
• D3DBLEND_DESTALPHAblendFactor(ad, ad, ad, ad)
• D3DBLEND_INVDESTALPHAblendFactor(1 ad, 1
  ad, 1 ad, 1 ad)

10
Blend Factor (Cont)

• D3DBLEND_DESTCOLORblendFactor(rd, gd, bd, ad)
• D3DBLEND_INVDESTCOLORblendFactor(1 rd, 1
  gd, 1 bd, 1 ad)
• D3DBLEND_SRCALPHASATblendFactor(f, f, f, 1),
  where fmin(as, 1 ad)
• D3DBLEND_BOTHINVSRCALPHAThis blend mode sets the
  source blend factor to (1 as, 1 as, 1 as, 1
  as) and the destination blend factor to (as,
  as, as, as). This blend mode is only valid for
  D3DRS_SRCBLEND.
• The default values for the source blend factor
  and destination blend factor are
  D3DBLEND_SRCALPHA and D3DBLEND_INVSRCALPHA,
  respectively.

11
12.3 Transparency

• The alpha component is mainly used to specify the
  level of transparency of a pixel.
• Assuming that we have reserved 8 bits for the
  alpha component for each pixel, the valid
  interval of values for the alpha component would
  be 0, 255, where 0, 255 corresponds to 0,
  100 opacity.
• Thus, pixels with a black (0) alpha value are
  completely transparent, pixels with a gray alpha
  value of (128) are 50 transparent, and pixels
  with a white alpha value of (255) are completely
  opaque.
• In order to make the alpha component describe the
  level of transparency of the pixels, we must set
  the source blend factor to D3DBLEND_SRCALPHA and
  the destination blend factor to
  D3DBLEND_INVSRCALPHA. These values also happen to
  be the default blend factors.

12
12.4 Alpha Channel

• Instead of using the alpha components computed
  from shading, we can obtain alpha info from a
  textures alpha channel.
• The alpha channel is an extra set of bits
  reserved for each texel that stores an alpha
  component.
• When the texture is mapped to a primitive, the
  alpha components in the alpha channel are also
  mapped, and they become the alpha components for
  the pixels of the textured primitive.

13
An 8-bit grayscale map representing the alpha
channel of a texture
A textured quad, where the alpha channel
specifies the transparency of the quad
14
12.5 Specifying the Source of Alpha

• By default, if the currently set texture has an
  alpha channel, the alpha is taken from the alpha
  channel.
• If no alpha channel is present, the alpha is
  obtained from the vertex color.
• However, you can specify which source to use
  (diffuse color or alpha channel) with the
  following render states
• // compute alpha from diffuse colors during
  shading
• Device-gtSetTextureStageState(0, D3DTSS_ALPHAARG1,
  D3DTA_DIFFUSE)
• Device-gtSetTextureStageState(0, D3DTSS_ALPHAOP,
  D3DTOP_SELECTARG1)
• // take alpha from alpha channel
• Device-gtSetTextureStageState(0, D3DTSS_ALPHAARG1,
  D3DTA_TEXTURE)
• Device-gtSetTextureStageState(0, D3DTSS_ALPHAOP,
  D3DTOP_SELECTARG1)

15
12.6 Sample Application Transparency

• The sample application draws a transparent teapot
  on top of a crate background.
• The alpha is taken from the material in this
  example.
• The application allows you to increase/decrease
  the alpha component interactively by pressing the
  A and S keys.
• The A key increases the alpha component the S
  key decreases it.
• The steps required to use blending are
• Set the blend factors D3DRS_SRCBLEND and
  D3DRS_DESTBLEND.
• If using the alpha component, specify the source
  (material or alpha channel).
• Enable the alpha blending render state.

16
Sample Application Transparency (Cont)

• For this sample, we instantiate the following
  self-explanatory global variables
• The Setup method sets up many things we have
  omitted most of the code that is not relevant to
  this chapter.
• With regard to blending, the Setup method
  specifies the source that the alpha should be
  taken from.

ID3DXMesh Teapot 0 // the
teapot D3DMATERIAL9 TeapotMtrl // the
teapots material IDirect3DVertexBuffer9
BkGndQuad 0 // background quad -
crate IDirect3DTexture9 BkGndTex 0 // crate
texture D3DMATERIAL9 BkGndMtrl // background
material
17
Sample Application Transparency (Cont)

• In this example we instruct the alpha to be taken
  from the diffuse component of the material.
• Notice that we set the teapot materials diffuse
  alpha component to 0.5, indicating that the
  teapot should be rendered at 50 transparency.
• We also set the blend factors here as well.
• Take note that we do not enable alpha blending in
  this method.
• The reason is that the alpha blending stage takes
  up additional processing and should only be used
  on the geometry that needs it.
• For instance, in this sample only the teapot
  needs to be rendered with alpha blending
  enabledthe quad does not. Therefore, we enable
  alpha blending in the Display function.

18
Sample Application Transparency (Cont)
bool InitGeometry( ) TeapotMtrl
d3dRED_MTRL TeapotMtrl.Diffuse.a 0.5f //
set alpha to 50 opacity BkGndMtrl
d3dWHITE_MTRL D3DXCreateTeapot(Device,
Teapot, 0) ...// Create background quad
snipped ...// Light and texture setup snipped //
use alpha in material's diffuse component for
alpha Device-gtSetTextureStageState(0,
D3DTSS_ALPHAARG1, D3DTA_DIFFUSE) Device-gtSetTextu
reStageState(0, D3DTSS_ALPHAOP, D3DTOP_SELECTA
RG1)
19
Sample Application Transparency (Cont)
// set blending factors so that alpha //
component determines transparency Device-gtSetRende
rState(D3DRS_SRCBLEND, D3DBLEND_SRCALPHA) Device-
gtSetRenderState(D3DRS_DESTBLEND,
D3DBLEND_INVSRCALPHA) ...// view/projection
matrix setup snipped return true

• In the Display function, we check to see if the A
  or S key was pressed and respond by increasing or
  decreasing the materials alpha value.
• Notice that the method ensures that the alpha
  value does not go outside the interval 0, 1.
• We then render the background quad.
• Finally, we enable alpha blending, render the
  teapot with alpha blending enabled, and then
  disable alpha blending.

20
Sample Application Transparency (Cont)
bool Render(float timeDelta) if( Device
) // Update // increase/decrease alpha via
keyboard input if( GetAsyncKeyState('A')
0x8000f ) TeapotMtrl.Diffuse.a 0.01f if(
GetAsyncKeyState('S') 0x8000f
) TeapotMtrl.Diffuse.a - 0.01f // force alpha
to 0, 1 interval if(TeapotMtrl.Diffuse.a gt
1.0f) TeapotMtrl.Diffuse.a 1.0f
21
Sample Application Transparency (Cont)
if(TeapotMtrl.Diffuse.a lt 0.0f) TeapotMtrl.Diffuse
.a 0.0f // Render Device-gtClear(0, 0,
D3DCLEAR_TARGET D3DCLEAR_ZBUFFER, 0xffffffff,
1.0f, 0) Device-gtBeginScene( ) // Draw the
background D3DXMATRIX W D3DXMatrixIdentity(W) D
evice-gtSetTransform(D3DTS_WORLD, W)
22
Sample Application Transparency (Cont)
Device-gtSetFVF(VertexFVF) Device-gtSetStreamSou
rce(0, BkGndQuad, 0, sizeof(Vertex)) Device-gtSetM
aterial(BkGndMtrl) Device-gtSetTexture(0,
BkGndTex) Device-gtDrawPrimitive(D3DPT_TRIANGLELIS
T, 0, 2) // Draw the teapot Device-gtSetRenderStat
e(D3DRS_ALPHABLENDENABLE, true) D3DXMatrixScalin
g(W, 1.5f, 1.5f, 1.5f) Device-gtSetTransform(D3D
TS_WORLD, W) Device-gtSetMaterial(TeapotMtrl)
Device-gtSetTexture(0, 0) Teapot-gtDrawSubset(0)
23
Sample Application Transparency (Cont)
Device-gtSetRenderState(D3DRS_ALPHABLENDENABLE,
false) Device-gtEndScene( ) Device-gtPresent(0,
0, 0, 0) return true
24
12.7 Summary

• Alpha blending allows combining the pixels of the
  primitive currently being rasterized with the
  pixel values previously written at the same
  locations on the back buffer.
• The blend factors allow us to control how the
  source and destination pixels are blended
  together.
• Alpha information can come from the diffuse
  component of the primitives material alpha
  channel of the primitives texture.