Welcome to my spline tutorial

Lets talk about what splines are and how you can use them in game including some examples. After that we will take a look at how to make one yourself with some code snippets. The logic can be applied in any kind of enviroment or languague. My own example will be written in C# with the Unity engine. It is recommended you know the basics of at least your desired language and are able to understand math.

So what are splines?

Splines are a set of points which will connect with each other using a curve. It works by assigning 2 points for the base and 2 points as rotators. These can also be called anchorPoints and Handles. Depending on the rotation and the lenght of the handles the curve will transform itself to fit between te anchorPoints.  With this you can create a lot of different combinations as you can see in the example

What are splines used for?

With the amount of combinations there are numberous ways that you can use splines. And besides the spline itself most splines have a function that lets another object move alone the spline. This is a great way to show a direction for the player to follow. Warframe used this in one of their recent quests. A blue light which would always show ahead of the player to indicate where he has to go. Another example could be an editor. Placing the spline and generating certain meshes on the path would reduce the workload by a lot because it would be automated. A great example would be Bioshock Infinity’s skylines/skyhook

The basic cubic splines

We will skip the lineair and quadratic splines because liniair is just a straight line between points. And quadratic is just a 3th anchorPoint which will be taken into account. So as said before a cubic spline exists of 2 anchorPoints and 2 Handles. Having the same anchorPoint positions but different handle rotations will show different splines. But how do we calculate a cubic spline? It’s actually really easy, all you need is a lerp function. Lerp takes in 2 xyz positions and a T value. You can calculate a lerp with the following function shown on the right.

With this you can easily calculate a basic spline. This is done by getting points between the first anchorPoint to first handle. first handle to second handle. and second handle to second anchorPoint. Now with the 3 new xyz you do the exact same. xyzP0 to xyzP1, xyzP1 to xyzP2. And at last you do the same for the last 2 xyz’s that you just got back xyzP3 to xyzP4. The value you get back from the last one is the result where T should be on the spline   ( t=0 making it at anchorPoint0 and t=1 making it at anchorPoint1)

 

More complex and longer splines

Adding more Splines to generate a longer rail is something that is a must have. Doing this is actually simpler that you might think. The only thing that you have to do is add 2 handles and 1 anchorPoint. The new spline(which gets attached to the previous one) starting anchorPoint0 is anchorPoint1 of the previous spline. Continue by adding 2 Handles and 1 new anchorPoint to complete it. 
Another option which gets always implemented is the ‘Closed’ state. By closing the rail it adds a new spline between the first anchorPoint and the last anchorPoint in the rail. the new handles will be placed on the opposite site of the anchorPoints current handle.

3D Mesh Generation along a spline

Now with our basic rail done we need to actually use it for something. I will start by explaining the mesh generation and later on continue with moving objects along a spline to make it eassier. But lets do a quick recap on what a mesh is. A mesh is a set of vertices, triangles, uvs and sometimes normals if you need them. Depending on how complex the mesh is, it becomes more difficult. For the example I would like you use a cylinder mesh which can add more segments if you want.
To set the vertices you would have to calculate an offset from a certain ‘origin’ point and then rotate it towards the next one using the forward and up direction. We can get these directions by doing points[i] – points[i-1]. Dont forget to skip the first one so you wont get an error on that. But where are these ‘origin’ points? You can calculate the positions of the points by evenly spacing across the lenght of the rail. changing the spacing value will ofcourse have effect on how precise the model will be.
Now with an array of xyz’s we need to calculate the offset. in this case it’s based on the  amount of segments our cylinder would need * a certain degree to get the correct offset. Lets instandly rotate it too so that the points are the correct positions. If you dont rotate it then the mesh will be missformed as shown on the right. While we are at the verts let’s also set the uvs. U would be equal to segments[i] / segmentsCount and V would be equal to i / pointsCount. We will later fix the texture by setting it on repeat and set tilling to the desired number to make it look great. Then at last we calculate all the triangles. This process will be different depending on your mesh and it’s a whole topic of itself so I won’t go into that today.
Ofcourse evenly spaced points can also be used to spawn objects on. For example you can have  a support holder under your railing every … distance.

Moving objects along a spline

Next up would be to move something along a rail of splines. As shows in the example this has many uses. There are 2 mayor ways to do this. One is to reuse the evenly spaced points but then make them way more percise then we did for the mesh by just heavily decreasing the spacing. This would however give more data to store and also isn’t the smoothest if it’s left at the current state. The other option would be to calculate a velocity across the spline. This one is more precise without costing any data and comes out more smooth by defauld. But it is also way harder to make and would require some good planning to set up. To make sure this wont get too complicated I’ll only explain the first method. By getting the points with a very low spacing distance we get better smoothing then the actual mesh. Now we just lerp between point i and i+1 for the position. For the rotation we do something a little differently. This isn’t nessecary but in my opinion it gives a better result. What were doing is looking … points ahead of us so that in the bending parts the ‘walker’ will look more natural. Lastly we reset the i value when we reach the end of the spline.

Conclusion and final words

So what are splines again? A spline is a 4-point based system which creates a curve between the first and last points(also called anchorPoints) depending on the second and third point(also called handles). They can be used for guiding the player or take workload from developers and much more ofcourse. They are easy to create but become way more difficult depending on how percise you want it to be. They also need a good understanding of mathematics which aren’t easy to understand. Performance wise it really depends on how you wrote your code. But if the code is done professionally it wont take to much of a hit on your pc. That sums up what splines are and how they work. I greatly recommand everyone to atleast try to make one yourself as this can be a big challange which you can extend as much as you want.