Game loop isn't performing well enough, so my frame rate is too low (Windows Form + GDI+)

Question

I decided to learn about building games, so I picked up C# to use it along with Windows Form - I already have C# experience, so that was the main reason I did so. That said, I tasked myself to build a simple Windows Form app that renders a noise image targeting hopefully at 60 FPS. I'm using the GDI+ APIs to render bitmaps on screen; however, I noticed the app isn't even close to render 60 FPS - it renders around 36-39 FPS on a release build.

I should mention I'm a totally newbie in both Windows Form, and image rendering, so I believe my code isn't optimized at all. I'm sharing below the code snippet the app runs in order to loop infinitely to render the noise images.

    private static Bitmap GetStaticNoise(int width, int height)
    {
        var bitmap = new Bitmap(width, height);
        for (int y = 0; y < bitmap.Height; y++)
        {
            for (int x = 0; x < bitmap.Width; x++)
            {
                Color color = Color.Black;

                var rnd = Random.Shared.Next(0, 2);
                if (rnd % 2 == 0)
                {
                    color = Color.White;
                }

                bitmap.SetPixel(x, y, color);
            }
        }

        return bitmap;
    }

    private void Form1_Load(object? sender, EventArgs e)
    {
        Task.Factory.StartNew(() =>
        {
            var frameStopwatch = new Stopwatch();

            var screenGraphics = _screen.CreateGraphics();

            var font = new Font(FontFamily.GenericMonospace, 30);

            var ct = cts.Token;
            while (!ct.IsCancellationRequested)
            {
                for (int frame = 0; frame < 60; frame++)
                {
                    frameStopwatch.Restart();

                    // generates "noise"
                    Bitmap bitmap = GetStaticNoise(_screen.ClientSize.Width, _screen.ClientSize.Height);
                    screenGraphics.DrawImage(bitmap, new Point(0, 0));
                    
                    bitmap.Dispose();

                    frameStopwatch.Stop();

                    screenGraphics.DrawString(frameStopwatch.ElapsedMilliseconds.ToString(), font, Brushes.Red, new Point(0, 0));

                    //Thread.Sleep(Math.Max(0, _frameCooldown.Milliseconds - (int)frameStopwatch.ElapsedMilliseconds));
                }
            }

        }, TaskCreationOptions.LongRunning);
    }

Any advice about what could be changed here it's appreciated. Also, any resource that could be useful to learn about using GDI+ for game development with Windows Form is also appreciated (or any resource that could help me understanding for instance this situation I'm running into).

Ah! the Windows Form is on .NET 6.0. I'm also attaching a picture of the bitmap rendered on screen (upper left corner shows the time in MS to render the frame)

EDIT: thank you so much for the comments, etc. I did follow the recommendations, and I realized I wasn't even hitting the FPS I mentioned above :(. I added a fps counter, and I'm seeing 29-30 FPS - I will update my code to use something different than GDI+ - and eventually use something else for developing games. I'm attaching below the updated code.

public partial class Form1 : Form
{
    private readonly Bitmap _bitmap;
    private readonly Graphics _bitmapGraphics;

private readonly Random _rnd = new Random();

private readonly int _whiteArg = Color.White.ToArgb();
private readonly int _blackArg = Color.Black.ToArgb();

private readonly int[] _noise;

private readonly PictureBox _screen;
private readonly Graphics _screenGraphics;

private readonly CancellationTokenSource cts = new CancellationTokenSource();

public Form1()
{
    InitializeComponent();

    _screen = new PictureBox
    {
        ClientSize = this.ClientSize
    };
    _screenGraphics = _screen.CreateGraphics();

    _bitmap = new Bitmap(_screen.ClientSize.Width, _screen.ClientSize.Height);
    _bitmapGraphics = Graphics.FromImage(_bitmap);

    _noise = new int[_screen.ClientSize.Width * _screen.ClientSize.Height];

    Controls.Add(_screen);

    this.Load += Form1_Load;
    this.FormClosing += Form1_FormClosing;
}

private void Form1_FormClosing(object? sender, FormClosingEventArgs e)
{
    cts.Cancel();
}

private void SetNoise()
{
    for (int i = 0; i < _noise.Length; i++)
    {
        int val = _rnd.Next(0, 2);

        _noise[i] = val == 1 ? _whiteArg : _blackArg;
    }

    var bitmapData = _bitmap.LockBits(new Rectangle(0, 0, _bitmap.Width, _bitmap.Height), ImageLockMode.ReadWrite, PixelFormat.Format32bppArgb);

    var ptr = bitmapData.Scan0;

    System.Runtime.InteropServices.Marshal.Copy(_noise, 0, ptr, _noise.Length);

    _bitmap.UnlockBits(bitmapData);
}

private void Form1_Load(object? sender, EventArgs e)
{
    Task.Factory.StartNew(() =>
    {
        var ct = cts.Token;

        var font = new Font("Times New Roman", 32, FontStyle.Regular, GraphicsUnit.Pixel);

        var sw = new Stopwatch();

        int frames = 0;
        int lastFps = 0;
        long timeSpentInMs = 0;

        while (!ct.IsCancellationRequested)
        {
            sw.Start();

            SetNoise();

            sw.Stop();

            frames++;
            timeSpentInMs += sw.ElapsedMilliseconds;

            _bitmapGraphics.DrawString(lastFps.ToString(), font, Brushes.Red, 0, 0);
            _screenGraphics.DrawImage(_bitmap, new Point(0, 0));

            // a second has elapsed
            if (timeSpentInMs - 1_000 >= 0)
            {
                lastFps = frames;

                frames = 0;
                timeSpentInMs -= 1_000;
                sw.Reset();
            }
        }

    }, TaskCreationOptions.LongRunning);
}

}

