Approaches for Bevel (Rounded Corner) Cubes (at render time)

Hi,

I started wondering if it was somehow possible to have cubes with rounded corners, which make them appear to be more realistic.

For anyone not knowing what I am looking for, see the blender docs here:

https://docs.blender.org/manual/en/latest/modeling/meshes/editing/subdividing/bevel.html

However, we have some constraints:

We are showing a scene that potentially has a lot of cubes (could be thousands) which have a bunch of different standard materials on them.

As the material count is very limited and the amount of different geometry is as well, we are making excessive use of mesh instancing. We are basically caching meshes by keys constructed from shape type + material ID, normalize the stored shapes (so their bounding boxes are always 1x1x1) and then we instance them and use scaling to get them to appear in the size according to the data requirements.

I wrote those details to make clear that creating an actually beveled cube is probably not an option, because scaling it will scale its bevel, too and that may lead to absolutely undesireable visual effects (e. g. the bevel is too small or too large).

I rather want to have a unified bevel size independent of the actual mesh size and I saw that in blender 2.8, that can now be achieved via shaders at render time.

So… My question would be if that could also be done at render time via a shader in BJS or if anyone has a different idea that won’t blow the scene performance.

Hi jacquesr,

I’m not sure I fully understand the pattern you’re looking to achieve in terms of not scaling the bevel. Do you want the bevel to be of a constant size in screen space? Or in world space? I think both are probably possible, the screen space version would probably just be a bit trickier.

For the world-space version (speaking off-the-cuff here without having tested any of this :upside_down_face:), you could abuse the fact that you know you’re using cubes to achieve this by having the normals of your cube vertices pointing directly away from the cube’s center, not orthogonal to the cube’s faces as they would normally be. Then, in your pixel shader you could use the dot product between the interpolated normal (which would behave like the normal of a sphere) and the face normal (which you’d probably need to calculate and pass along from the vertex shader) to determine how near you are to an edge, then use that “distance” to interpolate between using the face normal for the majority of the face and the computed normal on edges. The shape of your interpolation function would determine the “size” of the bevel, so you’d be able to warp it to counteract a scale variable as long as you told the shader about that variable. That’s the most efficient way I can think of to accomplish this since all the beveling would happen in the shader, and it probably wouldn’t add many more cycles since it’s all relatively simple math.

Again, that’s totally off-the-cuff, and I haven’t actually implemented any of it. For what it’s worth, though, does it sound like it might be a reasonable approach for your use case?

Did you have a look at this: unity3d - Shader to bevel the edges of a cube? - Stack Overflow ?

Hi,

I want the edges to be of unified size in world space (I guess… to be honest, playing around with some parameters may reveal that this might not be the optimal solution)

Your approach sounds exactly like what I want to achieve. Now all that stops me is that the math is more than 10 years ago and I have no experience in shader programming.

Easy… :smiley:

I may give that a shot!

@Evgeni_Popov

I will have a look at that, thanks for the link!

Hey @jacquesr did you ever figure this out?

Hi josh,

actually no. We didn’t further persue the idea as it was really only considered a gimmick for what we use 3D for. To achieve an overall consistent look and feel, it would also not have been enough to have this kind of smoothening of edges on cubes but it then would have had to be on everything that is in our scenes, which can still be a variety of shapes.

We still use babylonjs though, maybe there is a shader already now that can somehow handle this? I didn’t look for it for quiet a while.

@Deltakosh I think this is an interesting topic as it can have positive impact on any scene. Maybe you can provide some input here? Is there anything that can be done? Are there shaders in BJS or maybe plans to include this as a shader in the future? I have no idea if there is a solution to this problem without actually enhancing the information available on the meshes, which was one of the proposes solutions in the past.

Nevertheless, having post processing for bevel edges would be awesome. It’s just that it is entirely out of reach for me. I personally would need a solution that works on screen space rather than object size as these sizes can vary a lot and since we make heavy use of mesh instancing, creating one beveled mesh and clone (or instance) it would not be a feasible solution for our software since scaling would also scale the bevel and we have scaling magnitudes of 10000 oder 100000 or more…

I would probably think about it at the geometry level to be more performant. It would also be more precise and compatible with all shaders

Stay tuned. I have something I’m working on which could help

4 Likes

David did, indeed, had something he was working on which can help: Node geometry by deltakosh · Pull Request #14141 · BabylonJS/Babylon.js (github.com) :slight_smile:

Can you share how this new code can be used for the effect?

Here’s one example of how it could be done: Babylon.js Node Geometry Editor (babylonjs.com) (note that it’s done on only one face for explanation purposes)

2 Likes

nice work @carolhmj !!!

1 Like

NGE is too fun to play with :wink:

1 Like