# Apply materials to faces

**URL:** <https://forum.babylonjs.com/t/apply-materials-to-faces/32636>\
**Category:** Questions\
**Created:** [July 30, 2022, 5:18pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636 "2022-07-30T17:18:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [July 30, 2022, 5:18pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/1 "2022-07-30T17:18:02Z")

</div>

Hi everybody,

I want to apply multiple textures to a polygon.

I tried with this example (simplified) :

> **[Babylon.js Playground](https://playground.babylonjs.com/#RNCYVM%231334)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

the problem is that there is only one material for the front AND the back of the wall.

I want to be able to click on the front, choose a material and change it, click on the back and do the same thing.

What can i use ? multimaterials ? submeshes ?

thanks in advance,

Boris

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [July 30, 2022, 8:54pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/2 "2022-07-30T20:54:40Z")

</div>

Heya, you can use sub meshes and [multi materials](https://doc.babylonjs.com/divingDeeper/materials/using/multiMaterials) to apply a different material to each side. Like this for example. 🙂

> **[Babylon.js Playground](https://playground.babylonjs.com/#RNCYVM%231337)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [July 31, 2022, 11:07am UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/3 "2022-07-31T11:07:19Z")

</div>

Ok, thanks for your answer, i will use submeshes aned multi mterials.

I don’t understand exactly how submeshes work. It is not really clear in the documentation with the example of the sphere.

In my playground, i want to apply a texture to a box from the front to the middle and another from the middle to the back (the box is divided in two equal parts).

> **[Babylon.js Playground](https://playground.babylonjs.com/#RNCYVM%231344)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I don’t know how to count the indices to do that.

If you could help me…

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [July 31, 2022, 3:38pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/5 "2022-07-31T15:38:03Z")

</div>

Okay so there’s a few problems with the box in the PG. One is that the index count of 36 is wrong for the second sub mesh. If you want each sub mesh to have half of the mesh’s indices then each sub mesh should have 18 indices like this [PG](https://playground.babylonjs.com/#RNCYVM#1345).

But the next, bigger problem is that what you describe isn’t possible with a normal box mesh. You could re-order the indices to include whichever faces you want for each sub mesh. But each face is made up of two triangles which split the face in half diagonally. You would need twice as many triangles to split each face in half horizontally or vertically, which could be achieved with a custom mesh for example.

PS it might be easier to create the mesh in a DCC tool like Blender… 🙂

---

<div class="post-metadata">

**Author:** ![bvaisman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bvaisman/32/20835_2.png) [@bvaisman](https://forum.babylonjs.com/u/bvaisman)\
**Post date:** [July 31, 2022, 5:07pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/6 "2022-07-31T17:07:21Z")

</div>

And if i merge two boxes with two different materials, do you think it will work ?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [July 31, 2022, 5:39pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/7 "2022-07-31T17:39:45Z")

</div>

> [@bvaisman](#):
>
> And if i merge two boxes with two different materials, do you think it will work ?

See [https://playground.babylonjs.com#INZ0Z0#59](https://playground.babylonjs.com#INZ0Z0#59)

from

> **[Multi-Materials | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/materials/using/multiMaterials)**
>
> Learn how to use Babylon.js Multi-Materials.

scroll down to with merged meshes.

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [July 31, 2022, 5:54pm UTC](https://forum.babylonjs.com/t/apply-materials-to-faces/32636/8 "2022-07-31T17:54:50Z")

</div>

That’s a good, much simpler idea. I think that would work well although I guess there would be two extra faces. 🙂
