The borders sometimes won't be rendered properly

[Ma5t3rful]

#include "TGUI/Widgets/Button.hpp"
#include "TGUI/Widgets/HorizontalLayout.hpp"
#include <algorithm>
#include <functional>
#include <GLFW/glfw3.h>
#include <TGUI/Backend/GLFW-OpenGL3.hpp>
#include <TGUI/TGUI.hpp>


auto main (int,char**) -> int
{
    glfwInit();
    auto window = glfwCreateWindow(1000,300,"Bug",nullptr,nullptr);
    glfwMakeContextCurrent(window);
    tgui::Gui gui(window);
    const auto horizontal_layout = tgui::HorizontalLayout::create();
    horizontal_layout->setOrigin(.5f,.5f);
    horizontal_layout->setPosition("50%","50%");
    horizontal_layout->getRenderer()->setSpaceBetweenWidgets(20);
    horizontal_layout->setSize("90%", 40);
    std::array<tgui::Button::Ptr,10> buttons;
    std::ranges::generate(buttons,std::bind(tgui::Button::create,"Hello"));
    std::ranges::for_each(buttons,[&horizontal_layout](const auto &b){horizontal_layout->add(b);});
    gui.add(horizontal_layout);
    gui.mainLoop();
    glfwDestroyWindow(window);
}

Made this simple snippet to explain the bug. As you slowly resize the app you can see the borders start to flash and if you stop just at the right moment you can see that the borders are not rendered properly. Resulting in a cheap looking output. This happens more frequently if you have more complex layout on the window.

• OS: Linux
• Backend: tried with glfw and SDL, The bug persists.

Observed behavior

[tmccartney]

I have experienced the same behaviour using Raylib on linux.
From my (limited) understanding and small amount of searching it seems like a pixel alignment / subpixel rendering issue.

[texus]

While this could happen during rendering if the rectangles aren't aligned with the pixels (which was also my first guess), it appears that it is not the case here. TGUI already rounds the position of widgets to the nearest pixel and the sizes of the horizontal layout and buttons were all integers. Enabling anti-aliasing on the window also did nothing, which would have "fixed" pixel alignment issues.

I've debugged this and found the issue to be in the clipping code. There is a float that sometimes becomes e.g. 401.9999... and which is being casted to an int. When printing the value to cout it just prints 402, but after truncating to int or using std::floor it results in 401 instead of 402. This results in one pixel too much being clipped.

I'll fix it soon (hopefully, as I vaguely remember that there might have been a reason why I wanted floor instead of round).

[texus]

The OpenGL, GLES and Raylib renderers all had the same truncate bug. The SDL_GPU and SDL_Renderer renderers didn't have this issue, but when testing them they sometimes showed one pixel too much. So clipping was improved in those renderers as well.

With the code snippet provided above, the right border of the rightmost button may still disappear sometimes even with the fixed code. This is due to pixel alignment and only happens when the width of the buttons isn't an integer. I've been testing several approaches to change rounding, but ultimately I didn't find a good solution for this. That's just what you get from trying to position a non-integer sized button inside a non-integer sized container.
If you add glfwWindowHint(GLFW_SAMPLES, 4); directly below the glfwInit(); line then at least you would get part of a border. The right border of each button would change from a single black pixel to 2 grey pixels, and one of these grey pixels would still be shown for the rightmost button.

[Ma5t3rful]

With the code snippet provided above, the right border of the rightmost button may still disappear sometimes even with the fixed code.

Thank You so much for your effort. I tested the nightly build and can confirm that the top and the bottom borders are rendered properly. But unfortunately, The buggy borders on the right are the most noticeable ones.

If you add glfwWindowHint(GLFW_SAMPLES, 4); directly below the glfwInit(); line then at least you would get part of a border. The right border of each button would change from a single black pixel to 2 grey pixels, and one of these grey pixels would still be shown for the rightmost button.

Sadly, even with glfwWindowHint(GLFW_SAMPLES,4) you can sometimes get to an almost non-existent border. Indeed It make things better (sometimes?) but it makes other widgets a bit blurry.

I hope you manage to fix the issue with the right borders as well.
Regards.

[texus]

I'll reopen this so that I don't forget that I still need to have a look at ways to fix the right border when I have more time.