# Visual bug with extrusion?

**URL:** <https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435>\
**Category:** Questions\
**Created:** [December 8, 2020, 4:17pm UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435 "2020-12-08T16:17:20Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Danilo\_Vukovic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/danilo_vukovic/32/12814_2.png) [@Danilo\_Vukovic](https://forum.babylonjs.com/u/Danilo_Vukovic)\
**Post date:** [December 8, 2020, 4:17pm UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/1 "2020-12-08T16:17:20Z")

</div>

Hi, I am trying to extrude a polygon that gets its data from GEOJson, and is then converted to XYZ (with Z being all 0s). When i try to extrude using:

> const polygon\_triangulation = new BABYLON.PolygonMeshBuilder(“zgrada”, points);  
> const polygon = polygon\_triangulation.build(false,1);

I get this weird visual bug where the sides are only visible when you are NOT looking at them directly, or maybe it isn’t a bug I dont know.  
 ![Screenshot_1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7633140b89ef57d09f2e2040bdc4a478b11da5c1.png)

---

<div class="post-metadata">

**Author:** ![Danilo\_Vukovic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/danilo_vukovic/32/12814_2.png) [@Danilo\_Vukovic](https://forum.babylonjs.com/u/Danilo_Vukovic)\
**Post date:** [December 8, 2020, 8:33pm UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/2 "2020-12-08T20:33:57Z")

</div>

bumb bump ahh

---

<div class="post-metadata">

**Author:** ![Mercurio](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mercurio/32/23383_2.png) [@Mercurio](https://forum.babylonjs.com/u/Mercurio)\
**Post date:** [December 8, 2020, 8:44pm UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/3 "2020-12-08T20:44:08Z")

</div>

I think a PG may help understand better

---

<div class="post-metadata">

**Author:** ![Danilo\_Vukovic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/danilo_vukovic/32/12814_2.png) [@Danilo\_Vukovic](https://forum.babylonjs.com/u/Danilo_Vukovic)\
**Post date:** [December 8, 2020, 8:45pm UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/4 "2020-12-08T20:45:40Z")

</div>

Wait let me get the data right then, I would have posted it at first but it uses GEOJson data that it converts from unprojected to projected, so the X’s and Y’s end up in 5 million range.

---

<div class="post-metadata">

**Author:** ![Mercurio](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mercurio/32/23383_2.png) [@Mercurio](https://forum.babylonjs.com/u/Mercurio)\
**Post date:** [December 9, 2020, 8:34am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/5 "2020-12-09T08:34:26Z")

</div>

Anyway @Danilo_Vukovic , ensure that your Vector Path is build in Counter Clockwise order (CCW).

> **[Polygon Mesh Builder | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/mesh/creation/param/polyMeshBuilder)**
>
> Learn how to create polygons with Mesh Builder in Babylon.js.

I had a similar issue and it was due to the wrong order (CW).

---

<div class="post-metadata">

**Author:** ![nekochanoide](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nekochanoide/32/12431_2.png) [@nekochanoide](https://forum.babylonjs.com/u/nekochanoide)\
**Post date:** [December 9, 2020, 9:09am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/6 "2020-12-09T09:09:43Z")

</div>

Path for poligon should be counterclockwise, there code, to reverse path if it is not so

```auto
private insurePathIsCounterclockwise(path: Array<Vector2>): Array<Vector2> {
    if (this.isCounterclockwise(path)) return path;
    return path.reverse();
}

private isCounterclockwise(path: Array<Vector2>) {
    if (path.length < 3) return false;
    let sum = 0;
    const minx = [...path].sort((a, b) => a.x - b.x)[0].x;
    const miny = [...path].sort((a, b) => a.y - b.y)[0].y;

    path = path.map(x => new Vector2(x.x + 1 - minx, x.y + 1 - miny));

    for (let i = 0; i < path.length; i++) {
        const iNext = (i + 1) % path.length;
        const point = path[i];
        const pointNext = path[iNext];
        sum += (pointNext.x - point.x) * (pointNext.y + point.y);
    }
    return sum < 0;
}

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [December 9, 2020, 9:28am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/7 "2020-12-09T09:28:49Z")

</div>

Hi Danilo,  
Welcome to the BJS community. I can’t see your code, only screenshot but from what I see and your description of ‘cannot see sides when looking directly at them’, there’s a fair chance of a simple answer (nothing related with the way you build or import your points). It looks to me that either

1. the shape is not closed. When using polygon mesh builder and extrusion you should add a point at origin to close the shape.
2. it could be also ‘material’ related, due to alpha blending or renderingGroupID.  
but I’d say the ‘close shape’ option is the first one I’d investigate.  
Try may be to just import/build a very simple shape and make sure to close it. See how it goes…

---

<div class="post-metadata">

**Author:** ![nekochanoide](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nekochanoide/32/12431_2.png) [@nekochanoide](https://forum.babylonjs.com/u/nekochanoide)\
**Post date:** [December 9, 2020, 10:20am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/8 "2020-12-09T10:20:06Z")

</div>

As far as I know, this builder closes path loop by itself, so it actiually would be a great idea to delete last point of path if it is the same point as first one.

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [December 9, 2020, 10:23am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/9 "2020-12-09T10:23:06Z")

</div>

As far as I know, I experienced it and it didn’t work this way.  
I have just been doing a post with a couple of faulty examples in the doc and playground examples.  
I’m updating the post just know as i keep on finding new ones with the same issue.

> [@Soft body rope from extruded mesh playground example could be updated](https://forum.babylonjs.com/t/soft-body-rope-from-extruded-mesh-playground-example-could-be-updated/16454):
>
> This is not really a bug. More of a suggestion to may be update the playground example for: ‘[playground.babylonjs.com/#8WC6ZN#5](http://playground.babylonjs.com/#8WC6ZN#5)’ I was quickly looking back at the rope soft body when I saw this small glitch in the doc example(s). Because the shape is not closed, the rope appears glitchy (depending on camera angle and rope stretch). You can best see it when looking from the side. Closing the shape (adding one point at start) solves the problem, as sh…

Edit: but you’re right saying that not all constructors (mesh builders) act the same. And this is also kind of annoying, isn’t it?

---

<div class="post-metadata">

**Author:** ![nekochanoide](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nekochanoide/32/12431_2.png) [@nekochanoide](https://forum.babylonjs.com/u/nekochanoide)\
**Post date:** [December 9, 2020, 10:37am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/10 "2020-12-09T10:37:32Z")

</div>

There three ways to extrude polygon:

```auto
MeshBuilder.ExtrudeShape() // Worst one for me.
MeshBuilder.ExtrudePolygon() // No way to add arcs.
new PolygonMeshBuilder("name", path).build(updateble: false, length: 1) // The one's that Danilo use.

```

First and second do not close loop. Last one does.  
I believe that author of topic creates simple forms of buildings from gis data.  
So my reply is refers to that.  
For creating a rope it is better to use second method, I think 🙂 .

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [December 9, 2020, 11:16am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/11 "2020-12-09T11:16:19Z")

</div>

Oh Thank you for this post,  
A nice resume of the current situation,  
I’d like the doc to be as explicit in this aspect.  
Food for thoughts, I suppose, 🤔

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [December 9, 2020, 11:34am UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/12 "2020-12-09T11:34:31Z")

</div>

sorry, 'just realized that the rope playground example use ‘.ExtrudeShape’ and this is precisely one method that requires you to close the path/shape if you don’t want a glitchy output (as shown in the faulty examples).

> **[Babylon.js Playground](https://playground.babylonjs.com/#8WC6ZN%232)**

Again, In my understanding of the doc I would have said the same as you, but, in truth, this is not the case. In the end, .ExtrudeShape requires you to close the path. Or else, I should quickly go and have my eyes checked 😉

---

<div class="post-metadata">

**Author:** ![Danilo\_Vukovic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/danilo_vukovic/32/12814_2.png) [@Danilo\_Vukovic](https://forum.babylonjs.com/u/Danilo_Vukovic)\
**Post date:** [December 9, 2020, 1:15pm UTC](https://forum.babylonjs.com/t/visual-bug-with-extrusion/16435/13 "2020-12-09T13:15:00Z")

</div>

Thank you all for your responses. Turns out a simple points.reverse() fixed the problem. I had no idea that GeoJSON polygon data was in clockwise format, I just guessed it would play along nicely. The output is the same whether or not i .pop() the last closing point or not.

Thank you!!