Custom mesh - How to apply textures to non-rectangular faces

Questions
,
1

Hello everyone,

I would be really glad if someone could point me in the right direction, because I’ve been stuck several days on one problem (despite many of my free hours reading the documentation, forum posts and existing playgrounds). I apologize in advance if the solution is obvious, but I can’t see it.

Simplified Playground:
I trimmed down my code into a working playground and replaced my own images with textures from the Babylon library (the “box” texture on the walls should help see my problem described afterwards)

My problem:

  • I created a custom mesh that represents an octagonal building.
  • The front and back faces of my walls are rectangles => the textures are correctly repeated at a common scale through the use of MultiMaterial, subMaterials, subMeshes, uScale, vScale.
  • The upper faces of my walls are trapezoids => the textures are deformed, while I want them “cropped”. I’ve no idea how to change it. (please look at face [54,55,11,10])

The same problem appeared when I modified the front wall to include an aperture. I didn’t feel ready to deal with csg (substracting doors and windows meshes from the wall), so I tried:

  • describing the wall as one large polygonal face following the door (for example [3,32,33,34,35,36,37,2,10,11] => the non-convexity created “false” textures through the door hole.
  • describing the wall as several faces (3 rectangles and 2 triangles) => the textures appear deformed on both triangles ([35,36,38] and [33,34,39]). I tried permutating the summits of the triangle faces. This rotates the textures but none are aligned with the rest of the wall.

Is there a way to have the textures apply “correctly” to:

  • trapezoids,
  • non-convex polygons,
  • triangles?

Thanks in advance,
Ronkhar

PS: English is not my native tongue AND I’m still a total noob (despite having started under babylonjs v6) so if a part of my explanation makes no sense, tell me and I’ll try to rephrase it better.

PS2: The function .getTotalVertices() behaves really weirdly for my custommesh. When I used this value to cover my whole mesh with a filler texture (cf. line 421 of the playground), many faces where missing.
In my naive understanding, the function should have given a total equal to
6 for each face with 4 summits+3 for each face with 3 summits.
But the totalvertices value was a lot smaller. In order to show the whole mesh, I had to add 128, as shown on line 422. If anyone understands the reason for this discrepancy, I would be happy to hear about it.

2

Hi, you need to uv unwrap your mesh (calculate uvs)

Here is a basic example with trapezoid: Babylon.js Playground

Also, here is a good article about it: Babylon.js docs

3

You need to specify the UVs for each vertex. If you aren’t procedurally generating the meshes, my advice is to learn to use Blender. Create your mesh there, mark the seams for UV-unwrapping, create UV unwrap map. You can export that uv-image with the lines, to know how you need to draw the actual textures for them to align properly for the sides. Export the mesh as a glb, load it up and slap on the texture(s) on the material.

4

Thanks a lot for the answers. :slightly_smiling_face:

@fuyutami : The example with the trapezoid was really helpful. I’ve managed to adapt this method (vertexdata) to my triangles and trapezoids and my textures finally look like I intended.

@64jcl: I haven’t touched blender since sometime before 2008. I fear I wouldn’t be able to relearn it in a reasonable amount of time, considering real life schedule. (and I really like my “for” loops)

5

I have a Gemini Pro AI subscription and use that a lot to learn about both Babylonjs as well as Blender. The learning curve is drastically shortened when you can get an LLM to give you rather detailed instructions on how to do stuff in Blender. It took me a few weeks to get back into it, but I use it rather often now for my VR project which often involves a lot of setting up meshes and stuff there and exporting to glb for Babylonjs.