Roy Triesscheijn's Blog

Generating Asteroids

Sun, 09 Aug 2020 11:28:00 +0000

After watching this video I’ve become inspired to procedurally generate my own asteroids. I became even more intrigued when the video showed me how to combine functions to give such interesting results. However explaining how it works to friends and colleagues proved to be difficult. That’s why I’ve decided to compile the technique in a Juypter Notebook. You can find the original notebook at github as well as compute shaders in which I have implemented these techniques.

First things first

Before generating asteroids I need several helper functions to plot the data. The main idea is that we have a line made up of many points, and we’re going to write and combine functions that alter the height of each point based on their distance from the origin. We then generalize this idea to a circle. Here altering the height means placing the point further away from the center in the direction of the normal.

The implementation of these helper functions is not important right now, as long as you get the idea of what we’re trying to accomplish.

using XPlot.Plotly;
using System.Numerics;

public XPlot.Plotly.PlotlyChart LinearPlotChart(Func<float, float> function, string title, string xaxis, string yaxis)
{
    var data = new Graph.Scatter()
    {    
        x = Enumerable.Range(0, 500).Select(xv => xv / 100.0f),
        y = Enumerable.Range(0, 500).Select(yv => function(yv / 100.0f))        
    };    
    return Plot(data, 0.0f, 5.0f, -2.0f, 2.0f, title, xaxis, yaxis);
}

public XPlot.Plotly.PlotlyChart Plot(Graph.Scatter data, float minX, float maxX, float minY, float maxY, string title, string xaxis, string yaxis)
{
    var layout = new Layout.Layout();
    layout.xaxis = new Graph.Xaxis() { range = new float[] { minX, maxX } };
    layout.yaxis = new Graph.Yaxis() { range = new float[] { minY, maxY } };

    var chart = Chart.Plot(data, layout);
    chart.WithTitle(title);    
    chart.WithXTitle(xaxis);
    chart.WithYTitle(yaxis);
    chart.WithWidth(400);
    chart.WithHeight(400);
    
    return chart;
}

public XPlot.Plotly.PlotlyChart PlotAsteroid(Func<float, float> craterShape, string title, params Crater[] craters)
{    
    var xs = new List<float>();
    var ys = new List<float>();
    
    for(float i = 0; i < (float)Math.PI * 2.0f; i += (float)Math.PI / 100.0f)
    {
        ComputeVertex(xs, ys, i, craterShape, craters);
    }
    ComputeVertex(xs, ys, 0, craterShape, craters);
                               
    var data = new Graph.Scatter() {x = xs, y = ys };       
    return Plot(data, -1.2f, 1.2f, -1.2f, 1.2f, title, "", "");
}

public float CalculateCraterDepth(Crater[] craters, Vector2 vertex, Func<float, float> craterShape)
{
    var craterHeight = 0.0f;
    for(var i = 0; i < craters.Length; i++)
    {
        var crater = craters[i];
        var x = Vector2.Distance(crater.Position, vertex) / Math.Max(crater.Radius, 0.0001f);
        craterHeight += craterShape(x);
    }    
    return craterHeight;
}

public void ComputeVertex(List<float> xs, List<float> ys, float i, Func<float, float> craterShape, Crater[] craters)
{
    var x = (float)Math.Cos(i);
    var y = (float)Math.Sin(i);

    var vertex = new Vector2(x, y);
    var height = 1.0f + CalculateCraterDepth(craters, vertex, craterShape);        
    vertex *= height;

    xs.Add(vertex.X);
    ys.Add(vertex.Y);
}

public struct Crater
{
    public Crater(Vector2 position, float radius)
    {
        this.Position = position;
        this.Radius = radius;        
    }
    
    public Vector2 Position {get;set;}
    public float Radius {get;set;}    
}

Generate the cavity

The main ingredient in a crater is the cavity (hole). The lowest point is at the origin of the crater. So I’ve chosen a square function as our basis.

display(LinearPlotChart(x => x * x - 1, "Basis function for cavity", "Distance", "Height"));

We can combine this function with the, quite boring, function y = 0 using the min operator to get something that already looks a lot like a crater

