Stitching curves together: Bézier paths

Does anybody have any examples using FULL BEZIER PATHS

Note just a single point of 3-4 positions… But an entire path to follow defined by control points.

Kinda like how Catmull Rom works… Where you specify the control points and the Catmull Rom creates all the POINTS along the spline depending on the resolution.

I was hoping there was already a class or way to handle following a bezier path. Or is there a easy way of stitching individual bezier curves together to make a path ???

You can set as many points as you want when creating the Bezier curve and use getPoints() to access them
https://doc.babylonjs.com/how_to/how_to_use_curve3#quadratic-bezier-curve

the Curve3 object has a useful method, the continue() method, that allows you place the start of one Curve3 onto the end of another Curve3 without any calculations to match the start and end points of the curves.

From Draw Curves - Babylon.js Documentation

1 Like

Is there any examples of building a full path with Bézier curves. I get that you can specify points, but that still one curve from a set of three points.

I am trying to create a driving line for a race track using Bézier curve control points in unity and export those control points to Babylon and rebuild the full Bézier path in client side Babylon script

The only way I can see that is grouping all the path control points into threes… then build a Bézier curve for the first three control points … using the last control point from each group as the first control point for the next group of three points. That’s the stitching … I believe

It’s my understanding that’s how you build a full Bézier path. But was wondering how I am going to handle such a thing in Babylon

And if anyone has ever built a full Bézier path … not just a single Bézier curve

I am sure the continue() function I suggested does this.

https://www.babylonjs-playground.com/#7B08RP

1 Like

I agree that continue is the way to stitch.

But if anybody has ever generated a full path from control points … not just a hard coded 2 or three example … I was hoping I can see how they handle a few things like:

How many control points do they require, and should it be a divisible of 3 … if you don’t have enough control points for that last curve, are you adding dummy points or just truncate that set if not a set of three points. How are your handling close loops… etc… basically a full example … if anyone has one .

I am also thing bout trying to create a static helper function that you pass all the control points and that function would create the Curve3 spline with all the detail points.

Kind like the create static function Babylon has for Catmull Rom paths… but this will be for full bezier paths.

Looking for details on how I would build such a class and to properly handle differ lengths of control points.

But alas … I cannot find any example code doing this kind of thing… so I would have to make up all this logic myself for working with full path Bézier curves :confused:

As far as I understand it a full path Bezier will be made up of linked quadratic (or cubic) Bezier curves. Each quadratic curve requires a start point, a control point and an end point.

To form a full path Bezier you need the correct number of points passed in the correct pattern.

Where pi is the start point for curve i and the end point for curve i - 1 and where ci is the control point for curve i

For an open path of n curves you need to pass an array of the form

p0, c0, p1, … pi, ci, pi + 1, … pn, cn, pn + 1

Each curve for i = 0 to n is made from

CreateQuadraticBezier(pi, ci, pi + 1, nb_of_points);

For a closed path of n curves you need to pass an array of the form

p0, c0, p1, … pi, ci, pi + 1, … pn, cn

Each curve for i = 0 to n is made from

CreateQuadraticBezier(pi, ci, p(i + 1) % n, nb_of_points);

For Catmull Rom Paths you pass a list of points that you want the path to pass through

A Bezier Curve is different, it passes through pi and pi + 1 but it does not pass through ci, this control point determines the tangent to the curve as the curve goes from pi to pi + 1

This is why the following statements do not have any meaning for a Bezier

1 Like

I get that you have a point one and a point two and a control point in the middle that controls the curve.

I am trying to make a tool in unity where you simply layout transform to define your path. I then come along and serializing that transform position and rotation and use those as control points in Babylon. The use can put what ever or how many transforms they want. For me to control the amount of transforms to make sure it’s total amount is correct for a proper Bézier path, I would also have to create or purchase a tool in unity to make sure the user enter the correct amount of points when exporting the scene

That’s why I said what if you don’t have enough points. Think if I should pop up a message and say you don’t have proper number of points or some how create the missing point or two with default values or something.

But all this might be too much and I might only support Unity Catmull Rom splines and not Bézier curve splines for exporting from unity to Babylon … Bézier curve exporting would have been pretty cool though… use unity to layout race lines around a large race track and choose your type curve, Catmull or bezier… that would have been a sweet design time tool for my racing game projects and making many race tracks for my Vehicle :red_car: AI to drive along

Unfortunately I know nothing about Unity or layout transforms or how they define the shape of a curve though I doubt there is a direct mapping between a transform and Bezier points.

Thanks for the info anyway @JohnK

Is it possible to to demonstrate how to produce a particular curve in Unity using layout transform and provide the data you would export for that curve to import into BJS?

Perhaps ( and it is a big perhaps) it might be enough to work on.

I did do some Bezier path creation with BJS in http://cubees.github.io/ both Lathe and Extrude will take you to using a Bezier path. Click on existing path to bring up the menu to add/ delete points, drag and drop the control points.

It uses cubic rather than quadratic Beziers

Code (Is 4 years old and a lot untidy)


I gotta look at getting some better screen recording software. Then i make a video showing the curve layout workflow i currently use (Catmull-Rom) to define control points.

MackeyK24, I am 99% sure this is not what you want but . . . MeshWriter builds glyphs out of cubic and quadratic Bezier curves. The curves are specified originally in the font file, so it doesn’t have to create anything.

Just so you know. :slight_smile:

I would expect that using Catmull-Rom in Unity means the only possibility is to export for Catmull-Rom in BJS. If it is possible to create a full path in Unity using Bezier curves then you are likely to be able to export this data to use Bezier curves in BJS

Conversion between Catmull-Rom and Bezier and vice-versa appears possible A Primer on Bézier Curves but I need time to read and understand it.

EDIT PS if you end up drawing the same curve in BJS what are the advantages of using Bezier over Catmull-Rom that you see?

1 Like

The difference between Catmull-Rom and Bezier is mainly tighter cornering with race lines… Catmull evaluates ALL the control points to determine the curve amount in between points… which tends to make the curve a little wider in the corners when laying out an entire track with lots off turns.

Bézier lets you put a control point before the turn and one after then use the middle point to fine tune the curve amount for just that corner

That’s the only reason I started messing with Bézier…: tighter corners in a race line

Also… I must note… this is for a Visuals of the race line as a helper for the driver. Because weather I’m using Catmull rom with a 1 as resolution with is very blocky or something higher like 20 which makes real smooth curves…

Does not matter for the AI… because my AI driver is really following the chase rabbit with smooth turning angle… distanceToPoint.x / distanceToPoint.length gives you smooth turning Angle no matter if chase rabbit is following a low res spline curve or a hi res spline curve

But I wanted to generate a glowing mesh and drop on the race track to show the best race line to take corners… but again my AI driver can get away with low res Catmull rom splines… the race line visual looks crappy when low res… a bezier would solve the smooth/tight cornering race lines