Answer 1

TLDR: Get DirectBitmap from https://stackoverflow.com/a/34801225 and add

        public void SetPixel(int x, int y, int argb)
        {
            int index = x + (y * Width);

            Bits[index] = argb;
        }

then change GetStaticNoise to

        readonly static int white = Color.White.ToArgb();
        readonly static int black = Color.Black.ToArgb();
        readonly static Random NoiseRnd = new Random();
        private static DirectBitmap GetStaticNoise(int width, int height)
        {
            var bitmap = new DirectBitmap(width, height);
            for (int y = 0; y < height; y++)
            {
                for (int x = 0; x < width; x++)
                {
                    var rnd = NoiseRnd.Next(0, 2);

                    bitmap.SetPixel(x, y, rnd == 0 ? white : black);
                }
            }

            return bitmap;
        }

Long story: I have done stupid things in the past and know how to optimize your code

To start with, there is no need to guess when you can just ask code profiler to tell why your code is slow :)

Roughly 96% of CPU time is spent in GetStaticNoise in which major culprit is, unsurprisingly, SetPixel.

Before dealing with big fat pixel setting, lets take a look at other lines with surprisingly high CPU time.

• bitmap.Width and bitmap.Height does bunch of stuff under the hood.
• preset colors isn't a simple integer, but a fat object.
• Random.Shared creates Random object for each call. It is also thread-safe, which means there will be some performance cost hidden inside
• Ternary conditional operator generates different bytecode than full IF, and can be faster for conditional assignments

Few seconds of refactor later you get about +10% performance for "free".

You could optimize further by reusing Bitmap, but for that size would have to be either constant or hook into OnSizeChanged event.

Knowing that SetPixel is a performance hog, you can just search for "c# fast SetPixel" and just copy&paste ready to use solution from another SE post. Make sure to read through the comments on why it is not a perfect solution.

Lo and behold, performance increased tenfold just by not using SetPixel unnecessary safety logic.

But that ain't the end, let's run profiler again to get reminded that Color object sucks for game development.

With color already being prefetched, we can preconvert it as well and suddenly code is so fast that property getter becomes performance hog, taking whole 5%!

Chopping properties away you can reach spot where Random numbers takes longer to generate than SetPixel.

But at this point we have pretty much reached limits of software rendering on windows desktop. For faster performance you'll need to use GPU.

To clarify on using Ternary Operator as performance optimization: Two-element array is twice as fast as full If statement, and Ternary Operator is ~30% faster than array. Original code used modulo 2 to check parity, but with Random already returning only 0 or 1 it can be used without modulo for small performance gain.

But if you reorder IF statements slightly, you can squeeze out a bit more performance: Have in mind that (ab)using array indexes as logic (pointers) should work better in native code, without all the fancy memory management of .NET. Or it might not, depending on performance tricks done by CPU's themselves. Micro optimizations are tricky.

However, if your loop is tight enough and dataset fits into cpu cache, results will become

In the end, the real winner is white*0, but... that won't work in opaque ARGB colors, where A is 255.

TLDR: microoptimizations are hard and CPU doing its own tricks makes it even harder :)