display(LinearPlotChart(x => Math.Min(x * x - 1, 0.0f), "First combination", "Distance", "Height"));

We then comebine this function on more time, now with the function y = - 0.2, to limit the depth of the crater

const float depth = -0.2f;
display(LinearPlotChart(x => Math.Max(Math.Min(x * x - 1, 0.0f), depth), "Final cavity function", "Distance", "Height"));

When we visualize this shape on a circle it already looks quite good, but we’re not there yet.

Func<float, float> craterShape = x =>
{
    var cavity  = x * x - 1;    
    var combined = Math.Min(cavity, 0.0f);
    return Math.Max(depth, combined);
};

var radians = 0.4f;
display(PlotAsteroid(craterShape, "A circle with cavities", new Crater(Vector2.UnitY, 0.2f), new Crater(new Vector2((float)Math.Cos(radians), (float)Math.Sin(radians)), 0.1f)));

Generate the Rim

If you look at images of craters you see that they have a cavity, but also a rim around them, that is higher than the ground that is a bit further away. So we choose a function that starts high and slowly lowers.

const float rimWidth = 3.0f;
const float rimSteepness = 0.02f;
display(LinearPlotChart(x => ((x - rimWidth) * (x - rimWidth)) * rimSteepness, "Basis function for rim", "Distance", "Height"));

Combining this function with the cavity function using the min operator gives us a pleasing shape.

Func<float, float> craterShape = x =>
{
    var cavity  = x * x - 1;
    var rimX = Math.Min(x - rimWidth, 0);
    var rim = (rimX * rimX) * rimSteepness;
    var combined = Math.Min(cavity, rim);
    return Math.Max(depth, combined);
};

var radians = 0.4f;
display(LinearPlotChart(craterShape, "Combined cavity and rim function", "Distance", "Height"));

And it looks even better when applied to a circle!

display(PlotAsteroid(craterShape, "Combined function to generate craters", new Crater(Vector2.UnitY, 0.1f), new Crater(new Vector2((float)Math.Cos(radians), (float)Math.Sin(radians)), 0.1f)));

Smooth the functions

Using the standard max and min operators gives a few quite abrubt transitions. We can smooth these transitions using the techniques described here. Note that beacuse we use a polynomal smoothing algorithm there’s no beginning or end to the smoothing (as you would have with a simple lerp) so our whole circle becomes slightly larger as a result.

const float smoothing = 0.5f;

public float SmoothMin(float a, float b, float k) 
{
    k = Math.Max(0, k);
    float h = Math.Max(0, Math.Min(1, (b - a + k) / (2 * k)));
    return a * h + b * (1 - h) - k * h * (1 - h);
}

public float SmoothMax(float a, float b, float k) 
{
    k = Math.Min(0, -k);
    float h = Math.Max(0, Math.Min(1, (b - a + k) / (2 * k)));
    return a * h + b * (1 - h) - k * h * (1 - h);
}

Func<float, float> craterShape = x =>
{
    var cavity  = x * x - 1;
    var rimX = Math.Min(x - rimWidth, 0);
    var rim = (rimX * rimX) * rimSteepness;
    var combined = SmoothMin(cavity, rim, smoothing);        
    return SmoothMax(depth, combined, smoothing);
};

var radians = 0.4f;
display(LinearPlotChart(craterShape, "Function", "Distance", "Height"));

Applying this function to our circle gives our final result.

display(PlotAsteroid(craterShape, "Asteroid", new Crater(Vector2.UnitY, 0.1f), new Crater(new Vector2((float)Math.Cos(radians), (float)Math.Sin(radians)), 0.1f)));

I’ve used this technique in my open-source 3D Engine where it looks like this:

The magic of real-time rendering in games

Tue, 02 Jul 2019 11:28:00 +0000

I’ve now been working at Bol.com (basically the Dutch version of Amazon) for 18 months. In that time I’ve not worked professionally on games. But in my spare time I’ve been tinkering on a game engine Check it out on GitHub!

