Create edge banding for a furniture product

[Sambler]

Hello everyone.

I have a task to create edge banding for a furniture product.

The goal is to achieve the highest possible level of realism, similar to the example shown below.

In the example shown above, it’s implemented in Three.js, and it seems they have some special functions that make it possible to achieve that effect (one main part and four edge-banding parts that are attached to the product).

Could you please suggest possible approaches or solutions to achieve this?

I have seen many discussions on forums about how something like this can be implemented, but they all boil down to very complex mathematics and a huge amount of code. For a small task this might be acceptable, but for solving my problem it does not seem to be the right approach.

I tried several different methods, for example using MeshBuilder.ExtrudePolygon.

The result looks like this:

Overall it looks pretty good, but I still can’t achieve the same effect as in the photo above.

Next, I tried using another method, but the resulting mesh ends up looking very ugly, and the mathematical code becomes very complex:

Does anyone have ideas or suggestions on how edge banding can be implemented in other ways for furniture products?

An important clarification: the products may contain cutouts, and edge banding is also required in those areas.

[sebavan]

NGE might help here cc @Deltakosh Babylon.js docs

[Deltakosh]

oh yeah this is the perfect candidate for Node Geometry Editor!

[Sambler]

It’s very interesting, but nothing is clear.

[Deltakosh]

Let me summon @PirateJC who have extensive knowledge on how to use nge to create assets

[PirateJC]

Hey @Sambler Love the project idea. Edge banding in NGE is a really cool idea.

I think you’re asking about 2 different subjects.

1. How do you create the geometry?
2. How do you make it look photo-real?

Both of these are big questions with a lot of different ways you can answer them.

Is it only the edge banding that you want to create? What about the cabinets? Do those assets already exist?

[Sambler]

Hi @PirateJC

Yes, at the moment I already have products created with separate parts; this was done using MeshBuilder.CreateBox.

An example is shown in the screenshot below:

My team is trying to achieve photorealism using PBR textures, for example. We’re having some difficulties with that as well, but hopefully we’ll resolve this issue soon.

Here’s the thread where we discuss the problem: https://forum.babylonjs.com/t/black-pbr-texture-under-environment-lighting-in-node-material/62154/18

I’m using all the knowledge I can find online and testing it in our project.

Right now, we want to improve the visual appearance of the whole project by adding edge banding, because the edges of the parts stretch in an ugly way when a texture is applied to them.

That’s why I want to try creating edge bands.

If you have any more questions, feel free to ask — I’ll be happy to answer.

I understand that you’re suggesting creating the edge banding using NGE, but I still don’t fully understand how this can be implemented.

[PirateJC]

If you’d be willing to share an asset, I’d be happy to mock up a simple example of an approach to generating edge banding with NGE.

[Sambler]

I can’t provide the project’s source code, as it is still under development.

However, if possible, you could create a simple BOX part sized 600×600 with a thickness of 18 mm and try it on that.

I’d like to see the general principle of how this should work and understand whether this approach would be suitable for my project.

1. The edge banding should be applied to all edges (including parts with cutouts).

2. The edge banding can have different colors (for example, the front edge one color and the back edges another).

3. There may be no edge banding at all.

There are many different scenarios — everything depends on the client’s requirements.

[PirateJC]

Sorry about the delay on this!

Ok without the assets I can only provide a VERY simple example of how you can create edge banding geometry using the Node Geometry Editor.

https://nge.babylonjs.com/#U3HHGI

The white represents a cabinet panel and the black is the edge banding geometry.

These nodes create a single cabinet panel:

The nodes inside the blue frame create the edge banding:

In very simple terms, it starts by using the same box dimensions as the panel itself, then it sets the y-value of the positions of the vertices to be at the top of the panel’s bounding box in Y and then adds the panel thickness for the top vertices. Pretty simple and straight forward.

This is only for dynamically creating the geometry itself. Creating the material is an entirely different topic. I hope that’s a little bit helpful to you.

[Sambler]

Honestly, I tried to do something, but so far this is the only result I’ve managed to get:

https://nge.babylonjs.com/#U3HHGI#2

1. I don’t understand what needs to be done to implement rounded corners (there is no Bevel node in the list).

2. I don’t understand how to implement a curved / non-linear part (for example, a part with a cutout in the middle).

I want to implement these two things in order to make sure that this approach suits my needs and that I would be able to use it in my project.

Here are a couple of examples from other programs that we work with:
I need to achieve exactly this kind of effect.

[PirateJC]

You can easily get the cutout shape using the Boolean node.

As for Bevels - That’s where we’d need to bring @Deltakosh back into the conversation. This is an open request that we’re actively looking at adding, however it’s extremely technically challenging.

[Deltakosh]

Yes so far I do not plan to add it as out geometry storage (using triangle) makes it UTTERLY complicated

[Sambler]

In that case, these methods won’t work for me.

Thank you all for your help.