Tutorial to make an OpenGL background window with accelerated transparency under Windows 7/10

This tutorial will highlight how to make a software running with window background transparency without buffer copy.

This tutorial is base on the Qt example "Cube OpenGL ES 2.0 example" to make a simple cube in OpenGL.

Dependencies

• Qt

You need Qt5 and Qt Creator to compile it.

What you need to do to make it work on your own app.

Make the window transparent

    // Opacity to 1 to make the window fully opaque
    setWindowOpacity(1);
    
    // Remove the frame of the window
    setWindowFlags(windowFlags() | Qt::FramelessWindowHint | Qt::SubWindow);
    
    // Instruct Qt to use a translucent background
    setAttribute(Qt::WA_TranslucentBackground, true);

Make the OpenGL buffer transparent

• Allow the window to be transparent

    // Clear color argument for Alpha is set to 0, to clear it to be transparent !
    glClearColor(0, 0, 0, 0);

• Set the OpenGL Depth buffer to 32bits by adding 8 bits for alpha.

    QSurfaceFormat format;
    format.setDepthBufferSize(24);
    
    // Add transparency to the buffer
    format.setAlphaBufferSize(8);

Make your object transparent too !!

• Fragment shader

    // Set a transparency as the output final color if you want to make your object transparent as well.
    gl_FragColor.a = 0.8;

• Render function

    // Set the transparency to the scene to use the transparency of the fragment shader
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Make the window on top of others

    // Window message to enable the window to stay on top of all others windows.
    SetWindowPos((HWND)widget.winId(), HWND_TOPMOST, 0, 0, 0, 0, SWP_ASYNCWINDOWPOS | SWP_SHOWWINDOW | SWP_NOMOVE | SWP_NOSIZE);

That's it, have fun !!

Change log

- Version 1.0.0
    * Release