creating a closed slice of a cylinder

[JohnK]

@Jerome - have been having a play with the arc parameter for the cylinder and I needed to add some sides to get a nice piece of cake.  http://www.babylonjs-playground.com/#KSSIF

 

As you can see have added my own. What do you think about the possibility of adding a boolean parameter in the options to say whether this was wanted or not.  This would just be for the cylinder as I can see that the sphere, ribbon etc would be much trickier. What do other members think?

 

Name for such an option enclose?

 

Not that you are not busy enough already

 

 

[jerome]

I had this idea also when I implemented the parameters arc and slice 

So it's in my backlog !

I'm tweaking the core-SPS currently.  

 

And you've still provided the right name that I would have looked for for days, thank you 

[jerome]

After thought, I will need to implement first the rings to cylinder, before the "piece of cake"

[jerome]

The enclose feature is merged for the cylinder.

I will let you know how it works soon.

Basically : 

BABYLON.MeshBuilder.CreateCylinder("c", { arc : 0.6, enclose: true }, scene);

This will close the section of an opened cylinder. Maybe useful to make pie charts, for instance.

I will tweak it (not already done) for the user can set a different color and texture per surface : top and bottom cap, tubular surface (current behavior) and each for each quad closing the sliced cylinder.

http://www.babylonjs-playground.com/#1XVEKZ

 

 

Moreover, a new feature has been added : hasRings. This makes sense only for a cylinder with several subdivisions (at last, a real simple use for these subdivisions !) 

BABYLON.MeshBuilder.CreateCylinder("c", { subdivisions: 5, hasRings: true }, scene);

This will make each height subdivision independent so it will be able to have its own color or texture (not yet implemented, soon). This means each cylinder stripe will then be an independent surface.

Of course, this works together with enclose also.

A ring is just an independent subdivision.

 

So you will have then to consider an array of surfaces to set colors/textures.

Given a sliced cylinder with 3 rings for instance, this array will have 8 surfaces and will always be sorted this way :

ar[0] = bottom cap

 

ar[1] = first ring, tubular surface

ar[2] = first ring, first section quad

ar[3] = first ring, second section quad

 

ar[4] = second ring, tubular surface

ar[5] = second ring, first section quad

ar[6] = second ring, second section quad

 

ar[4] = third ring, tubular surface

ar[5] = third ring, first section quad

ar[6] = third ring, second section quad

 

ar[7] = top cap

 

 

More generally: 

 

ar[0] = bottom surface

then one array element per ring if not sliced or 3 elements per ring (1 tubular + 2 quad surfaces) if sliced

ar[last] = top surface

 

 

Once this done, I will try to do this with the sphere what is more complex because it can be sliced horinzotally and vertically (arc + slice parameters).

And then the tube ... all as live updatable parameters aaarrrgg

[jerome]

Cylinder colors per surface (rings and sections if any) just added.

[jerome]

Just PR the UV (texture) per ring and per section quad if any.

I'll make demos as soon as it is pushed in the PG, it's easier to understand than to explain .

 

This will allow to design pie charts for example, or cake slices or whatever.

 

It was more complex than I expected initially. I wish I can do the same for the Sphere also (rings + enclose + color/texture per surface)

[jerome]

Examples :

 

This cylinder has 3 subdivisions, but no rings, so it has 3 surfaces (top and bottom cap + tubular surface).

We can then set 3 different colors with the parameter faceColors: http://www.babylonjs-playground.com/#1NLHLN

Or 3 different images from the same texture file with the parameter faceUV as you already know : http://www.babylonjs-playground.com/#1NLHLN#1

 

Now, if we set its parameter hasRings to true, each subdivision become independent (a ring) and can have its own color : http://www.babylonjs-playground.com/#1NLHLN#2

As you can see, the array colors  has now 5 elements, one per surface : top and bottom caps + 3 ring surfaces.

Of course, this works also with texture images : http://www.babylonjs-playground.com/#1NLHLN#3

 

Remember that we can always slice a cylinder by using the parameter arc what has the default value 1 : http://www.babylonjs-playground.com/#1NLHLN#3

If we set the parameter enclose to true, two extra quads per ring will be added to close the cylinder section : http://www.babylonjs-playground.com/#1NLHLN#5

You can notice that the array colors has now 11 elements, always one per surface : 2 caps + 3 rings x (1 tubular surface + 2 quad surfaces) = 2 + 3 * 3 = 11.

 

The surfaces are always ordered this way :

0 : bottom cap

1 ... n:  n ring surfaces

last : top cap

 

If enclose is false, a ring surface has one element.

If enclose is true, a ring surface has 3 elements : tubular surface, quad 1, quad 2

Note that if enclose is true and arc equals 1, you won't see the section (full cylinder, the quad aren't even generated in this case) but, for consistency reasons, the ring surface has still 3 elements. In other terms, whatever the value of the parameter arc, if enclose is true, there are 3 surfaces per ring.

 

Obviously, it works also with texture images : http://www.babylonjs-playground.com/#1NLHLN#6