Jump to content

creating a closed slice of a cylinder


Recommended Posts

@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 :)



Link to comment
Share on other sites

  • 4 weeks later...

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.




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

Link to comment
Share on other sites

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 :D .


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)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...