Working on the back-end systems of an e-tailer is a very different experience than work on games. At our yearly conference, Spaces Summit, I talked to my colleagues about how games work, and what the differences are with the work I do daily. I’m very proud of this talk. I think it was both very informative, technical and relatively easy to follow. Definitely watch it if you’re interested in games, but haven’t worked professionally on them (yet)!

Below you can find the abstract and the actual talk! You can also download the slides from my OneDrive. There was also an interview after the talk, which you can find on Spotify. The intro starts at 3:00, the actually interview starts at 3:50).

Modern game engines render almost photo realistic images 60 times per second on €300,- game consoles. Meanwhile, at bol.com, it takes a €10.000 server a whole second to retrieve a customer’s stored order information. How do game engines do this? It almost sounds like magic!

Though very impressive, I will show you that game engines definitely do not perform magic. But that they accomplish their goal using deceit and trickery. To prove this I will take on the role of the masked magician, using the game engine I created.

At the end of this talk you will have a high-level understanding of the steps and tricks involved in real-time rendering. You will also have a better understanding of the very parallel, pipelined, approach used in real-time rendering, which will make you think differently about the code you write for bol.com.

Text rendering in MonoGame

Wed, 04 Jul 2018 11:32:00 +0000

Recently I’ve put two text-rendering related repositories online. My TrueType parser which you can use to get meta data from any .ttf font. And a multi-spectrum signed distance field font sample for MonoGame.

Especially the later is interesting if you would like to render text in your games!

MSDF

A signed distance field font sample for monogame. Available at GitHub. As usual the code is available under the MIT license.

The content pipeline project

The sample includes a content pipeline project compatible with Monogame 3.0+. The content processor requires you set the path to the msdfgen binary. I recommend you generate it from this fork as it fixes many issues with complicated fonts.

The game project

The game project contains a simple utility class and shader to draw 3D moving text.

Why (multi-channel) signed distance fields?

Signed distance fields are a technique first described by Valve in this paper. In short a signed distance field is a sort-of height map. Where sea-level are the actually boundaries of the glyph. Everything above sea level is outside the glyph, and everything below sea level is inside the glyph. When a height map is upscaled the GPU fills in the gaps using linear interpolation. The linear interpolation of the height map introduces less noise/faults than interpolating a sharp boundary would do, but we still get the same information.

Traditional signed distance fields only use one channel, but they sometimes have trouble representing sharp corners. Multi-channel signed distance fields solve this problem by using three color channels to store slope information.

Advantages

High quality text rendering
Low memory usage
Fast rendering (the shader is very simple)

Drawbacks

No automatic mechanism to determine the right signed distance field size to capture all details
No multi-color glyphs (like emoji)
Straight lines might look slightly wavery sometimes

Alternatives

SpriteFonts, the standard in XNA and MonoGame, look good when rendered at the same size as the sprites were saved, but upscaling and downscaling quickly leads to a serious degradation in quality.
A library like slug which renders text directly from the outline data in the font. So no details are missed and no manual configuration is required.

Roy-T.AStar, a NuGet package for A* path finding

Tue, 01 Aug 2017 21:02:00 +0000

Over the years I’ve made many improvements to my A* implementation. I believe its currently one of the fastest implemenations for C# out there. However, it was really hard to update to my latest and greatest version. So I present to you a completely new implementation, even faster. Which I’ve released as a NuGet package and have made available on GitHub.

Get the NuGet package. Learn how to use NuGet.
Browse the source code, contributions are welcome.

Tutorial

Below I give a textual explanation of this library and how to use it. If you are more interested in a code sample you can find it right after the next section.

Usage in text

Your agent might be able to move fluently through a world with hills and water but that representation is too complex for the A* algorithm. So the first thing you need to do is to is to create an abstract representation of your world that is simple enough for the path finding algorithm to understand. In this library we use a grid to represent the traversable, and intraversable, space in your world.

You can instantiate a grid using the Grid class. If you have a world that is a 100 by a 100 meters large, and you create a grid of 100x100, each cell will represent a patch of land of 1x1 meters.

Experiment with the size of the grid, a larger grid will give you more fine grained control but it will also make the path finding algorithm slower.

