# Capping extruded shape not working? **URL:** \ **Category:** Bugs\ **Created:** [March 9, 2020, 12:24pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070 "2020-03-09T12:24:35Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\ **Post date:** [March 9, 2020, 12:24pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/1 "2020-03-09T12:24:35Z")
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](https://www.babylonjs-playground.com/#G0A3MW) ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [March 9, 2020, 1:57pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/2 "2020-03-09T13:57:47Z")
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](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](https://www.babylonjs-playground.com/#G0A3MW#2) ---
**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\ **Post date:** [March 9, 2020, 2:09pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/3 "2020-03-09T14:09:37Z")
Thank you very much for this quick answer and even coding the example solution to the problem. Exactly what I needed! ---
**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\ **Post date:** [March 9, 2020, 2:35pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/4 "2020-03-09T14:35:00Z")
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? ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [March 9, 2020, 3:34pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/5 "2020-03-09T15:34:44Z")
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](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. > **[Babylon.js Playground](https://www.babylonjs-playground.com/#G0A3MW%234)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Can this be reversed? It can using ```javascript 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 > **[Babylon.js Playground](https://www.babylonjs-playground.com/#G0A3MW%235)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes So the best case for you seems to be to use ExtrudeShape and Polygon for the caps. > [@oli](#): > > 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? Have you seen [GitHub - CraigFeldspar/BabylonCSG: Constructive Solid Geometry in BABYLON.js](https://github.com/CraigFeldspar/BabylonCSG) ---
**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\ **Post date:** [March 9, 2020, 3:57pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/6 "2020-03-09T15:57:22Z")
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)? ---
**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\ **Post date:** [March 9, 2020, 4:19pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/7 "2020-03-09T16:19:23Z")
You can merge the meshes [https://www.babylonjs-playground.com/#G0A3MW#6](https://www.babylonjs-playground.com/#G0A3MW#6) ---
**Author:** ![oli](https://avatars.discourse-cdn.com/v4/letter/o/2bfe46/32.png) [@oli](https://forum.babylonjs.com/u/oli)\ **Post date:** [March 9, 2020, 4:25pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/8 "2020-03-09T16:25:29Z")
Yesss! 🙂 Now it’s 100% how I need it. Thank you very much for your support! ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [March 9, 2020, 5:09pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/9 "2020-03-09T17:09:56Z")
Holly Molly !!! @JohnK I love reading your answers !!! ---
**Author:** ![Burak\_Dogmus](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/burak_dogmus/32/7661_2.png) [@Burak\_Dogmus](https://forum.babylonjs.com/u/Burak_Dogmus)\ **Post date:** [June 10, 2020, 10:27pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/10 "2020-06-10T22:27:14Z")
> [@JohnK](#): > > `mesh.forceSharedVertices()` omg… ive been looking for this for days… thanks very much ---
**Author:** ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)\ **Post date:** [October 21, 2023, 11:14am UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/11 "2023-10-21T11:14:12Z")
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](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 ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 21, 2023, 1:15pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/12 "2023-10-21T13:15:08Z")
You can subdivide the mesh (by calling `increaseVertices`) and call `createNormals` to regenerate the normals: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#G0A3MW%2339)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Note that it is expected to get this black polygon, because the light direction is in the (xz) plane. ---
**Author:** ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)\ **Post date:** [October 21, 2023, 3:01pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/13 "2023-10-21T15:01:40Z")
Thanks for the suggestion. From my point of view, it doesn’t seem to be OK if you check it with these light parameters: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#G0A3MW%2341)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes The above is darker here and I don’t understand why: ![Screenshot 2023-10-21 at 16.54.52](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/0/c0a1f82111aa0ce85d85fcee6a8927b8a5743822.png) And it seems like the flat shaded is back: ![Screenshot 2023-10-21 at 16.54.39](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/5/e5b55f6853ff246c5a40da6034114f60d52be5b8.png) 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: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#NNPEZE%2325)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes Thanks 😉 ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 23, 2023, 10:54am UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/14 "2023-10-23T10:54:33Z")
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): > **[Babylon.js Playground](https://playground.babylonjs.com/#G0A3MW%2344)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes It seems to work as expected in this example. In your other example, combining with `forceSharedVertices`, it’s a little better: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#NNPEZE%2326)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes The end result still depends on the tessellation of the shape, but the normals look ok: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/d/ed749327bd808b7cd8da31165329e9a25a7441b7.png) ---
**Author:** ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)\ **Post date:** [October 23, 2023, 4:02pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/15 "2023-10-23T16:02:23Z")
Hi @Evgeni_Popov, I wish you a great start to the week. Thanks for adding `optimizeNormals` function, it seems to be working with `ExtrudeShape`. 🙌 I made another playground to compare the result using `ExtrudePolygon` function: > **[Babylon.js Playground](https://www.babylonjs-playground.com/#NNPEZE%2327)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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? ---
**Author:** ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)\ **Post date:** [October 23, 2023, 4:15pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/16 "2023-10-23T16:15:13Z")
Using `ExtrudeShape` method, I do have the result I am looking for: > **[Babylon.js Playground](https://playground.babylonjs.com/#G0A3MW%2345)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 24, 2023, 10:00am UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/17 "2023-10-24T10:00:00Z")
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`… ---
**Author:** ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)\ **Post date:** [October 24, 2023, 11:53am UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/18 "2023-10-24T11:53:59Z")
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 😉 ---
**Author:** ![PichouPichou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pichoupichou/32/316_2.png) [@PichouPichou](https://forum.babylonjs.com/u/PichouPichou)\ **Post date:** [October 29, 2023, 4:27pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/19 "2023-10-29T16:27:55Z")
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](https://playground.babylonjs.com/#G0A3MW#52) 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 ? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [October 30, 2023, 12:17pm UTC](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070/20 "2023-10-30T12:17:28Z")
In your case, you can simply set all the uv to (0,0) for your extrusion: > **[Babylon.js Playground](https://playground.babylonjs.com/#G0A3MW%2353)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes [Next page](https://forum.babylonjs.com/t/capping-extruded-shape-not-working/9070.md?page=2)