Extruded shape with strange rendering

Hello,
i have this simple extruded shape that have a strange rendering and i don t’ understand why.

https://playground.babylonjs.com/#ZVKW17#2

Thank you in advance

It looks like some of the normals are wrong image I wonder if some of your faces have not been inverted ?

Maybe @JohnK would have a clue :slight_smile:

hi
maybe this can help
duplicate your points

https://playground.babylonjs.com/#ZVKW17#4

or some of them
https://playground.babylonjs.com/#ZVKW17#6

1 Like

@neofita, first of all apologies for the delay in answering. The issue is that your myShapeInner is a concave polygon and the method used to add in the caps does not cope well with a concave polygon.

You can see here the difference between a capped and non capped version in the polygon in this PG https://playground.babylonjs.com/#ZVKW17#8, where I exaggerated the effect by moving one of your points. In your original the ‘outside’ triangle almost matched an inner triangle. You can see the triangulation better by removing the comments from the wireframe lines.

Instead of ExtrudeShape you can use ExtrudePolygon which caps with a method that takes into account the polygon may be concave but has the disadvantage it is more restrictive.

The shape must use x and z coordinates to define it and be given in counterclockwise order. Also the extrusion can only be in the y direction, so that the resulting object may have to be rotated to its correct orientation. For use outside the playground the ‘earcut’ app has to be loaded. It also produces a flat shaded mesh. Also note that the first point does not have to be repeated as the last point.

https://playground.babylonjs.com/#ZVKW17#10

For smooth edges and flat caps you will need to combine both methods

https://playground.babylonjs.com/#ZVKW17#11

2 Likes

Hello @JohnK, thanks for your reply and no problem for delay.

All your solutions are good the problem is that after created this shape i need to intesect with another extuded shape. I see that intesect with extruded polygon creates a problem, i ve tried to merge mesh with your second solution but also this is not running.

Have you any solution for this?

Do you need an example in playground?

Yes please.

Hello @JohnK, i ve replicated as simple as possible the scenario:

here the desired functionality :

https://playground.babylonjs.com/#5UV2TP#1

here when i add polygon (line 135,136,142 uncommented)

https://playground.babylonjs.com/#5UV2TP

Thank you very much for help

First of all when you spoke of “intersect” I was thinking collision not CSG. I have just done a couple of PGs

one all ExtrudePolygon https://playground.babylonjs.com/#ZVKW17#13

and one mixed ExtrudeShape with CreatePolygon https://playground.babylonjs.com/#ZVKW17#14 both seem to work?

Will have another go at trying to work out what your PG is trying to do.

2 Likes

@JohnK as usual, you are my hero :slight_smile:

1 Like

Your PG is difficult to follow

You create

  1. a mesh called extrusion which is just a box
  2. a mesh called box from a function called CreateBoxWithCorner
  3. an extruded polygon called box2 from a function called CreatePolygon

You merge box and box2 to form meshInt.

You form CSG from extrusion and meshInt

You then dispose of box and box2, even though merging them already disposed of them and don’t dispose of meshInt for some reason - a mistake?

You then form the CSG intersection of the extrusionCSG with meshIntCSG, which since meshIntCSG is wholly inside extrusionCSG you just end up with meshIntCSG and so when you convert it back to a mesh you end up with a copy of meshInt again.

disposing of meshInt instead of box and box2 gives https://playground.babylonjs.com/#5UV2TP#2

Sorry, as my name suggest i’ m new in Babylon and maybe i’ ve done some confusion.

Yes, i forgot to dispose meshint

The result should be like in this image but intersectint the polygon with the main box there are some errror on rendering

The complete code is with many ajax call because it’ s dynamic and i cannot post in a playground

image

Does this PG show that I am starting to understand the sort of thing you want to do?

https://playground.babylonjs.com/#ZVKW17#15

Exactly @JohnK the target is like that. I cannot use a box as base shape because as you can see from image the base shape have corners and a sclefunction on extrude but you understood which is the target.

@neofita more like this then https://playground.babylonjs.com/#ZVKW17#16

2 Likes

Great @JohnK, tomorrow i try to set scaling to polygon with your previous examples that is the last step i need and i’ ll give you feedback.

For the moment very very thanks.