How to set materials per faces of a CSG generated mesh

Questions
,
1

See playground link : https://playground.babylonjs.com/#F32WKN#1

I’m creating a cubby in a shelf such that I’d like to set different textures & lightmap for each of the faces inside the cubby. So there will be at least 4 texture+ lightmap pair for inside of the cubby and 1 texture + lightmap pair for rest of the faces.

In the documentation - Map Materials to Individual Mesh Faces | Babylon.js Documentation it says

This method is only available when creating a mesh using the MeshBuilder method.

How do I get the top, bottom, left, right face such that I can set the material for them?

2

In the same documentation it is written:

Face numbering using MeshBuilder.CreateBox is that

  • side 0 faces the positive z direction
  • side 1 faces the negative z direction
  • side 2 faces the positive x direction
  • side 3 faces the negative x direction
  • side 4 faces the positive y direction
  • side 5 faces the negative y direction

These are box sides at the moment of creation, hope this will help :slight_smile:

3

Ahh…makes sense. I failed to notice that the CSG subtract function takes in to account the materials for each of the meshes.

For anyone of you who are interested - here’s the playground link which shows that if you subtract a green box from a red box, then the resulting material of the mesh is a combination of both.

So the trick here is to apply the required textures on the box that will be used to subtract and it will show up in the resulting mesh.

4

@labris actually this did not work after adding a texture material to the object that will be used to subtract. I’ve recreated this in the playground https://playground.babylonjs.com/#F32WKN#4

As you can see the inner cube has the material applied with the facenumbers. However, after subtracting this cube from the outer mesh, the material in the new mesh is not retained.

This somehow works if the inner cube has faceColors (as seen above in https://playground.babylonjs.com/#F32WKN#2), but doesn’t work with faceUV options.

*To clarify : I’m expecting to see the face number 2,3,4,5 to show in left, bottom, right, top area of the inside cavity.

5

It actually doesn’t consider materials, it considers vertex colors. So if you apply the colors as materials, they won’t be considered: CSG subtract | Babylon.js Playground (babylonjs.com). Which means textures aren’t considered either, as these are applied through materials too: CSG subtract | Babylon.js Playground (babylonjs.com)

2 Likes
6

@carolhmj @labris does this mean there is no way to achieve my intended outcome?

I was hoping there was an API that would give me the inner cavity as 4 separate planes. I could then create a new plane of that same dimensions and position and overlay it on top of the 4 sides of the inner cavity (making the inner cavity texture transparent).

Is there:

  1. API that would give me the inner cavity as 4 separate planes? Perhaps I can shoot a ray from the center and see the face where it intersects and somehow get a plane from it ?
  2. Allow me to set only those planes transparent in the mesh (leaving all other facets intact)?

Perhaps @bghgary might know? Sorry to tag.

7

For 1, nope, the only thing you get is the complete CSG mesh but that has no idea of what objects were used to create it. For 2, you can set some parts on the mesh with different transparencies by using either an opacity texture, or multimaterials: Morph setPositions, setNormals | Babylon.js Playground (babylonjs.com)

8

Two thoughts on alternatives that may give you a way to go.

  1. UVs for ExtrudedPolygons?

  2. Add the correct uvs in the correct places to this method Making A Frame | Babylon.js Documentation using the code for a box faceUVs and faceColors as a basis

1 Like