Blending. To blend (combine) the pixels. To render semi-transparent objects. Currently Rasterizing. Previous on the Back Buffer.

Transcription

1 Blending 4 th Week, 2009 Blending To blend (combine) the pixels To render semi-transparent objects Source Pixel p ij Currently Rasterizing Destination Pixel b ij Previous on the Back Buffer Opaque Teapot Transparent Teapot

2 Objectives To understand how blending works and how to use it To learn about the different blend modes that t Direct3D supports To find out how the alpha component can be used to control the transparency of a primitive To learn how we can prevent a pixel from being drawn to the back buffer altogether by employing the alpha test Blending Equation (1) Combining the pixel values that are currently being computed (source pixel) with the pixel values previously written on the back buffer (destination pixel) Draw objects that do not use blending first Sort the objects that use blending by their distance from the camera Draw the objects that use blending in a back-to-front order

3 Blending Equation (2) Alpha blending equation OutputPixel = SourcePixel SourceBlendFactor + DestPixel DestBlendFactor Variables: 4D color vector (r, g, b, a) ) : component-wise multiplication Source and destination blend factors: to modify the original source and destination pixels in a variety of ways Enabling blending (default: disabled) Device->SetRenderState(D3DRS D3DRS_ ALPHABLENDENABLE, true); Device->SetRenderState(D3DRS_ALPHABLENDENABLE, false); Only be enabled for the geometry that needs it Try to batch triangles that use blending and render them at once Blending Equation (3) The + operator used in the blending equation can be changed Device->SetRenderState(D3DRS_BLENDOP, D3DBLENDOP_SUBTRACT); D3DBLENDOP_ADD: OutputPixel = SourcePixel SourceBlendFactor + DestPixel DestBlendFactor D3DBLENDOP_SUBTRACT: OutputPixel = SourcePixel SourceBlendFactor DestPixel DestBlendFactor D3DBLENDOP_REVSUBTRACT: OutputPixel = DestPixel DestBlendFactor SourcePixel SourceBlendFactor D3DBLENDOP_MIN: OutputPixel = min(sourcepixel SourceBlendFactor, DestPixel DestBlendFactor) D3DBLENDOP_MAX: OutputPixel = max(sourcepixel SourceBlendFactor, DestPixel DestBlendFactor)

4 Blend Factors (1) Setting different combinations for the source and destination blend factors dozens of different blending effect Device->SetRenderState(D3DRS_SRCBLEND, Source); Device->SetRenderState(D3DRS_DESTBLEND, Destination); D3DBLEND_ZERO: blendfactor=(0, 0, 0, 0) D3DBLEND_ONE: blendfactor=(1, 1, 1, 1) D3DBLEND_SRCCOLOR: blendfactor=(r s, g s, b s, a s ) D3DBLEND_INVSRCCOLOR: blendfactor=(1 r s, 1 g s, 1 b s, 1 a s ) D3DBLEND_SRCALPHA: blendfactor=(a s, a s, a s, a s ) D3DBLEND_INVSRCALPHA: blendfactor=(1 aa s, 1 a s, 1 a s, 1 a s ) Blend Factors (2) D3DBLEND_DESTCOLOR: DESTCOLOR: blendfactor=(r d, g d, b d,a d ) D3DBLEND_INVDESTCOLOR: blendfactor=(1 r d, 1 g d, 1 b d, 1 a d ) D3DBLEND_DESTALPHA: blendfactor=(a d, a d, a d, a d ) D3DBLEND_INVDESTALPHA: blendfactor=(1 a d, 1 a d, 1 a d, 1 a d ) D3DBLEND_SRCALPHASAT: blendfactor=(f, f, f, 1) where f=min(a s, 1-a d ) D3DBLEND_BOTHINVSRCALPHA: source blend factor=(1 a s, 1 a s, 1 a s, 1 a s), destination blend factor=(a s, a s, a s, a s ), only valid for D3DRS_SRCBLEND Default: Source D3DBLEND_SRCALPHA Destination D3DBLEND_INVSRCALPHA

5 Blend Factors (3) Setting the source and destination blend factor directly in an effect file pass P0 { vertexshader = compile vs_2_0 VS(); pixelshader = compile ps_2_0 PS(); } AlphaBlendEnable = true; SrcBlend = One; DestBlend = One; BlendOp = RevSubtract; To blend the alpha component differently than the RGB components Set the D3DRS_SEPARATEALPHABLENDENABLE render state t to true Blend Factor Example 1 To keep the original destination pixel and not overwrite or blend it with the source pixel Source blend factor = D3DBLEND_ZERO Destination blend factor = D3DBLEND_ONE OutputPixel = SourcePixel SourceBlendFactor + DestPixel DestBlendFactor OutputPixel = SourcePixel (0, 0, 0, 0) + DestPixel (1, 1, 1, 1) OutputPixel = (0,0,0,0)+ 0) DestPixel OutputPixel = DestPixel

6 Blend Factor Example 2 To directly two images together to form a new image Source blend factor = D3DBLEND_ONE Destination blend factor = D3DBLEND_ONE OutputPixel = SourcePixel SourceBlendFactor + DestPixel DestBlendFactor OutputPixel = SourcePixel (1, 1, 1, 1) + DestPixel (1, 1, 1, 1) OutputPixel = SourcePixel + DestPixel Blend Factor Example 3 To multiply a source pixel with its corresponding destination pixel Source blend factor = D3DBLEND_ZERO Destination blend factor = D3DBLEND_SRCCOLOR OutputPixel = SourcePixel SourceBlendFactor + DestPixel DestBlendFactor OutputPixel = SourcePixel (0, 0, 0, 0) + DestPixel SourcePixel OutputPixel = DestPixel SourcePixel

