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.

1 Like

Search in Google for Babylonjs superellisoid leads to

courtesy of @javalang unfortunately not seen since Dec '18

1 Like

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