Dynamic box beveling

Hello,

I try to create dynamic boxes individual bevels. I was already able to create vertical bevels but I am stuck with the horizontal part. I created vertical bevels like this: https://www.babylonjs-playground.com/#GW2F0U#15

The box should look like this for example with horizontal beveling set to 1 segment:

My idea wasto create the horizontal bevels with scaling each level of my shape. So the ground (level 0) has specific vertices. Level 1 should extrude vom the same vertices along y-axis and increase scaling. But I realized that the shape of level 1 doesn’t equal the shape of level 0 due to the vertical bevels, so I have no clue how to solve this.

Best

A search for bevel in the forum will bring several useful topics on this subject which include PGs, eg

including a link to one in the old forum HTML5 Game Devs Forum - HTML5GameDevs.com

Some PGs from these

1 Like

Thanks for your reply. I read all these posts already but I am still not sure how to adapt them. My goal is to have control over all edges and each corner.

  • So I can say the edges should be hard or smooth with 10mm size for instance.
  • In addition to that I want to state the type of each corner (hard/smooth). I accomplished that in my pg above.

#1

https://www.babylonjs-playground.com/#14VFYX#42

This example is nice because I am able to adjust vertical as well as horizontal bevels. But in comparison to my pg you are not able to adjust the radius of the bevels. And the bevels are not symmetrical if the box isn’t symmetrical. Setting the height to a lower value that the width and length leads to a tiny bevel on the sides of the box and a huge bevel on top face.

#2

https://playground.babylonjs.com/#VKIXD8#21

This example breaks when setting the length and width zo equal values. It also breaks for small bevels.

I think my initial approach should be fine. So I only have to scale down the shape to build my box. So I can generate all the vertices for my box but I am not sure how to fill the spaces.

https://www.babylonjs-playground.com/#GW2F0U#17

Do you have an idea how to do that? Maybe with extrudeShape? I don’t get how to scale along the path. It just scales the complete mesh but that’s not successively like with rotation: https://playground.babylonjs.com/#MR8LEL#75

I’m not sure you can do this with a single extrude shape… You may need to make an extrudeShape for each corner (or for a single corner then clone and adjust the transformation matrix for each) and for each side (or clone).

Isn‘t it possible extrude and scale simultaneously. If I set the rotation the shape gets rotated along the path. Scaling should behave the same way but it just scales the extruded shape in general.

rotation (float, default 0 radians) is the angle value to rotate the shape each step (each path point), from the former step (so rotation added each step) along the curve

scale (float, default 1) is the value to scale the shape

Level 0 shape: scale 1
Level 1 shape: scale 1.25
Level 2 shape: scale 1.25
Level 3 shape: scale 1

In this pg (https://playground.babylonjs.com/#MR8LEL#75) I use 3 extrudeShapes.

scale is a single global value, it is not added at each step as rotation is. In your case it wouldn’t work, anyway, because you need to make it grow at step 2 then decrease at step 4.

Given your simple shape, I think I would simply create the mesh “by hand”, by providing the vertices and the indices (but I’m not really experienced with extrudeShape, maybe there’s a simple way to make it work in your case).

I was able to solve it with extrudeShapeCustom and a custom scale function:

scaleFunction: i => {

            if (i === 0 || i === 3) return 1

            else return 1.25

        }
1 Like