Answer 2

When things bog down, check your inner loop. That's the code being run the most often, so even a small inefficiency there stacks up. Here we see:

Color color = Color.Black;

var rnd = Random.Shared.Next(0, 2);
if (rnd % 2 == 0)
{
    color = Color.White;
}

bitmap.SetPixel(x, y, color);

Two top suspects:

• Random.Shared.Next(0, 2) - that "Shared" means this object is shared between threads, so to protect it from bugs when two threads try to generate a random number at the same time, there's probably a mutex (mutual exclusion) lock guarding it. That means for every single pixel, this code is acquiring and releasing a lock. That's relatively inexpensive when there are no other threads contesting it, but we have to check every time.

  Make your own local instance of Random outside the loop and use that to avoid this overhead.

  This is also using a heavier-duty random algorithm than you need (probably a Mersenne Twister). For a basic static effect like this, you could probably get away with a simple Xorshift or similar PRNG that you can run entirely out of L1 cache.

• bitmap.SetPixel(x, y, color) - setting pixels one by one is often very slow, as we need to make sure the copy of the bitmap we're writing to isn't currently being used, take exclusive control of it, set one tiny bit of memory, then potentially re-upload the changed version to the GPU for rendering. (I don't know exactly what steps GDI uses though)

  Game APIs will often expose a way to set the whole bitmap at once, which is much more efficient. We'll set our colour bits in our own buffer or array, then only at the end of the loop do we ask the bitmap to replace its entire contents with that array.

  I'm not deeply familiar with GDI, but it looks like you can call Bitmap.LockBits to get access to the bitmap's BitmapData buffer before the loop, write all your data into that without extra overhead, then unlock it once at the end. (Thanks to Basic for suggesting a better route than I'd initially found!)

In a typical game context, we'd usually get this work off the CPU entirely and do noise generation on the GPU in a shader. That way we can process many pixels in parallel, rather than one at a time in sequence like CPU code. So you may want to consider switching from Windows Forms to a tech stack that makes it easier to offload graphics work this way. Engines like Godot and Unity both support C#, while giving you a richer toolbox of features that are helpful for game development.

Answer 3

I wonder, do you really need to render noise that is uniquely random down to the pixel?

Or would it be okay if it just appears random?

If you're alright with an approach that relies on staggered texture tiling instead of C# noise generation, please read on.

You may already be familiar with the cicada principle. The idea is that layering tiled images that repeat in prime number intervals makes the tiling less noticeable to the eye. This works for non-noise tiled image textures too, but is even less noticeable in the case of noise. Using transparency is one way to accomplish this. Another is blend modes.

A demo of the concept can even be constructed with a few still images and plain CSS.

359px

257px

193px

/* general appearance for demo */
    body {
      padding: 20px;
      background-color: #222;
    }
    .demo-cont {
      display: flex;
      justify-content: center;
    }
    .div-size {
      width: 50%;
      height: 360px;
      border-radius: 6px;
    }

    /* noise effect from here */
    .color-noise {
      background-repeat: repeat;
      background-position: center;
      background-blend-mode: hue;
      background-image:
        /* each image has a different prime number resolution */
        url(https://i.sstatic.net/ZWudq.png), /* 359px tile */
        url(https://i.sstatic.net/HiXuV.png), /* 257px tile */
        url(https://i.sstatic.net/3kPSN.png); /* 193px tile */
      background-size: 
        /* CSS screen pixels are double-size, so halve that res to get the true resolution. 
        Optionally, scale to fine-tune, or just create a more varied anti-aliased look. */
        calc(359px * 0.5),
        calc(257px * 0.55),
        calc(193px * 0.67);
    }

    @keyframes filter-anim {
      /* Rotating hue and over-saturating color "moves" the perceived brightness around.
      This remains visible in grayscale. */
      0%   {filter: hue-rotate(0deg)   saturate(4) grayscale(1);}
      100% {filter: hue-rotate(360deg) saturate(4) grayscale(1);}
    }

    .color-noise.animate {
      animation: filter-anim 0.5s infinite linear;
    }

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Cicada Noise</title>
</head>
<body>
  <div class="demo-cont">
    <div class="color-noise animate div-size"></div>
  </div>
</body>
</html>

I don't know if this approach will be suitable for your project, but it's a "think outside the box" sort of technique that may be more performant than traditional generated noise. If anyone tests this out, I would be curious to hear how it performs in your game. Cheers.