Jump to content

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


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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





Link to comment
Share on other sites

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:

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...