Extrude Shape Tessellation

[Simona]

Hello everybody :-)

I'm trying to use ExtrudeShape for creating a building shape and am having trouble with the cap. I understand that the cap is not tessellated (triangulated) so it would be faster. But when I have concave angles in the shape, it doesn't look good.

I also tried using Ribbon for the roof polygon somehow, but the tessellation doesn't happen here either of course.

Here is my code:

http://www.babylonjs-playground.com/#1KQZAF#0

I tried using PolygonMeshBuilder but the mesh is rotated the way I don't want it to and some walls keep dissapearing depending on the angle of view:

http://www.babylonjs-playground.com/#SJLOW#1

I don't need the mesh to be updated so the speed of tessellation doesn't bother me much.

What am I doing wrong? What can I do to have a tessellated building?

Thanks :-)

[Wingnut]

Hi Simona.  First, I don't think you are doing anything wrong.  You might be discovering limitations to some of our features... and some of those limitations might be surmountable (fixable/work-around-able).  I'm going to ping @jerome so he can monitor our talks, if he wishes.  He has done LOTS of work in these areas/features, but there are some possibly-unavoidable limitations to these types of dynamic mesh.  I ran into a similar problem when I tried to "cap the bird". heh. (When I used the bird data for an extrusion.)

http://www.babylonjs-playground.com/#165IV6#36

Change cap styles 0-3 in line 73.  Same problems.  The cap won't go around corners. 

Then there's the bobsled... assembled dynamically, much like your building attempts.  The slightly different colors seen on various parts of the bobsled... indicate an issue with lighting normals being "interestingly aimed".   The tail cowling and side foils have good normals, and the many-piece body section and single-piece nose cowling... have the "interesting normals".  Notice how the light's "specular shine" works nice on the tail cowl, but sort of fails on the nose cowl.

I believe these "interesting lighting normals" are the reason you have some see-through walls, even when a material is applied and is set material.backFaceCulling = false;  .  Perhaps... the safest way to build buildings... is with modeling software (such as free Blender), and then import into BJS scene.

You can also use all BASIC mesh elements such as planes and boxes.  But yes, you'll get a little higher vert-count on buildings made from many pieces.  You can give ALL the building pieces... a common single parent (so the structure can be rotated, positioned, and scaled by adjusting those values on the central parent - those three characteristics are handed-down to children mesh). Or you can mesh-merge all the "primitives" (basic shapes) together... at the end of the modeling code.

I MUST also mention forum friend and coding God @NasimiAsl and his wonder-buildings.   He has built two BJS extensions (extensions need "including" via extra <script> elements in the html.)  One is called ShaderBuilder which is a shader-code assembling assistant, and the other is GeometryBuilder, which is a... well hell, I have no idea how it does what it does.  It starts with an SVG 2D floorplan, I believe, and then it does lots of magic from there (Wingnut is not sure WHAT.)

Let's look at one of his "building" playgrounds.  http://www.babylonjs-playground.com/index.html#FT2RY#78

"Naz" has some capping issues, too, apparently, but oh, what pretty generated buildings, eh?  Check out that spiral staircase!  Pretty nice stuff.  I wish we knew how he did it.  It can be learned.  But Naz is kind of a genius, and he approaches webGL/JS from a unique angle - mainly... the GPU angle.  GPU code is much faster than CPU code, and GPU code doesn't restrict/bog CPU code (JS) at all, except for the time it takes to assemble and compile the GPU code (pre-render).  (at least that is MY understanding of it - probably incorrect) 

All in all (or half'n'half), I thought I should tell you about Naz and his "oh my God" buildings.  There are not any highly-detailed docs for ShaderBuilder or GeometryBuilder, but a forum search for both terms... will produce some good results and beginner playgrounds.

Okay, that's all I have for you, so far.  I will keep thinking.  Perhaps @jerome will have some words about disappearing walls... not sure.  I like what you have accomplished.  Cool experiments!  I hope we can get some things "tweaked" and make it work for you.  Perhaps smarter people than I.... will comment soon.  Welcome to the forum... good to have you with us.  Sorry that I couldn't be of more help.  Let's keep talking and testing things.

[JohnK]