Once you have a grid you need to configure which cells represent obstacles. Some obstacles, like a high wall, are intraversable. Use the BlockCell method to prevent the path finding algorithm from planning paths through that cell. Other obstacles, like dense shrubbery, take more time to traverse. In that case give the cell a higher cost using the SetCellCost method.

Once you’ve configured your grid its time to start planning paths. Using the GetPath method you can immidately search for a path between two cells for an agent that can move in all directions. You can also plan paths for agents that are more limited in their movent using the overload of GetPath that takes a movementPattern parameter. In that case you can either select one of the predefined ranges of motion from the MovementPatterns class or you can configure yourself what kind of steps an agent can make.

You can define your own patterns for your agents. Below I have defined the movement pattern for an agent that can only move diagonally. (This movement pattern is included in the library as MovementPatterns.DiagonalOnly).

var diagonalOnlyMovementPattern = new[] {
    new Offset(-1, -1), new Offset(1, -1), , new Offset(1, 1), , new Offset(-1, 1)
};

Usage example in code

You can easily search for the lowest cost path for an agent that can move in all directions.

using RoyT.AStar;

// Create a new grid and let each cell have a default traversal cost of 1.0
var grid = new Grid(100, 100, 1.0f);

// Block some cells (for example walls)
grid.BlockCell(new Position(5, 5))

// Make other cells harder to traverse (for example water)
grid.SetCellCost(new Position(6, 5), 3.0f);

// And finally start the search for the shortest path form start to end
IList<Position> path = grid.GetPath(new Position(0, 0), new Position(99, 99));

It is also posssible to define the agent’s movement pattern.

// Use one of the built-in ranges of motion
var path = grid.GetPath(new Position(0, 0), new Position(99, 99), MovementPatterns.DiagonalOnly);

// Or define the movement pattern of an agent yourself
// For example, here is an agent that can only move left and up
var movementPattern = new[] {new Offset(-1, 0), new Offset(0, -1)};
var path = grid.GetPath(new Position(0, 0), new Position(99, 99), movementPattern);

Implementation details

While making this library I was mostly concerned with performance (how long does it take to find a path) and ease of use. I use a custom MinHeap data structure to keep track of the best candidates for the shortest path. I’ve experimented with other data structures, like the standard SortedSet but they were consistently slower. Other small tricks I’ve used is using a bool[] to keep track of checked cells and to only compute the squared distance in my heuristic. (Which helped a surprising amount).

While micro-optimizing the code I’ve used the handy BenchMark.Net library to see if my changes had any effect. The benchmark suite is included in the source code here. So if you would like to try to make this implemention faster you can use the same benchmark and performance metrics I did.

For version 1.0 I got the following numbers for a 100x100 grid (10000 cells) filled with a gradient.

BenchmarkDotNet=v0.10.8, OS=Windows 10 Redstone 2 (10.0.15063)
Processor=Intel Core i5-4690 CPU 3.50GHz (Haswell), ProcessorCount=4
Frequency=3415990 Hz, Resolution=292.7409 ns, Timer=TSC
dotnet cli version=1.0.4
  [Host]     : .NET Core 4.6.25211.01, 64bit RyuJIT
  DefaultJob : .NET Core 4.6.25211.01, 64bit RyuJIT

 |            Method |     Mean |     Error |    StdDev |
 |------------------ |---------:|----------:|----------:|
 | Gradient100X100 | 1.177 ms | 0.0057 ms | 0.0048 ms |

Installing XNA 4 under Visual Studio 2017

Tue, 18 Jul 2017 10:15:00 +0000

At SilverFit we use XNA to create physical and mental exercises for the elderly care industry. We’ve been doing this for more than eight years now. Leaving us with products that contain more than 30 XNA based games. You can imagine our horror when we tried to install the XNA plugin under Visual Studio 2017 and it didn’t work.

Of course we’re looking at alternatives. But even with alternatives such as MonoGame its hard to convert seven years of work in a short amount of time. (Actually we tried to convert all our games to MonoGame three years ago but we ran into several blocking issues).

So I tried to find a solution. After some hardcore debugging I figured out how to change the VSIX file to run under VS2017 and how to move some files around so that XNA’s content pipeline would work. I’ve been sitting on this guide for a while. Hoping for a more elegant solution. But unfortunately no-one has discovered one.

