Text Rendering with Transformations Artifacts (Unity)

ARPP3 · 06 Jul 2023, 01:58

Hi all, this is my first post! I've been using Noesis for only a few days now experimenting,

I attached a screenshot showing some strange behaviour with the text, when it's rendered at an angle. It seems to have multiple shear-lines going through the lettering, causing unsightly artifacts. How can I take steps to avoid this happening? I've tried toggling on/off PPAA and Subpixel rendering, as well as tagging the text block with noesis:Element.PPAAMode="Disabled". Are there options for other anti aliasing modes aside from per primitive antialiasing in Unity? This render pass has 8x MSAA. When I disable PPAA the artifacts are there, just, not ant aliased.

Specifically, look at the "L" and "Y" in PLAY and the "M" and "Y" in MULTIPLAYER. I hope you can also notice these,

Any help to improve this would be appreciated, thank you :) And as I am very new to noesis and xaml, it's safe to assume I know very little.

Here's my repro xaml. This was rendered using the unity package for Noesis 3.2.1 in Unity 2022.3.0

<Grid>        
    <Viewbox Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid Width="1920" Height="1080">
            <Grid.Resources>
                <ControlTemplate x:Key="MenuButton" TargetType="{x:Type Button}">
                    <Grid>
                        <Border Background="#0b0b0b" Opacity="0.7" CornerRadius="5" Margin="5" Height="80" Padding="20">
                            <TextBlock Text="{TemplateBinding Content}" Foreground="White" FontSize="45" HorizontalAlignment="Stretch" TextAlignment="Left" VerticalAlignment="Center"/>
                        </Border>

                        <noesis:Element.Transform3D>
                            <noesis:CompositeTransform3D RotationY="-5" TranslateZ="0" CenterX="0" />
                        </noesis:Element.Transform3D>
                    </Grid>
                </ControlTemplate>
            </Grid.Resources>

            <Grid x:Name="Main_Options" Width="500" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0">
                <StackPanel Margin="0"  VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                    <Button Content="PLAY"  Template="{StaticResource MenuButton}"/>
                    <Button Content="MULTIPLAYER"  Template="{StaticResource MenuButton}"/>
                    <Button Content="NEWS"      Template="{StaticResource MenuButton}"/>
                    <Button Content="SETTINGS"  Template="{StaticResource MenuButton}"/>
                    <Button Content="QUIT"      Template="{StaticResource MenuButton}"/>
                </StackPanel>
            </Grid>
        </Grid>
    </Viewbox>
</Grid>

06 Jul 2023, 10:49

Hi and welcome to the Noesis forums!

The artifacts you see are produced by the use of an opacity group inside a 3D transformed object. This is a known issue we are working on and solving for the next release.

Anyway I recommend you read the Optimizations tutorial, because in many situations, like this one, you can avoid opacity groups and just move the opacity to the Brush (see the code attached below). With that change you won't see any artifacts.

I also suggest you use implicit styles to avoid setting many times the same properties.

And just a doubt, wouldn't make more sense to define the 3D transformation for the whole panel, instead of applying it to each button?

<Grid>
    <Viewbox Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid Width="1920" Height="1080">
            <Grid.Resources>
                <ControlTemplate x:Key="MenuButton" TargetType="{x:Type Button}">
                    <Grid Margin="5">
                        <Border Background="#bb0b0b0b" CornerRadius="5" Height="80"/>
                        <TextBlock Text="{TemplateBinding Content}" Foreground="#ccffffff" FontSize="45" HorizontalAlignment="Stretch" TextAlignment="Left" VerticalAlignment="Center" Margin="20"/>
                    </Grid>
                </ControlTemplate>
                <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
                  <Setter Property="Template" Value="{StaticResource MenuButton}"/>
                </Style>
            </Grid.Resources>

            <Grid x:Name="Main_Options" Width="500" Height="auto" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="30,0,0,0">
                <StackPanel>
                    <noesis:Element.Transform3D>
                        <noesis:CompositeTransform3D RotationY="-5" TranslateZ="0" CenterX="0" />
                    </noesis:Element.Transform3D>
                    <Button Content="PLAY"/>
                    <Button Content="MULTIPLAYER"/>
                    <Button Content="NEWS"/>
                    <Button Content="SETTINGS"/>
                    <Button Content="QUIT"/>
                </StackPanel>
            </Grid>
        </Grid>
    </Viewbox>
</Grid>

Hope this helps.

ARPP3 · 06 Jul 2023, 11:37

Hey! Thank you for the super speedy response! I will look into this fix tonight, I trust it will work! :)

And I will read through all the tutorials in time, starting with the Optimizations one,

Thanks again!

Text Rendering with Transformations Artifacts (Unity) Topic is solved

Text Rendering with Transformations Artifacts (Unity)

Re: Text Rendering with Transformations Artifacts (Unity)

Re: Text Rendering with Transformations Artifacts (Unity)

Who is online