Hi and welcome from me. If you are just working with your own custom shapes then you could build the caps manually from the data you are using. When you google 'triangulation of polygons' the algorithms for concave polygons are complex and not easily read.

For your data label the vertices of the shape to be extruded and split into triangles,  as for example in the diagram below.

You can then place the triangles 0, 1, 4    1, 3, 4, etc into the indices array NOTE order of indices consistently clockwise for all triangles and the create your own custom meshes for the caps.

Example http://www.babylonjs-playground.com/#1KQZAF#1

Should you then want to you could merge the extrusion and the two caps.

[Wingnut]

Thx @JohnK, a darned good idea.  Building-on (capping-off?) that idea, any chance of automating John's suggestion?

MeshCapper 1.0.  Yeah!   An algorithm/code COULD extract the top-most points of a model, and store them in a Path2d or Path3d. 

Then... the new MeshCapper would... umm... probably have the same troublesome anomalies as the current mesh cappers.  hehe. 

Never-mind me.  I had a pipe dream for a moment, there, but... it wasn't very well thought-out.    Sorry. 

It just feels like... what JohnK describes, could be automated.  Perhaps not.  hmm.  Good topic, though, eh?   Thx Simona.

[JohnK]

Good to hear from you @Wingnut. Before writing my post I can across this paper that shows that the process can be automated, ie given a simple polygon (ie one with no intersecting sides) there is an efficient algorithm to triangulate it. It wasn't after much more than one sentence that I gave up reading it. There are probably non-efficient ways of doing it which I have some idea about and maybe give it a go sometime.

[Wingnut]

Good to see you, too, JK.  Hope you're doing well.  Cool find... with that paper.  I got a little math tumor just by clicking the link. 

Is the "C" shape... one of the simplest-yet-most-challenging cap shapes?

What if... this new app... codename - "El CAPitan"... is "user-assist" (instead-of automated)?  It is a "special" scene, where your mesh is placed in wireframe/pointcloud mix-mode, and you click-to-paint triangle lines... eventually creating your own custom cap.  Freely toggle back to solid render... check your crap, make sure lighting normals look good, and then... umm...  SAVE.... something... somewhere.  hmm.

"Write cap mesh as .babylon file?" 

Editors suck, eh?  But... click on pointcloud points to draw indices... that's pretty fun, huh?  Trouble, though.  Normals around edge of cap... could be weird.  Maybe not.  They would be double verts, I suppose, so 2 normals on edge points.  More if flat shaded.  hmm.  kbye agn. 

[NasimiAsl]

hi if you want make wall i can help

[ozRocker]

On 2017-3-20 at 1:46 AM, JohnK said:

Should you then want to you could merge the extrusion and the two caps.

I'm trying to do this but when I merge I get a "glDrawElements: attempt to access out of range vertices in attribute 1" error.

Does anyone know how to merge a mesh and the caps?  Here's a playground where you can see the webGL error in the console:

http://www.babylonjs-playground.com/#1KQZAF#2

[Gijs]

1 hour ago, ozRocker said:

I'm trying to do this but when I merge I get a "glDrawElements: attempt to access out of range vertices in attribute 1" error.

Does anyone know how to merge a mesh and the caps?  Here's a playground where you can see the webGL error in the console:

http://www.babylonjs-playground.com/#1KQZAF#2

It works if you set the uvs and normals as well:

http://www.babylonjs-playground.com/#1KQZAF#4

[ozRocker]

57 minutes ago, Gijs said:

It works if you set the uvs and normals as well:

http://www.babylonjs-playground.com/#1KQZAF#4

It works!   Thank you my friend!

[AndyA]

Out of curiosity, have there been any new developments related to getting the cap option to work better when extruding concave polygons?

The most successful "universal" approach I've used so far seems like a hack: using CSG to make the caps by getting the intersect between the extruded mesh and a thin box (like a cookie-cutter).

Btw, thanks to all contributors on this project!  I've really enjoyed working with Babylon.

[JohnK]

@AndyA this may be of use http://doc.babylonjs.com/how_to/parametric_shapes#extruded-non-regular-polygon

[AndyA]

That worked really well.  Thank you!!