Sync issues and artifacts when redrawing on layout change

[sigmasaur]

I apologize if this is not the right place to report this. I'm developing a small WPF application that needs to draw some complex 2D graphics, for which I would like to use a modified version of SkiaSharp's SKGLElement which is based on GLWpfControl. I plan to have a single instance of GLWpfControl via SKGLElement so I can draw everything on that surface. The UI should be responsive so the GLWpfControl should redraw its contents every time one of the placeholder windows is moved or resized. In the following example code, I removed all references to SkiaSharp to demonstrate that the issue can be traced back to GLWpfControl:

MainWindow.xaml:

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"
        xmlns:tk="clr-namespace:OpenTK.Wpf;assembly=GLWpfControl"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Canvas IsHitTestVisible="False">
            <tk:GLWpfControl x:Name="MyElement" Loaded="MyElement_Loaded" Render="MyElement_Render"/>
        </Canvas>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <!-- placeholder window -->
            <Canvas Background="Transparent" Name="MyCanvas" Grid.Column="0" SizeChanged="MyCanvas_SizeChanged"/>
            <GridSplitter Background="DarkGray" Grid.Column="1" Width="30" HorizontalAlignment="Stretch"/>
        </Grid>
    </Grid>
</Window>

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void MyCanvas_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        MyElement.InvalidateVisual();
    }

    private void MyElement_Loaded(object sender, RoutedEventArgs e)
    {
        MyElement.Width = SystemParameters.WorkArea.Width;
        MyElement.Height = SystemParameters.WorkArea.Height;

        MyElement.Start(new GLWpfControlSettings()
        {
            MajorVersion = 2,
            MinorVersion = 1,
        });
    }

    private void MyElement_Render(TimeSpan obj)
    {
        GL.ClearColor(System.Drawing.Color.White);
        GL.Clear(ClearBufferMask.ColorBufferBit);

        GL.Color3(System.Drawing.Color.Red);
        Point p = MyCanvas.TranslatePoint(new Point(0, 0), this);
        GL.Rect(
            +2 * (p.X / MyElement.Width - 0.5),
            -2 * ((p.Y + MyCanvas.ActualHeight) / MyElement.Height - 0.5),
            +2 * ((p.X + MyCanvas.ActualWidth) / MyElement.Width - 0.5),
            -2 * (p.Y / MyElement.Height - 0.5)
        );
    }
}

In the above code, I expected the red portion to fully cover the left part of the screen at all times. However, if I drag the GridSplitter left and right across the screen, I can see some artifacts near the GridSplitter that become more noticeable the faster I drag it:

I tested this on two other machines and the issue does not arise on one of them so it's definitely machine-dependent. Is this expected behavior? I'm using version 4.3.4.

[NogginBops]

I'm not sure what could be causing this. Wpf does it's layouting in a very asynchronous way and I don't know enough about Wpf to know if this is expected or if this could be something our code is responsible for. If you add another strongly colored control to the split does it still behave like this or does it work as expected?

[sigmasaur]

It does still behave like that. I made the GLWpfControl transparent, moved it in front of everything else and set the background color of MyCanvas to green and I get the same result. I'm just starting to learn WPF but I find this behavior a little odd since GLWpfControl hooks into the rendering pipeline by writing onto the DrawingContext. I did another test and switched the GL.Color from red to blue back and forth and it looks like WPF often presents the wrong frame or even a mixture of two different frames.

[sigmasaur]

I messed around a bit with the code of GLWpfControlRenderer and discovered that the more D3DImages I use in a round-robin fashion, the less I see of this issue. I don't know how it works internally but my guess is WPF doesn't have enough time to read from the D3DImage before it gets written again during the next frame. Hope this helps a little.