Page 1 of 2

Rendering errors for nested objects

Posted: 26 Oct 2017, 10:53
by AndreasEnscape
Aiming at implementing an overlay, I am comfronted with what like a rendering problem. I counterchecked with a WPF-Implementation where there are no such flaws, suggesting that it is not an xaml/code behind problem.

The following snippets however are copied here for reference.
Short idea and problem description: Within a grid, enable an help overlay (basically a button that stretches over the complete grid). When this overlay is visible (opacity > 0 and < 1 !), sporadically there are artifacts, see image renderingProblem02.png, th darker one. In our case, this is a listbox with elements in it. The problem can be rather easily reproduced by changing the window with. The artifacts are both the line and disturbances in the listbox. The reason for those artifacts seem to be, that the listbox, when turning overlay on with the top left button. is shifted to the right one pixel. Seems to be some rounding error, I guess. This shift produces the artifacts. renderingProblem01.png shows the situation where the overlay is off, no rendering issues here.

Snippet 1 shows overlay and listbox call in xaml.
<ViewExpander x:Name="viewExpander" DataContext="{Binding ViewExpanderViewModel}" 
                                       Grid.Column="2" Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Right" Grid.ZIndex="1"/>
                                       
                                        <Button DataContext="{Binding ViewExpanderViewModel}" Command="{Binding Path=DeactivateHelpOverlayCommand}" Grid.ZIndex="0"
            Grid.RowSpan="4" Grid.ColumnSpan="3" Visibility="Hidden" Background="{StaticResource HelpOverlayBackgroundColor}">
        <Button.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=HelpActive}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard FillBehavior="Stop">
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.6" Duration="0:0:0.3"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Path=HelpActive}" Value="False">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard FillBehavior="Stop">
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.3"/>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Hidden}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>

    </Button>
Snippet 2 is the respective part of the listbox/expander itself (please ignore the not recommended Canvas implementation for now...):
 <Canvas x:Name="ViewExpanderMain" Width="{StaticResource ViewExpanderHelpWidth}" Height="{StaticResource ViewExpanderHelpHeight}" 
            Visibility="{Binding ElementName=ViewsListBox, Path=HasItems, Converter={StaticResource BoolToVisConv}}">
        <Canvas.RenderTransform>
            <TranslateTransform>
                <TranslateTransform.Y>-60</TranslateTransform.Y>
            </TranslateTransform>
        </Canvas.RenderTransform>

        <Canvas x:Name="ScrollCanvas" Background="Transparent" Canvas.ZIndex="50"
                Canvas.Top="90" Canvas.Right="0" Width="180" Height="530">
            <Canvas.RenderTransform>
                <TranslateTransform>
                    <TranslateTransform.X>160</TranslateTransform.X>
                </TranslateTransform>
            </Canvas.RenderTransform>
            <Path Opacity="0.8" Fill="AntiqueWhite" StrokeThickness="0" StrokeDashCap="Round" Data="m0,0 v120 l20,30 v380 h162 v-530"/>
            <ToggleButton x:Name="InfoButton" Canvas.Top="11" Canvas.Left="3" Width="16" Height="16" Background="Transparent"
                          IsChecked="{Binding Path=HelpActive, Mode=TwoWay}"/>
            <ToggleButton x:Name="PinButton" Canvas.Top="29" Canvas.Left="3" Width="16" Height="16"/>
            <StackPanel Canvas.Left="22" Canvas.Top="10" Width="160" Height="518">
                <Button x:Name="PageUpButton" Height="16" Style="{StaticResource ScrollButtonStyle}" Click="PageUpButton_OnClick">
                    <Path Data="M0,5 l10,-3 l10,3" StrokeThickness="1" Stroke="White"/>
                </Button>
                <ListBox x:Name="ViewsListBox" ScrollViewer.VerticalScrollBarVisibility="Hidden" Height="486" BorderThickness="0"
                         ItemsSource="{Binding Path=ViewListEntries, Mode=OneWay}" Background="Gray">
                    <ListBox.ItemContainerStyle>
                        <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
                            <Setter Property="Padding" Value="0"/>
                            <Setter Property="BorderThickness" Value="0"/>
                            <Setter Property="Margin" Value="0,4,0,4"/>
                        </Style>
                    </ListBox.ItemContainerStyle>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <Button Width="160" Height="90" Style="{StaticResource ViewImageButton}">
                                <Canvas>
                                    <Image Source="{Binding Path=ViewTexture}" Width="160" Height="90" />
                                    <Border Opacity="0.8" Background="Black" Canvas.Top="70" Canvas.Left="30" Width="130" Height="20" CornerRadius="10,0,0,0"/>
                                    <TextBlock Canvas.Top="73" Canvas.Left="40" Width="110" Height="25" Foreground="White" FontSize="13" FontWeight="ExtraLight" Text="{Binding ViewName}" TextTrimming="CharacterEllipsis"/>
                                </Canvas>
                            </Button>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
                <Button x:Name="PageDownButton" Height="16" Style="{StaticResource ScrollButtonStyle}" Click="PageDownButton_OnClick">
                    <Path Data="M0,0 l10,3 l10,-3" StrokeThickness="1" Stroke="White"/>
                </Button>
            </StackPanel>
        </Canvas>
    </Canvas>
