Dynamic box beveling

[samevision]

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

[JohnK]

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

Bevelled or radius edges

Using ExtrudeShape it is straightforward to obtain a bevel along the edges parallel to the extrusion direction. https://www.babylonjs-playground.com/#VKIXD8 As far as I know there is no function to produce bevels along all the edge but you can extrude and lathe a set of shapes to form such a mesh, for example circular bevels - https://www.babylonjs-playground.com/#VKIXD8#5 straight bevels - https://www.babylonjs-playground.com/#VKIXD8#6 different size bevels - https://www.babylonjs-playgrou…

Bevel / Rounded Corners for Cubes at Render time

Nah, I haven’t yet found it… and not looking real hard. https://www.babylonjs-playground.com/#14VFYX#37 See line 22? Just add many of those lines, and push various “dangerous” values into those parameters. Dangerous shapes. Add some textures and scalings, some meshImpostors and sphereImpostors, some sparkly particles emitting from mesh normals, and boom… we’ve “3d-addicted” the NEXT generation of BJS mad scientists. Here is a search for playground series… with ‘superello’…

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

Some PGs from these

Babylon.js Playground

Babylon.js Playground

[samevision]

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.

[samevision]

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

[Evgeni_Popov]

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).

[samevision]

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.

[Evgeni_Popov]

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).

[samevision]

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

        }