Maths computed paths

The Ribbon is very adapted to elaborated maths computed meshes.You can easily start from an equation to get a full volumic complex shape.There are many ways to do it.

If you don't feel at ease with maths, here is a way to start :

First, let's have a small recall.

We just set points in space. These points have got each a set of three coordinates : x, y and z.We call here these points Vector3.

When we want to design a curve or a path in space, we need to get a collection of successive Vector3.We can't have an infinity of points.So we define a path with a certain number of Vector3. The more Vector3, the more smooth the curve and the more computations too.

As you can see, curve equations are often like this : f(x, y) = 0 or like this : y = f(x).This means y is expressed in function of x.This kind of equation is called a cartesian equation. It is probably the most used among mathematicians, but it won't help us a lot because we need to compute x and y (and z) simultaneously to set each Vector3.So we will prefer the parametric equations.In a parametric equation each different coordinate is defined in function of a parameter k :x = fct1(k)y = fct2(k)z = fct3(k)

So if you are given a cartesian equation, it is quite almost possible to translate it in a parametric equation.example with a parabola : y = x²the cartesian equation y = x * x will give the parametric equation :x = ky = k * kYou then give k values from -20 to 20 for example and you get your 40 successive Vector3 on the parabola. Easy, isn't it ?You now know the way to fill a path with successive Vector3 along a math curve.

Back to the Ribbon

Well, we just learnt how to fill a path but a Ribbon needs many paths (okay, we can still construct a ribbon with a single path too, but it's more complex), so how do we add different paths as there is no real interest to add many times the same path ?It's quite easy once you've got your parametric equation.

Let's get into javascript now.Your former parametric equation could be this way :

to derivate your first curve by varying x or y and iterating on z since adding each derivated path into a paths array,

to check again with BABYLON.Mesh.CreateLines("name", yourArray, scene) on each z iteration,

to finally build your ribbon with the paths array.

From Basic Shapes to Complex Ones

The Ribbon is very versatile. So you can redo every BabylonJS basic shapes.Why would you want to do this ?Well, you probably don't. There is no need to re-invent the wheel. But you could need to model your own shape which derivates from one of the basic shapes.The main rule should be :

if you need a basic shape as it stands, then use the provided BJS basic shapes.

if you need a shape made up of many basic shapes, then use Constructive Solid Geometry or merge provided BJS basic shapes.

if you need a computed shape having a symetry axis, then use the Tube mesh or the extrusion, which don't require many maths.

if you need something else, then use the Ribbon itself... and your maths skills.

Sphere

Let's try here to redo a sphere and then to modify it into something different.As you've seen in the former part, you need to create many paths to build a ribbon. For a sphere, you can imagine that you stack many circles, each circle being a path.To create a circle, you just set points at x = sin(angle) and z = cos(angle) and give angle some values between 0 and 2 x PI.

Now, you add circles along the y-axis, making the radius evolving with another angle p varying from the sphere south pole -PI / 2 to its north pole +PI /2. These circles (path) are stored in an array called paths :

You get (almost) a sphere.To get a nice full sphere, you need to complete the missing point at north pole and set the ribbon closePath parameter to true instead of manually close each circle after the former iteration :

Pretty much maths and iterations o far to get a simple sphere, isn't it ?This is why you should really use the BJS provided sphere if you only want a sphere !

But don't worry, all those efforts so far aren't vain. From now, let's the magic happens with only little changes ...Remember : the for loop iterating on p is for the south to north pole angle. What if you don't increment p until PI / 2 but stop before, say at PI /2 - 1.5 :

Well, it's no longer a sphere, but a symetric shape you could probably have got in a simpler way with a Tube mesh or with CSG ... or not.Since you wrote the initial sphere maths code, you've added until now very few changes to get this derivated shape.
Too symetric, not enough, ok ? let's morph it once more so you get out the CSG or Tube way : let's moderate x with an extra cosinus function