Anyone with similar experiences? As WPF does not have this issues, I consider filing a bugreport. But I wanted to post the problem beforehand.

Best regards,
Andy

Re: Rendering errors for nested objects

Posted: 28 Oct 2017, 02:59
by nokola
I see similar artifacts in my app, haven't been able to pinpoint them yet. Here's a sample with a gray rectangle (with the clock) rendered on top of another gray rectangle (the background.) I occasionally see a single-pixel artifact line, haven't been able to figure out a simple repro yet.
OnePixelRenderIssue.png
OnePixelRenderIssue.png (70.42 KiB) Viewed 1932 times

Re: Rendering errors for nested objects

Posted: 30 Oct 2017, 13:05
by sfernandez
It seems a bug in the rendering of opacity groups, parts of the UI tree using UIElement.Opacity.
Could you please report it in our bugtracker?

By the way, if you could use Brush.Opacity or color Alpha channel in any of these cases, apart from workaround this bug, it would be a lot more efficient.

Re: Rendering errors for nested objects

Posted: 02 Nov 2017, 08:20
by AndreasEnscape
Bugreport is filed.

Re: Rendering errors for nested objects

Posted: 02 Nov 2017, 18:01
by jsantos
Thanks for the report! We will work on this soon. Anyway, remember the recommendation about trying to use Brush.Opacity or color Alpha channel whenever possible to avoid global opacity. Global opacity always requires an intermediate render to texture. Performance is always better if it can be avoided, not always possible though.

Re: Rendering errors for nested objects

Posted: 17 Nov 2017, 10:20
by Jan
To let you guys know, we could fix this issue simply by switching from half float UVs to 32bit UVs:
void GLRenderDevice::FillCaps()
{
    m_caps = {};
    ...
    //! @note we suppress half float uv usage due to precision issues!
    m_caps.halfFloatUV = false; // IsSupported(Extension::ARB_half_float_vertex) || IsSupported(Extension::OES_vertex_half_float), 
    ...
}

Re: Rendering errors for nested objects

Posted: 17 Nov 2017, 17:30
by nokola
That's good news and the right fix too! I looked for FillCaps() and couldn't find it in my Unity project. Is there a way to set noesis today (without waiting for next update) to 32-bit UV and try?

Re: Rendering errors for nested objects

Posted: 17 Nov 2017, 17:31
by nokola
Bugreport is filed.
Thanks AndreasEnscape - do you mind pasting the link to the report here for reference?

Re: Rendering errors for nested objects

Posted: 17 Nov 2017, 17:53
by jsantos
To let you guys know, we could fix this issue simply by switching from half float UVs to 32bit UVs:
Wow, this is a great discovery! Thanks a lot for reporting. We had to disable half float in text rendering long time ago, and probably we need to do the same for offscreens, because screens are getting bigger and bigger...

Will be fixed in the next version.

Re: Rendering errors for nested objects

Posted: 17 Nov 2017, 17:54
by jsantos
Thanks AndreasEnscape - do you mind pasting the link to the report here for reference?
Reports are still private. Could you please create a new ticket for you? We will try to send you a quick hot fix for evaluation.