Black triangles with ExtrudeShape function

Bugs
1

Hello I get some black parts on custom shapes created with BABYLON.MeshBuilder.ExtrudeShape

Here is my code (this.points is an array of Vector2):

if (!this._shapeInScene) {
                let points: Array<BABYLON.Vector3>;
                let path: Array<BABYLON.Vector3>;
                let color: BABYLON.Color4;
                //
                points = new Array<BABYLON.Vector3>();
                for (let p of this.points) {
                    points.push(new BABYLON.Vector3(p.x, p.y, this.plan.planCenter.y));
                }
                points.push(points[0]);
                path = new Array<BABYLON.Vector3>();
                path.push(new BABYLON.Vector3(0, 0, 0));
                path.push(new BABYLON.Vector3(0, this.height, 0));
                this._shapeInScene = BABYLON.MeshBuilder.ExtrudeShape(
                    this.name,
                    {
                        shape: points,
                        path: path,
                        sideOrientation: BABYLON.Mesh.DOUBLESIDE, 
                        updatable: true,
                        cap: BABYLON.Mesh.CAP_END
                    }
                );
                color = new BABYLON.Color4(this.color.r / 255, this.color.g / 255, this.color.b / 255, 1);
                this.colors = new Array<number>();
                var positions = this._shapeInScene.getVerticesData(BABYLON.VertexBuffer.PositionKind);
                this.positions = [];

                for(var p = 0; p < positions.length; p++) {
                    this.positions.push(positions[p]);
                }

                for(var p = 0; p < positions.length / 3; p++) {
                    this.colors.push(color.r, color.g, color.b, color.a);
                }

                this._shapeInScene.hasVertexAlpha = true;
                this._shapeInScene.setVerticesData(BABYLON.VertexBuffer.ColorKind, this.colors);
}

And here a screenshot of my issue :

custom_shapes
custom_shapes.jpg885×629 29.2 KB

And my question is what could be the reason of this issue?

Maybe my points in my Vector2 Array are not sorted properly?

Here an exemple on a babylon playground: Babylon.js Playground

2

I think it’s related to the way it’s capped. With no cap : https://www.babylonjs-playground.com/#HG7TAS#1

Maybe should you use the Polygon Extrusion in your case ? Babylon.js Documentation
I guess it will work better

3

Hi J and Seba. Yep… capping issue.

https://www.babylonjs-playground.com/indexStable.html#HG7TAS#4

I tried to adjust the… ahem… barycenter …in line 37… but… I couldn’t get the black wedges to cooperate.

I’m sure going to miss “hijacking core-code into playground”… if that is indeed leaving. (sniff)

I guess I’ll need to get my barycenter “fix” in some other way… perhaps from dirty, back-alley barycenter dealers/junkies. heh

[For those who don’t know about the ‘running joke’… @jerome is sort of a geometry God 'round here. Often, I give him hell… about using fancy terminology in his code, such as ‘barycenter’. In this case, he gives-back some fun… as I have to deal-with barycenter myself. Barycenter, in this case, is the center point of the pizza-pie cap. Yay barycenters!]

Barycenter sounds like a super-store, providing ALL of your daily bary needs. :smiley:

Remember when @JohnK “capped the bird”? (de-wire at line 59)

I didn’t think ANYONE could get a decent cap on the bird shape… but he did it, and made it look easy. hmm. You polyWizards amaze me. (drool)

1 Like
4

Thanks guys for your answers,

So far I fixed it by creating each face myself, but I’ll probably update my code and use Jerome’s idea I’ll save like hundred lines.

1 Like