Capping extruded shape not working?

Hi, I am new to babylon.js and this forum.

Currently I am trying to cap an extruded shape. The cap is being added, but it is not correct. Can you please check and let me know if that’s a bug, or just me doing something wrong?

https://www.babylonjs-playground.com/#G0A3MW

Hi @oli and welcome to the forum. The issue is that the shape you are extruding is concave and the capping method does not work with concave shapes.

You can combine ExtrudeShape and CreatePolygon to get what you want https://www.babylonjs-playground.com/#G0A3MW#1

If you do not want the final mesh to be open you can just use ExtrudePolygon

https://www.babylonjs-playground.com/#G0A3MW#2

3 Likes

Thank you very much for this quick answer and even coding the example solution to the problem. Exactly what I needed!

The two solutions you provided have a very different visual appearance - especially visible in that little “rounded” corner of the shape. While the solution based on ExtrudeShape is very smooth (actually smoother than it is defined), the solution based on ExtrudePolygon is not smoothed at all (it shows the true shape as defined).

Now, what I would like to have is a solid which allows boolean operations with other solids, but with a smooth surface like the one provided by ExtrudeShape. Is that possible? And if so - how?

The issue here is the formation of a mesh and whether vertices are shared or not. In the ExtrudeShape vertices are shared, in the ExtrudePolygon they are not. See https://doc.babylonjs.com/resources/normals

In this PG (playground) the extrusion has been converted to a flat shaded mesh and so has a similar appearance to the one created using ExtrudePolygon.

Can this be reversed? It can using

mesh.forceSharedVertices()

However this does not really help you since if you apply it to the ExtrudePolygon shape it also forces the cap and the side edges to share vertices which alters the appearance of the shape due to how the normals effect lighting

So the best case for you seems to be to use ExtrudeShape and Polygon for the caps.

Have you seen GitHub - CraigFeldspar/BabylonCSG: Constructive Solid Geometry in BABYLON.js

2 Likes

Thanks again for your quick answer and the demos. Now there is only one (maybe stupid, but important) question left: When I have the extrusion (made with MeshBuilder.ExtrudeShape) and the 2 caps (made with MeshBuilder.CreatePolygon) - I “visually” have a smooth solid extrusion, but actually it is 3 meshes. How can I combine those 3 meshes to make it 1 - which I then use to create a CSG (using CSG.FromMesh)?

You can merge the meshes https://www.babylonjs-playground.com/#G0A3MW#6

2 Likes

Yesss! :slight_smile: Now it’s 100% how I need it. Thank you very much for your support!

2 Likes

Holly Molly !!! @JohnK I love reading your answers !!!

2 Likes

omg… ive been looking for this for days…
thanks very much

1 Like

Hello everyone,

I am interested in using the solution you developed in this thread.
However, it seems that there is still a normal/light issue with the final result.

As you can see here: https://www.babylonjs-playground.com/#G0A3MW#38
We have weird gradients appearing on the different faces.
This can be easily fixed using convertToFlatShadedMesh (see line 46)
But then you lose the smooth edges.

Is there a solution to have the correct light while keeping smooth edges?

Thanks for your help

You can subdivide the mesh (by calling increaseVertices) and call createNormals to regenerate the normals:

Note that it is expected to get this black polygon, because the light direction is in the (xz) plane.

Thanks for the suggestion.

From my point of view, it doesn’t seem to be OK if you check it with these light parameters:

The above is darker here and I don’t understand why:
Screenshot 2023-10-21 at 16.54.52

And it seems like the flat shaded is back:
Screenshot 2023-10-21 at 16.54.39

As said in 2020 by JohnK in previous messages, is there really no way to have smooth edges using ExtrudePolygon ?
I have made this simple playground if needed:

Thanks :wink:

I have tried to recalculate the vertex normals so that a given normal direction is counted only once when calculating the average of all normals at a vertex location (the default algorithm used by createNormals simply calculates the average of all face normals at a vertex location, even if several faces have the same normal):

It seems to work as expected in this example.

In your other example, combining with forceSharedVertices, it’s a little better:

The end result still depends on the tessellation of the shape, but the normals look ok:

Hi @Evgeni_Popov, I wish you a great start to the week.

Thanks for adding optimizeNormals function, it seems to be working with ExtrudeShape. :raised_hands:

I made another playground to compare the result using ExtrudePolygon function:

When adding forceSharedVertice line 157, the result with light doesn’t look ok yet.
You said that it depends on the tessellation of the shape, can this be corrected too?

Using ExtrudeShape method, I do have the result I am looking for:

I’m afraid it’s related to how the algorithm for ExtrudePolygon work. It seems it creates new vertices for each face and vertices are never shared, contrary to ExtrudeShape. So, when you try to use forceSharedVertices / optimizeNormals on the generated mesh, you don’t get the same result. I don’t see how to make ExtrudePolygon behaves the same as ExtrudeShape

I understand this is not easy. Otherwise, I am sure you would have already made it work.
The solution using ExtrudeShape provides a great result. This is not the cleanest solution in terms of code but the end justifies the means as we say.

Have a great day @Evgeni_Popov :wink:

Hello @Evgeni_Popov, I have one last issue with the ExtrudeShape version of the card and this is concerning UVs.

As you can see in this playground

I put side by side the ExtrudeShape and ExtrudePolygon versions using the same PBRMaterial.
I want my albedo texture to be only on the front of the Card which is what I have with the ExtrudePolygon but not with ExtrudeShape as it also appears above the Card.

I tried to play with different face UV but nothing has worked so far.
How could I correct that ?

In your case, you can simply set all the uv to (0,0) for your extrusion:

1 Like