Question

I’ve come across strange behavior of pixel shader in WPF.

This problem is 100% reproducible, so I wrote small demo program. You can download source code here.

The root of all evil is tiny class titled MyFrameworkElement:

internal sealed class MyFrameworkElement : FrameworkElement
{
    public double EndX
    {
        get
        {
            return (double)this.GetValue(MyFrameworkElement.EndXProperty);
        }
        set
        {
            this.SetValue(MyFrameworkElement.EndXProperty, value);
        }
    }

    public static readonly DependencyProperty EndXProperty =
        DependencyProperty.Register("EndX",
            typeof(double),
            typeof(MyFrameworkElement),
            new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.AffectsRender));

    protected override void OnRender(DrawingContext dc)
    {
        dc.DrawLine(new Pen(Brushes.Red, 2), new Point(0, 0), new Point(this.EndX, 100));
        dc.DrawLine(new Pen(Brushes.Green, 3), new Point(10, 300), new Point(200, 10));
    }
}

As you can see this framework element renders 2 lines: lower line has permanent coordinates but upper line depends on EndX dependency property.

So this framework element is target for pixel shader effect. For simplicity’s sake I use grayscale shader effect found here. So I applied GrayscaleEffect to MyFrameworkElement. You can see result, it looks nice.

Until I increase EndX property drastically.

Small line is blurred and big line is fine!

But if I remove grayscale effect, all lines will look as they should.

Can anybody explain what’s the reason of this blurring?
Or even better how can I solve this problem?

Answer 1

With a custom pixel shader it has to create an Intermediate Bitmap and then that texture gets sampled by the pixel shader.

You’re creating a massive rendering, so your hitting some limitation in the render path.

A quick fix is to clip what you want rendered as follows:

Geometry clip = new RectangleGeometry(new Rect(0,0,this.ActualWidth, this.ActualHeight));

dc.PushClip(clip);

dc.DrawLine(new Pen(Brushes.Red, 2), new Point(0, 0), new Point(this.EndX, 100));
dc.DrawLine(new Pen(Brushes.Green, 3), new Point(200, 10), new Point(10, 300));

dc.Pop();

UPDATE:

One theory is that it’s using a filter to scale the bitmap when it exceeds the maximum texture size (which can vary depending on your graphics card architecture)…so it goes through the pixel shader at a different size….then it gets scaled back to original size.

Thus the scaling filter is causing artifacts depending on the content of your bitmap (i.e. horizontal lines and vertical lines survive a scale down and up better than diagonal lines).

.NET 4 changed the default filter it uses for filtering to a lowerquality one…Bilinear, instead of Fant…maybe this impacts the quality that you get too.

http://10rem.net/blog/2010/05/16/more-on-image-resizing-in-net-4-vs-net-35sp1-bilinear-vs-fant

UPDATE2:

This kind of confirms what I was thinking above.

If you use the Windows Performance Toolkit/Suite (part of Windows SDK), then you can see the Video Memory being gobbled up in the orange graph while you increase the slider value because a bigger Intermediate Bitmap texture is being created. It keeps increasing until it hits a limit, then it flatlines…and thats when the pixelation becomes evident.

UPDATE3:

If you set the render mode to the “Software Renderer” (Tier 0) then you can see how it copes with rendering such a large visual – the artifacts start appearing at a different point….presumably because the texture size limit is larger/different to your GPUs. But the artifacts still appear because it’s using a Bilinear filter internally.

Trying to use RenderOptions.SetBitmapScalingMode to up the filter to Fant doesn’t seem to change the rendering quality in any way (I guess because it isn’t honoured when it goes through the custom pixel shader path).

Put this in Application_Startup to see the software renderer results:

RenderOptions.ProcessRenderMode = RenderMode.SoftwareOnly;