Stitching curves together: Bézier paths

MackeyK24 · October 26, 2019, 10:19pm

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 ???

JohnK · October 26, 2019, 11:50pm

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 https://doc.babylonjs.com/how_to/how_to_use_curve3#custom-curve3-object

MackeyK24 · October 27, 2019, 6:20am

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

JohnK · October 27, 2019, 8:51am

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

MackeyK24 · October 27, 2019, 11:07am

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

JohnK · October 27, 2019, 1:21pm

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 p_i is the start point for curve i and the end point for curve i - 1 and where c_i is the control point for curve i

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

p₀, c₀, p₁, … p_i, c_i, p_{i + 1}, … p_n, c_n, p_{n + 1}

Each curve for i = 0 to n is made from

CreateQuadraticBezier(p_i, c_i, p_{i + 1}, nb_of_points);

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

p₀, c₀, p₁, … p_i, c_i, p_{i + 1}, … p_n, c_n

Each curve for i = 0 to n is made from

CreateQuadraticBezier(p_i, c_i, 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 p_i and p_{i + 1} but it does not pass through c_i, this control point determines the tangent to the curve as the curve goes from p_i to p_{i + 1}

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

MackeyK24 · October 27, 2019, 8:13pm

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 AI to drive along

JohnK · October 28, 2019, 12:07am

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.

MackeyK24 · October 28, 2019, 3:41am

Thanks for the info anyway @JohnK

JohnK · October 28, 2019, 8:54am

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)

github.com

Cubees/Cubees.github.io/blob/master/factory/shared/tools.js

function createTool(startNode,endNode,scene,num_of_steps) {
	var controlLines=[];
	var segments=[];
	var currentNode=startNode;
	var atStart=true;
	while(currentNode !== endNode || atStart) {	
		atStart=false;	
		if(currentNode.segmentType=="curved") {
			currentNode.ctrl1.marker.position.z = 0;
			currentNode.ctrl2.marker.position.z = 0;
			currentNode.segment = BABYLON.Curve3.CreateCubicBezier(currentNode.marker.position, currentNode.ctrl1.marker.position, currentNode.ctrl2.marker.position, currentNode.next.marker.position, num_of_steps);
			segments.push(currentNode.segment);
			controlLines.push([currentNode.marker.position,currentNode.ctrl1.marker.position]);
			if(currentNode.next !=null) {
				controlLines.push([currentNode.next.marker.position,currentNode.ctrl2.marker.position]);
			}
		}
		else {
			currentNode.segment = BABYLON.Curve3.CreateCubicBezier(currentNode.marker.position, currentNode.marker.position, currentNode.next.marker.position, currentNode.next.marker.position, num_of_steps);
			segments.push(currentNode.segment);

This file has been truncated. show original

github.com

Cubees/Cubees.github.io/blob/master/factory/extrude/funcs/bezier.js

function Bnode(name,x,y, size, holder) { //x,y coordinates of centre	
	this.name=name;
	this.x=x;
	this.y=y;
	
	this.ctrl1=null;
	this.ctrl2=null;
	
	this.next=null;
	this.prev=null;
	
	this.size = size;
	this.marker=new square(x, y, this, holder);
	this.segmentType="straight";
	
	//methods
	this.Bupdate = Bupdate;
}

This file has been truncated. show original

MackeyK24 · October 28, 2019, 10:02am

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.

TheLeftover · October 28, 2019, 1:01pm

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.

JohnK · October 28, 2019, 1:25pm

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?

MackeyK24 · October 28, 2019, 7:31pm

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

MackeyK24 · October 28, 2019, 7:47pm

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

Topic		Replies	Views
Create "Bezier" line of point array with "CreateQuadraticBezier" (not "CreateCatmullRomSpline") Questions	1	677	September 27, 2019
Questions about Path3D please help Questions	5	416	May 14, 2020
Curve3.CreateCatmullRomSpline Creates (nbPoints * 2) + 1 points? Questions	4	264	March 29, 2022
How to make arc within extrusion path mesh Questions	14	631	April 11, 2022
Why is my Catmull-Rom Spline being drawn incorrectly? Questions	20	1685	January 27, 2023

Stitching curves together: Bézier paths

Related Topics