Bevel / Rounded Corners for Cubes at Render time

Hi,
i was wondering if there was any possibility to achieve classic bavelling in babylon, quite similar to the Bevel-Modifier in Blender:
https://docs.blender.org/manual/en/latest/modeling/meshes/editing/subdividing/bevel.html

I have already seen approches in three.js with ExtrudeBufferGeometry which makes this kind of bavelling possible.
Transferring the three.js source code ExtrudeBufferGeometry SourceCode in Babylon is a bit over my head as a beginner :slightly_smiling_face:

Hope i made clear what im looking for, thanks in advance :blush:

1 Like

Hi flo, nice to meet you :slightly_smiling_face:

Pinging @jacquesr from this post:

1 Like

hi
this is from old froum
https://www.babylonjs-playground.com/#1ZEABJ#199

3 Likes

https://www.babylonjs-playground.com/#19LRMI#44

Here, too. Someone doing something dangerousā€¦ with a super-ellipsoid. hmm. :slight_smile:
Hi Naz! Hi to you, too, Florianā€¦ we hope you have had soft-edge success (4 months ago)

There is a BETTER super-ellipsoid playground here, somewhereā€¦ had many shapesā€¦ pyramids, boxes, convex/concave-curved box sidesā€¦ all sorts of stuff. I canā€™t find the playground anymore.

Soft-edge mesh are cool, huh? They change the ā€œfeelingā€ of a scene. The same happened when HTML/GUI allowed round edges. It sort of changed the feel of GUIā€™s. For some timeā€¦ EVERY GUI wanted to be round-corneredā€¦ but then ā€œthe trendā€ subsided a bit.

ā€œGo rounded or stay groundedā€ :slight_smile: (airplane tire company motto?)

2 Likes

Alternative Bevelled or radius edges

3 Likes

ā€œBETTER super-ellipsoid playground hereā€ - I want to do dangerous things too! Anyone located them?

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

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

Here is a search for playground seriesā€¦ with ā€˜superelloā€™ somewhere in their codes. Babylon.js Documentation. Party on.

Update: https://www.babylonjs-playground.com/#14VFYX#0 Thatā€™s the one I was searching-for. I wonder who coded it. An interesting system, just like the other cool ideas/solutions in this thread. It seems to be all 6 or 8 -sided mesh, so far. No mention of ā€˜Catmullā€™ either. :wink: I think Mr. Catmull was involved-in converting existing sharp-edged meshā€¦ into round-edged. These Super-Elloā€™s are actually ā€œgrownā€ with rounded edges, so no Catmull-ish filing or grinding required. :smiley:

Those rounded edges really improve child playpen swallow-ability. hah.

3 Likes

Search in Google for Babylonjs superellisoid leads to

courtesy of @javalang unfortunately not seen since Dec '18

2 Likes

Hey guys, thanks for your responses and the shared playgrounds.
Because I havent had found any workarounds 4 months ago, I decided to give it a shot by myself.
It surely is no the smartest or fastest approach and its pretty hard to read, even for me now looking back on my code. :smiley:

My goal was to create a box which has a tiny bit of bevel on the edges and corners, small enough that you hardly notice it, but big enough to add a little touch of realism to the box. I also wanted to use additional geometry as little as possible for performance reasons, so I only used 2 segments and worked my head around the topic smooth shading.
I couldnt use the babylon function forceSharedVertices() to achieve the smooth shading, it was necessary too keep all the vertices (even if they are at the same position) because I had to texture them differently. So I manipulated the vertex normlas by myself and achieved a nice smooth shading effect which looks pretty nice if you dont scale the bevel up toooo much :slight_smile:

I did code locally, but the moment I saw some people are interested in this topic I created this playground. Its sometimes formatted a bit odd, sorry for that :smiley:

https://playground.babylonjs.com/#IBL2BR#3

1 Like

Hi guys,

I just wrote an alternative solution to solve this issue, based on the following C++ snippet:

The approach here is to create the mesh primitive directly using several for-loops.
I bet itā€™s difficult to find a more efficient solutionā€¦

https://playground.babylonjs.com/#AY7B23

Cheers,
Fabien

5 Likes

Hi Fabien,

I use your RoundedBox class and it works fine, but I wonder if itā€™s possible to use a material with a texture with it. Somehow the box gets a solid color that is about the same as the texture, but not the texture itself:


        const roundedBox = new RoundedBox(2, new BABYLON.Vector3(1, 1, 1), 0.2);
        const box = roundedBox.toMesh('RoundedBox', scene);

        let materialWood = new BABYLON.StandardMaterial("wood", scene);
        materialWood.diffuseTexture = new BABYLON.Texture("textures/crate.png", scene);
        materialWood.emissiveColor = new BABYLON.Color3(0.5, 0.5, 0.5);
        box.material = materialWood;

Any idea?

The RoundedBox class does not generate uv coordinates, thatā€™s why textures donā€™t work.

1 Like

Sorry for the late answer.

As Evgeni told, the snippet doesnā€™t contain uv map, so texture wonā€™t work as is.
But, if you are not afraid with maths and programming, adding the uv map shouldnā€™t be so complicated, for example by applying a spherical projection for each vertex.
Unfortunately, this snippet doesnā€™t interest me anymore, so I have no time to do this for you.

Cheers,
Fabien

I see, thank you for your reply.
I donā€™t understand uv-coordinates enough to do it myself yet. Maybe Iā€™ll try later :slight_smile:

1 Like