The steps

Download a modified version of the XNA 2015 vsix here (the XNA 2017 version seems to be a failed attempt at getting things to work).
Unzip XNA Game Studio 4.0.vsix and replace the <Installation /> tag in extension.vsixmanifest with this:

 <Installation InstalledByMsi="false">
    <InstallationTarget Version="[12.0,16.0)" Id="Microsoft.VisualStudio.VSWinDesktopExpress" />
    <InstallationTarget Version="[12.0,16.0)" Id="Microsoft.VisualStudio.Pro" />
    <InstallationTarget Version="[12.0,16.0)" Id="Microsoft.VisualStudio.Premium" />
    <InstallationTarget Version="[12.0,16.0)" Id="Microsoft.VisualStudio.Ultimate" />
    <InstallationTarget Version="[14.0,16.0)" Id="Microsoft.VisualStudio.Community" />
    <InstallationTarget Version="[14.0,16.0)" Id="Microsoft.VisualStudio.Enterprise" />
  </Installation>

Place everything in a zip file again and change the extension to vsix. Now run the the vsix file. It should give a warning message but other than that install for VS2017 without problems.
Copy everything from C:\Program Files (x86)\MSBuild\Microsoft\XNA Game Studio to C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\Microsoft\XNA Game Studio
Open the Visual Studio 2017 developer command prompt by searching for Developer command prompt for VS 2017 as administrator and execute the following code: (this will add the new version of Microsoft.Build.Framework to the Global Assembly Cache).

 cd C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin
 gacutil /i Microsoft.Build.Framework.dll

After this you should be able to work with XNA in Visual Studio 2017 without problems.

I’ve made a ticket to get some more information from Microsoft why this is needed. You can see it here but the response so far is not really overwhelming.

Conversion to Jekyll

Thu, 05 May 2016 12:03:00 +0000

For the last 8 years this blog was running on Wordpress. I think Wordpress is a great platform, and in those eight years I was generally satisfied with how it worked.

Unfortunately the last few years have been different. Wordpress seems to have become extremely vulnerable to malware infections. This blog itself got infected at least 4 times in the last two years! This is odd since I use a completely standard installation and almost no plugins. Auto-update is configured and I’ve tried to harden the installation with a security scanner but this didn’t seem to help at all. To make things worse the blog software also didn’t really work when it wasn’t infected, it was terribly slow.

Because of this I’ve decided to switch over my entire blog to plain old static html pages. This should make it virtually impossible to get infected and it also gives a nice speed boost!

Of course I will not be typing HTML by hand. I’ve decided to use Jekyll. Jekyll generates a complete static website from posts written in markdown.

Changing from Wordpress to Jekyll isn’t painless. I’ve used a converter to convert all the old Wordpress posts to markdown but most of them need small tweaks. I’ve also had some trouble making the old Wordpress links work. But thanks to some .htaccess voodoo that too works alright now :).

You can check out Github to see how I’ve done the conversion. All the inputs for this website are stored there.

It will take some time to convert all the old posts. There are almost 150 of them. See my twitter feed for the actual status. Currently almost everything from the last 5 years has been converted.

In the meantime, sorry for the inconvenience!

Customizable Touch-Friendly TimePicker Clock for WPF

Sat, 05 Mar 2016 12:18:00 +0000

I’ve created a fully customizable touch-friendly time picker control for WPF. Initially I tried to create a time picker that looks like the one on your phone. But I got so frustrated with creating an infinite scrollable list that I decided to make an old-fashioned time picker based on a clock.

The TimePicker supports a Two-Way binding to a TimeSpan property. Dragging the hour or minute indicator updates the TimeSpan. There are also a lot of visual options

Brush for the hour indicator
Thickness of the hour indicator
Brush for the minute indicator
Thickness of the minute indicator
Separate brushes for the hour and minute ticks
Separate thickness for the hour and minute ticks
Background brush
Border brush and border thickness

The code also includes a handy math class which, among other things, makes it possible to calculate a time based on the position on of the mouse in relation to the clock.

