How to draw text or glyphs in WPF really fast at 60 fps?

Question

I would like to create a user control in WPF, which would be able draw an n x m matrix of characters using a mono-space font. The control will accept a string[] as fast as possible ( 60 fps is the target) and draw it on the screen.

I need performance similar to mplayer ascii playback.

All characters are drawn using the same mono-space font, but may have different colors and background according to certain rules (similar to syntax highlighting in VS).

I have implemented the solution in C# WinForms without any problem and got to 60 FPS, but when I wanted to learn how to do this in WPF I only found several articles and posts describing problems with WPF performance and conflicting information.

So what is the best way do achieve highest performance in this case?

A naive approach I tried is:

 /// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    Random rand = new Random();

    public MainWindow()
    {
        InitializeComponent();

        DispatcherTimer timer = new DispatcherTimer();
        timer.Interval = TimeSpan.FromMilliseconds(1);
        timer.Tick += timer_Tick;
        timer.Start();
    }

    string GenerateRandomString(int length)
    {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < length; i++)
        {
            sb.Append(rand.Next(10));
        }
        return sb.ToString();
    }
    void timer_Tick(object sender, EventArgs e)
    {
        myTextBlock.Inlines.Clear();

        for (int i = 0; i < 30; i++)
        {
            var run = new Run();
            run.Text = GenerateRandomString(800);
            run.Foreground = new SolidColorBrush(Color.FromArgb((byte)rand.Next(256),(byte)rand.Next(256),(byte)rand.Next(256),(byte)rand.Next(256)));
            run.Background = new SolidColorBrush(Color.FromArgb((byte)rand.Next(256),(byte)rand.Next(256),(byte)rand.Next(256),(byte)rand.Next(256)));
            myTextBlock.Inlines.Add(run);
        }

    }
}

The question is: Can you do better than that in WPF?

P.S. Yes, I could use DirectX directly, but this question is about WPF and not DX.

Answer 1

Probably the fastest way to draw text in WPF is to use GlyphRun.

Here is a sample code:

MainWindow.xaml

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="300">
    <Image>
        <Image.Source>
            <DrawingImage x:Name="drawingImage"/>
        </Image.Source>
    </Image>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Windows;
using System.Windows.Media;
using System.Windows.Threading;

namespace WpfApplication
{
    public partial class MainWindow : Window
    {
        Random rand = new Random();

        Stopwatch stopwatch;
        long frameCounter = 0;

        GlyphTypeface glyphTypeface;
        double renderingEmSize, advanceWidth, advanceHeight;
        Point baselineOrigin;

        public MainWindow()
        {
            InitializeComponent();

            new Typeface("Consolas").TryGetGlyphTypeface(out this.glyphTypeface);
            this.renderingEmSize = 10;
            this.advanceWidth = this.glyphTypeface.AdvanceWidths[0] * this.renderingEmSize;
            this.advanceHeight = this.glyphTypeface.Height * this.renderingEmSize;
            this.baselineOrigin = new Point(0, this.glyphTypeface.Baseline * this.renderingEmSize);

            CompositionTarget.Rendering += CompositionTarget_Rendering;

            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(1000);
            timer.Tick += timer_Tick;
            timer.Start();
        }

        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            if (this.stopwatch == null)
                this.stopwatch = Stopwatch.StartNew();

            ++this.frameCounter;

            this.drawingImage.Drawing = this.Render();
        }

        string GenerateRandomString(int length)
        {
            var chars = new char[length];
            for (int i = 0; i < chars.Length; ++i)
                chars[i] = (char)rand.Next('A', 'Z' + 1);

            return new string(chars);
        }

        void timer_Tick(object sender, EventArgs e)
        {
            var seconds = this.stopwatch.Elapsed.TotalSeconds;
            Trace.WriteLine((long)(this.frameCounter / seconds));

            if (seconds > 10)
            {
                this.stopwatch.Restart();
                this.frameCounter = 0;
            }
        }

        private Drawing Render()
        {
            var lines = new string[30];
            for (int i = 0; i < lines.Length; ++i)
                lines[i] = GenerateRandomString(100);

            var drawing = new DrawingGroup();
            using (var drawingContext = drawing.Open())
            {
                // TODO: draw rectangles which represent background.

                // TODO: group of glyphs which has the same color should be drawn together.
                // Following code draws all glyphs in Red color.
                var glyphRun = ConvertTextLinesToGlyphRun(this.glyphTypeface, this.renderingEmSize, this.advanceWidth, this.advanceHeight, this.baselineOrigin, lines);
                drawingContext.DrawGlyphRun(Brushes.Red, glyphRun);
            }

            return drawing;
        }

        static GlyphRun ConvertTextLinesToGlyphRun(GlyphTypeface glyphTypeface, double renderingEmSize, double advanceWidth, double advanceHeight, Point baselineOrigin, string[] lines)
        {
            var glyphIndices = new List<ushort>();
            var advanceWidths = new List<double>();
            var glyphOffsets = new List<Point>();

            var y = baselineOrigin.Y;
            for (int i = 0; i < lines.Length; ++i)
            {
                var line = lines[i];

                var x = baselineOrigin.X;
                for (int j = 0; j < line.Length; ++j)
                {
                    var glyphIndex = glyphTypeface.CharacterToGlyphMap[line[j]];
                    glyphIndices.Add(glyphIndex);
                    advanceWidths.Add(0);
                    glyphOffsets.Add(new Point(x, y));

                    x += advanceWidth;

                }

                y += advanceHeight;
            }

            return new GlyphRun(
                glyphTypeface,
                0,
                false,
                renderingEmSize,
                glyphIndices,
                baselineOrigin,
                advanceWidths,
                glyphOffsets,
                null,
                null,
                null,
                null,
                null);
        }
    }
}

Answer 2

This answer seems a bit flawed. Possible cases:

1. The advance widths are different for each character
2. There is no effort to align the baselines, since a line may consist of several glyph runs
3. Since the absolute y position is buried in the run it can't be easily moved when a line is inserted