Visual bug with extrusion?

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 =,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.

bumb bump ahh

I think a PG may help understand better

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.

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

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


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

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 = => 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;
1 Like

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…

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.

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.

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?

There three ways to extrude polygon:

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 :slight_smile: .

1 Like

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, :thinking:

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).

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 :wink:

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!!