I ‘recently’ announced that I created a bitbucket account. But since I’ve grown so accustomed to git (we switched from Hg to git at work) I’ve decided to post this project on my brand new GitHub account.

You can download the code and examples at GitHub

BitBucket Account

Sat, 21 Mar 2015 10:34:00 +0000

Apart from code on this blog, I haven’t really contributed code on other places on the web. However, a blog really isn’t the best place to put code. So I’ve dusted off my Atlassian account and I’ll be starting to make contributions on BitBucket.

You can find my BitBucket account on: https://bitbucket.org/roy-t/ the place is a bit barren at the moment, but I hope to make some progress on my Roslyn / Code Constraints experiment this weekend. I’ll publish the changes there.

Of course feel free to contribute or pull the code and check it out!

Update: I’ve switched to GitHub

Graduation, Jobs, Roslyn

Thu, 15 Jan 2015 20:17:00 +0000

The last few Months I haven’t been able to post any new material here, but don’t worry I haven’t been slacking off.

Most of my energy has been poured into my research regarding Navigation Meshes, and I’m happy to announce that I have completed this work. This research project has also led me to graduate from Utrecht University Cum Laude. Since January 15th 2015 I am officially a Master of Science :D.

While I was working on that I have also been job hunting, and last Oktober started at the company SilverFit. Here I use the Kinect Camera to help elderly people rehabilitate by means of computer-aided physical exercises.

I hope that, once the dust has settled, I will be able to start producing content for this blog again. I have been working on some cool things with Roslyn that I would like to show you all.

Meawhile you can have a look at my Navigation Mesh Research

Codesnippet, Poor man's benchmark, or quickly timing things in C#

Wed, 04 Jun 2014 14:50:00 +0000

For a project I’m working on I had to do some quick timing. Now manually working with DateTimes and TimeSpans isn’t hard but I had to do a lot (e.g. more than 3) timings inside a bigger process and I wanted to know both the time the entire process took as the time parts of the process ate up. For this I created a handy StopWatch class which uses a stack to store different date times so you can easily do nested timing with very little code. This is nothing revolutionary but I thought I’d share it anyway. Its those little things that save some time that are the nicest!

/// <summary>
/// Always accesible timing apparatus
/// </summary>
public static class StopWatch
{
	private static Stack<DateTime> timers;

	static StopWatch()
	{
		timers = new Stack<DateTime>(0);
	}


	/// <summary>
	/// Pushes the current DateTime onto the stack of timers
	/// </summary>
	public static void Push()
	{
		timers.Push(DateTime.Now);
	}

	/// <summary>
	/// Pops the top DateTime from the stack of timers,
	/// returns the TimeSpan between when the last Push and now
	/// </summary>        
	public static TimeSpan Pop()
	{
		if(timers.Count > 0)
		{
			DateTime start = timers.Pop();
			return DateTime.Now - start;
		}
		else
		{
			throw new Exception(&quot;Trying to pop while the stack is empty&quot;);
		}
	} 

	/// <summary>
	/// Calls Pop(), then prints the text &quot;StopWatch: {totalSeconds} \n&quot;
	/// directly to console.
	/// </summary>
	public static void PopAndPrint()
	{            
		Console.Out.WriteLine(&quot;StopWatch: &quot; + Pop().TotalSeconds);
	}
	
	/// <summary>
	/// Returns the TimeSpan between the last Push and now
	/// without popping the TimeSpan from the stack of timers
	/// </summary>        
	public static TimeSpan Peek()
	{
		if(timers.Count > 0)
		{
			DateTime start = timers.Peek();
			return DateTime.Now - start;
		}
		else
		{
			throw new Exception(&quot;Trying to peek while the stack is empty&quot;);
		}
	}

Usage

static void Main(string[] args)
{
	// Measure the entire process
	StopWatch.Push();
	{
		// Measure subtask            
		StopWatch.Push();
		
		// Subtask took:
		StopWatch.PopAndPrint();
	}
	// Entire process took:
	StopWatch.PopAndPrint();
}

Output

[sourcecode]
StopWatch: 0.0010001
StopWatch: 0.0020001