solved Is there a way to create quad-based geometries in Babylon?

[leota]

Hi there,

I'm new to Babylon.js. I was wondering if it's possible to create quad-based geometry in Babylon, or if there's a workaround.

From the docs I don't see this possible, but maybe you have some hints I need to create a simple 3D modeling editor, where the user should be able to select geometry faces, better if they're quads.

[Guest]

Quad will always be rendered as a couple of triangles. WebGL does not support quad rendering.

But you can have a list of paired triangles in your code and then when one is picked you know the quad it belongs to

[leota]

Thanks @Deltakosh, I know WebGL only supports triangles. The workaround you suggested could actually be a good way for selection purposes, but what about rendering faces as quads??

 

[Guest]

You cannot render them as quad but as a couple of triangle. This could be easier if you use TRIANGLESTRIP (ex: https://www.babylonjs-playground.com/#Y7Q181#17)

[leota]

13 minutes ago, Deltakosh said:

You cannot render them as quad but as a couple of triangle. This could be easier if you use TRIANGLESTRIP (ex: https://www.babylonjs-playground.com/#Y7Q181#17)

Tried using TRIANGLESTRIP on a box, but doesn't look that great, maybe I'm missing something, please have a look here: https://www.babylonjs-playground.com/#8774X1

[JohnK]

Hi @leota and welcome, notice that Deltakosh used a custom mesh so that the triangles in the mesh matched the triangles from the TRIANGLESTRIP. This will not necessarily the case with a standard mesh. If you are looking to some form of editor that shows meshes as made up of quads you will need to know the data structure of a mesh to manipulate the quad vertices. Take your box example you can view its construction by setting myMaterial.wireframe = true

You can find more about the data structure and manipulating it by reading

http://doc.babylonjs.com/how_to/custom

http://doc.babylonjs.com/how_to/updating_vertices

http://doc.babylonjs.com/resources/normals

http://doc.babylonjs.com/extensions/quick_tree_generator

[brianzinn]

We had a bit of fun with something like this before on boxes.  There were a few different solutions that all solved the same problem.  Somehow my PG seems to have more faces looking correct with this fillMode:

material.fillMode = BABYLON.Material.TriangleStripDrawMode;

 Probably more a fluke than anything   Here is the original PG updated:
https://www.babylonjs-playground.com/#1V3CAT#310

Please share anything you find out or another PG - curious what you come up with.  Here is the original thread:

edit: After re-reading your original question you probably don't want to mess around with that.  For any clicked "triangle", you can get it's "normal" (ie: Scene Mesh Pick).  Then look at any adjacent edges/faces (sharing a vertex/edge with one of the 3 vertices in your triangle)  If they have the same normal and share a common vertex then they are from the same "quad".  This will probably be easier than a brute force and remapping meshes - and work for different kinds of meshes as you could expand clicked faces beyond triangle/square shapes (look at the top of a cylinder with mesh.wireframe=true).

[leota]

Thanks @JohnK and @brianzinn for the useful resources shared. I come from Three.js where I was facing the same problem and being totally new to Babylon.js I was hoping to find something like a wrapper build on top of geometries to display them as quads. I understand it's not convenient to support quads as they need to be triangulated before sending them to GPU, but for 3D modeling purposes users like to se quads. Never mind, I'll write my own code to achieve this.

edit: @brianzinn I agree with what you suggested regarding the quad detection, there's no need to create custom data structures. I could just use the default geometries and detect quads on the fly as you suggested

[Nabroski]

Not what you asking for: you can experiment with the edge renderer. i did
http://playground.babylonjs.com/#7HZISY

[leota]

3 hours ago, Nabroski said:

Not what you asking for: you can experiment with the edge renderer. i did
http://playground.babylonjs.com/#7HZISY

Thanks a lot  actually in combination with quads detection this could be a good solution.