Performance of multiple materials for one mesh

Questions
, ,
1

I render a box consisting of six cubes (BoxGeometry). We currently render these cubes with one single PBR material. Now the requirement is that multiple materials per cube can be specified so that individual faces can be rendered with different textures:

`const mesh = new Mesh(geometry, [pxMaterial, nxMaterial, rest, rest, rest, rest]);`

Now my question is, how expensive is this type of rendering? My understanding is, that every time a material is switched, the shader has to be switched. If that’s the case, we would switch shaders several time during rendering which would be a problem for mobile phones(?).

A better approach would be to use one image file containing several textures. The problem with these approach is repeating. If the texture should be repeated, it repeats outside of its designated area. For this I assume I have to replace the texture sampling part of the shader. Is this easily possible without rewriting the whole shader?

TL;DR:

  • How efficent/inefficent is the multi material rendering of a mesh?
  • Is it possible to simply exchange the texture sampling code in the PBR shader without rewriting the whole thing?
2

It is a potential performance issue since multi-material objects result in multiple render items. So instead of rendering your box with a single draw call you end up with six. Depending on your scene, too many draw calls can downgrade the performance.

You might want to give Material.onBeforeCompile() a try. Its usage is demonstrated in the following example: webgl_materials_modified,