7 Blend Factor Example 4 To blend the source and destination pixels based on the transparency percent of the source pixel Alpha: percent to control the transparency 0 100% transparent % transparent 1.0 0% transparent or 100% opaque Source blend factor = D3DBLEND_SRCALPHA Destination blend factor = D3DBLEND_INVSRCALPHA OutputPixel = SourcePixel SourceBlendFactor + DestPixel DestBlendFactor OutputPixel = SourcePixel (a s, a s, a s, a s ) + DestPixel (1 a s, 1 a s, 1 a s, 1 a s ) OutputPixel = a s SourcePixel +(1 a s ) DestPixel Teapot Demo

8 Result Teapot Demo Drawing a Transparent Teapot (1)

9 Drawing a Transparent Teapot (2) Drawing a Transparent Teapot (3)

10 Teapot with TexAlpha Demo Result Teapot with TexAlpha Demo

11 Transparent Teapot Demo with Texture Alpha Channel (1) Alpha channel Fourth channel to add alpha information to a texture To control the transparency at a finer level of detail (e.g. at pixel level) RGB Channels Alpha Channel Transparent Teapot Demo with Texture Alpha Channel (2) Ex) brick.jpg jpg (24-bit RGB texture) To change the format to support an alpha channel Format Change Surface Format DXT3 format

12 Transparent Teapot Demo with Texture Alpha Channel (3) Ex) brick.jpg jpg bricka.dds dds (DXT3 format) File Open Onto Alpha Channel Of This Texture alpha.jpg Transparent Teapot Demo with Texture Alpha Channel (4)

13 Transparent Teapot Demo with Texture Alpha Channel (5) The Alpha Test (1) To discard a pixel (i.e., not render it) based on its alpha value in comparison to some reference value a s : the source alpha component ref: an application-defined reference value IF a s ref == true THEN accept pixel ELSE reject pixel : an operation specified by the D3DCMPFUNC enumerated type typedef enum _D3DCMPFUNC { D3DCMP_NEVER = 1, D3DCMP_LESS = 2, D3DCMP_EQUAL = 3, D3DCMP_LESSEQUAL = 4, D3DCMP_GREATER = 5, D3DCMP_NOTEQUAL = 6, D3DCMP_GREATEREQUAL = 7, D3DCMP_ALWAYS = 8, D3DCMP_FORCE_DWORD = 0x7fffffff } D3DCMPFUNC;

14 The Alpha Test (2) : an operation specified by the D3DCMPFUNC (cont ) D3DCMP_NEVER: alpha test always fails (the pixel is always rejected) D3DCMP_LESS: replace with < operator D3DCMP_EQUAL: replace with == operator D3DCMP_LESSEQUAL: replace with operator D3DCMP_ GREATER: replace with > operator D3DCMP_NOTEQUAL: replace with!= operator D3DCMP_GREATEREQUAL: replace with operator D3DCMP_ALWAYS: alpha test always succeeds (the pixel is always drawn) The Alpha Test (3) Ex) only pixels with alpha value 100 are drawn Device->SetRenderState(D3DRS_ALPHATESTENABLE, true); Device->SetRenderState(D3DRS_ALPHAFUNC, D3DCMP_GREATEREQUAL); Device->SetRenderState(D3DRS_ALPHAREF, 100); Setting the alpha test in an effect file in a pass block block pass P0 { vertexshader = compile vs_2_0 VS(); pixelshader = compile ps_2_0 _ PS(); } AlphaTestEnable = true; AlphaFunc = GreaterEqual; AlphaRef = 100;

15 Gate Demo Result Gate Demo

16 Gate Demo Alpha Test A gate texture with alpha channel The pixels with black alpha rejected by the alpha test not drawn RGB Channels Alpha Channel Building the Gate Geometry

17 Drawing the Gate (1) Drawing the Gate (2)

18 Exercises When trees are far away, a billboarding technique is used for efficiency. That is instead of rendering the geometry for a full 3D tree, a 2D polygon is used with a picture of a 3D tree painted on it. RGB Channels Alpha Channel Billboarding (1) To make sure that the billboard always faces the camera For trees billboards will generally be aligned with y-axis and just face the camera in the xz-plane r World matrix x ry r 0 c z x px, 0, cz f = ux u y uz 0 cx px, 0, cz r f x f y f 0 u = ( 0,1, 0) z r r r px py pz 1 = u f c r : the position of the camera in world space p r r ( pz ) ( p ) : the billboard s world space position z

19 Billboarding (2) To compute the world matrix of a vertex in the vertex shader To avoid the inefficiency the hardware likes to draw large batches at a time OutputVS AABillBoardVS(float3 posl: POSITION0, float3 bboffset: TEXCOORD0, float2 tex0: TEXCOORD1 ) { OutputVS outvs = (OutputVS)0; float3 tempposw = posl + bboffset; float3 look = geyeposw tempposw; look.y = 0.0f; look = normalize(look); float3 up = float3(0.0f, 0f 1.0f, 0.0f); 0f) float3 right = cross(up, look); Billboarding (3) } float3x3 R; R[0] = right; R[1] = up; R[2] = look; float3 posw = mul(posl, R) + bboffset; outvs.posh = mul(float4(posw, 1.0f), gwvp); outvs.tex0 = tex0; return outvs;