Drawing a transparent image with OpenGL ES in a UWP XAML app

In my previous post Testing XAML App for OpenGL ES on Windows 10 Mobile Device I described the changes I made to UWP application based on “XAML App for OpenGL ES (Universal Windows)” template to demonstrate some strange effect related to the transparency of the image drawn with OpenGL ES in SwapChainPanel. But I did yet another experiment with this application and got some beautiful pictures that demonstrate what happens if I make the scene completely transparent with the following code:

void SimpleRenderer::Draw()
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

and then change the main grid background in XAML from black to some other color:

<Grid x:Name="mainGrid" Background="Black">
    <SwapChainPanel x:Name="swapChainPanel">
        <StackPanel Orientation="Vertical">
            <Button Content="Red" Click="Red_Click" Margin="10"/>
            <Button Content="Green" Click="Green_Click" Margin="10"/>
            <Button Content="Black" Click="Black_Click" Margin="10"/>

When the application starts with the black background it shows completely opaque cube:


with the red background I get this:


green background has the following effect:


Obviously, those images are the result of some specific blending operation that merges OpenGL with XAML background. The only thing that is not quite clear for me, is it possible to change the parameters of this binding operation to typical glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA), for example? This will allow to put a background image to the grid and draw my transparent 3D scene on it.

As far as I see, theoretically there can be something like this in DirectX shader:

BlendState AlphaBlendingOn
    BlendEnable[0] = TRUE;
    DestBlend = INV_SRC_ALPHA;
    SrcBlend = SRC_ALPHA;

SetBlendState(AlphaBlendingOn, float4(0.0f, 0.0f, 0.0f, 0.0f), 0xFFFFFFFF);

but the search of “BlendState” in \angle\src\*.* gives only *.h and *.cpp files, so I wonder if anyone can tell me where is the main shader that renders OpenGL content to DirectX back buffer.

I commited all the changes to https://github.com/dmitriano/AppForOpenGLES2, feel free to get the sources and test. The buttons for changing the background color do not work for some reason.

Leave a Reply

Your email address will not be published. Required fields are marked *