DirectX11 - AlphaBlending Rendering problem

Question

So.. I completed this tutorial on the following site rastertek.com/dx11tut12.html. The tutorial is all about rendering Text in an orthographic space. Basically just 2D rendering on DirectX 11.

Now that I finished i wanted to experiment with it. In the original tutorial he uses a Black background texture with the different letters in white, then he uses AlphaBlending to make the pipeline omit the background when drawing to the backbuffer saying that the alpha value for when the sample color is black is 0.

//Initializing the AlphaEnabledBlendingState
D3D11_BLEND_DESC blendStateDescription;
ZeroMemory(&blendStateDescription, sizeof(D3D11_BLEND_DESC));

blendStateDescription.RenderTarget[0].BlendEnable = TRUE;
blendStateDescription.RenderTarget[0].BlendOp = D3D11_BLEND_OP_ADD;
blendStateDescription.RenderTarget[0].BlendOpAlpha = D3D11_BLEND_OP_ADD;
blendStateDescription.RenderTarget[0].DestBlend = D3D11_BLEND_INV_SRC_ALPHA;
blendStateDescription.RenderTarget[0].DestBlendAlpha = D3D11_BLEND_ZERO;
blendStateDescription.RenderTarget[0].RenderTargetWriteMask = 0x0f;
blendStateDescription.RenderTarget[0].SrcBlend = D3D11_BLEND_ONE;
blendStateDescription.RenderTarget[0].SrcBlendAlpha = D3D11_BLEND_ONE;

result = this->m_device->CreateBlendState(&blendStateDescription, &this->m_alphaEnableBlendingState);
if (FAILED(result))
{
    return false;
}

_

//Setting the AlphaEnabledBlendingState as the active AlphaBlendState
float blendFactor[4];

blendFactor[0] = 0.0f;
blendFactor[1] = 0.0f;
blendFactor[2] = 0.0f;
blendFactor[3] = 0.0f;

this->m_deviceContext->OMSetBlendState(this->m_alphaEnableBlendingState, blendFactor, 0xffffffff);

And the PixelShader I'm using to render the Text.

Texture2D shaderTexture;
SamplerState SampleType;

cbuffer PixelBuffer
{
    float4 pixelColor;
};

struct PixelInputType
{
    float4 position : SV_POSITION;
    float2 tex : TEXCOORD0;
};

float4 main(PixelInputType input) : SV_TARGET
{
    float4 color;

    color = shaderTexture.Sample(SampleType, input.tex);

    //If the color is black on the texture then treat this pixel as transparent
    if (color.r == 0.0f)
    {
        color.a = 0.0f;
    }
    //If the color is other than black on the texture then this is a pixel in the font so draw it using the font pixel color
    else
    {
        color.a = 1.0f;
        color *= pixelColor;
    }

    return color;
}

This is the result

So i said, let's change the background of the texture to green, (0, 255, 0). So i did and changed the shader to look for a green color to set his alpha value to 0.

Looking for Green instead of black

//If the color is green on the texture then treat this pixel as transparent
if (color.r == 0.0f && color.g == 1.0f && color.b == 0.0f)
{
    color.a = 0.0f;
}

But the result is not what i expected. There's also the prove that the texture background is green.

This is the result

So, the question is... What am I doing wrong? what step am I skiping? I see that the color is totally transparent, as it should be.

Thank you for the time and help you can provide!

Answer 1

The problem here is the blendstate, which leads the font background to be added to the screen background. So if the font background is black, everything is ok, but if you're using green it will be added to the blue background resulting in cyan.

You blendstate resulting in following blendoperation:

ResultColor = SrcColor * 1 + DestColor * (1-SrcAlpha)

This adds your transparent font background (Alpha = 0) to the full screen background (in this case 1-Alpha = 1)

But to hide your green background with transparency, so you need

ResultColor = SrcColor * SrcAlpha + DestColor * (1-SrcAlpha)

This will hide your font background, as it will be multiplied with 0, so the result is the remaining screen background.

Leading to the following changes:

blendStateDescription.RenderTarget[0].BlendEnable = TRUE;
blendStateDescription.RenderTarget[0].RenderTargetWriteMask = 0x0f;

blendStateDescription.RenderTarget[0].BlendOp = D3D11_BLEND_OP_ADD;
blendStateDescription.RenderTarget[0].SrcBlend = D3D11_BLEND_SRC_ALPHA;
blendStateDescription.RenderTarget[0].DestBlend = D3D11_BLEND_INV_SRC_ALPHA;

blendStateDescription.RenderTarget[0].BlendOpAlpha = D3D11_BLEND_OP_ADD;
blendStateDescription.RenderTarget[0].DestBlendAlpha = D3D11_BLEND_ZERO;
blendStateDescription.RenderTarget[0].SrcBlendAlpha = D3D11_BLEND_ONE;