# Multiple materials with same shader settings

**URL:** <https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645>\
**Category:** Questions\
**Created:** [May 7, 2021, 10:17am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645 "2021-05-07T10:17:40Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 10, 2021, 5:23pm UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/21 "2021-05-10T17:23:03Z")

</div>

> [@Dshah\_H](#):
>
> how could I find what is causing this kind of load on CPU, is there any way I could find which function or material is using too much CPU?

You should use the Performance tab of your browser to know where the CPU time is spent.

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/8/8857ba5fe46693819778135933f571d5669fa9b3.png)  
It seems you have quite a number of bones, maybe the skeleton animation functions are taking a sizable chunk of the time.

> [@Dshah\_H](#):
>
> can I send you link in private message to check please

My current plate is full, I don’t really have time to dig into such issues at the time, sorry. Best to stick with the forum where anyone can jump in and try to help.

> [@Dshah\_H](#):
>
> ok I found those faces and vertices are being generated from thinInstances, is that expected behaviour or a bug? I used to believe thininstance do not create any vertices

Thin instances don’t create indices/faces, but the total indices/triangles are updated to account for the number of thin instances displayed. So, if in your scene you have a mesh which is a single triangle that is thin instanced 10 times, you will have **Total vertices** = 3 but **Active indices** = 30 and **Active faces** = 10.

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 12, 2021, 7:31am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/22 "2021-05-12T07:31:34Z")

</div>

> [@Evgeni\_Popov](#):
>
> You should use the Performance tab of your browser to know where the CPU time is spent.

performance tab didn’t help much as I was getting this on a user device, I implemented serenity, and this is what it captured:

`DataCloneError: Failed to execute 'postMessage' on 'Worker': Data cannot be cloned, out of memory.`

 ![Screenshot 2021-05-12 at 10.29.32 AM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/9/99bbecbc97a81f136470b7f1098b08d22f02d683.png)  
device details and it has 4GB of ram  
 ![Screenshot 2021-05-12 at 10.30.06 AM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/9/19012005b974cbdaca31c6fa35d1cfe374ff3e69.png)

on my computer I viewed in task manager that GPU is using almost 1G memory and CPU also around 1GB memory for my scene. The device generating above error has 4GB of RAM.

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 12, 2021, 8:22am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/23 "2021-05-12T08:22:55Z")

</div>

As far as I see, the scene is just too complex, it is really hard for mobiles. You may try first to reduce the number of bones/animations; after this - to simplify geometry as much as possible.  
Last resort - to set engine.setHardwareScalingLevel to some value bigger than 1, to have less load on GPU (visual quality would decrease with this).

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 12, 2021, 8:28am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/24 "2021-05-12T08:28:57Z")

</div>

I am not loading animation meshes ( they are different gltf files) into scene on mobile. scene size is just 5mb. The above error I posted doesn’t even used any thininstance, just loaded materials ( max material size is 1024X1024, all power of two with ktx2/draco compression) . I have this feeling it is being caused by custom materials.  
here are stats from scene’s gltf file from sandbox:

 ![Screenshot 2021-05-12 at 11.37.09 AM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/6/26ec801d13cabb0527601d84b7d44bc90609c8a5.png)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 12, 2021, 8:44am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/25 "2021-05-12T08:44:23Z")

</div>

You may try, for testing purposes, dispose all materials except one, then adding one by one and see what will happen.  
Are you sure that there is no memory leak in your code? Try to check values of `performance.memory.usedJSHeapSize`  
in render loop; if it grows to the `performance.memory.jsHeapSizeLimit` you definitely have memory leak 🙂

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 12, 2021, 9:13am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/26 "2021-05-12T09:13:07Z")

</div>

I tried `performance.memory.usedJSHeapSize` and noticed it started from `43978482` and increased with random numbers ( max at `93675640`) than keep decreasing ( last at `47452468` )  
I don’t own that kind of mobile device so its a bit hard for me to debug, I am setting up an emulator now to test and will report back. thanks

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 12, 2021, 9:52am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/27 "2021-05-12T09:52:37Z")

</div>

You may use  
`((performance.memory.usedJSHeapSize / 1024) / 1024).toFixed() + " Mb";`  
to get values in Megabytes, which are easier to read.

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 12, 2021, 10:01am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/28 "2021-05-12T10:01:30Z")

</div>

> [@Dshah\_H](#):
>
> 93675640

Thanks @labris but it doesn’t seems memory leak issue, it doesn’t use a lot of memory:

 ![Screenshot 2021-05-12 at 1.00.53 PM](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/e/fe6a5cfeaafda07df56e84130df1d80a1cbf6634.png)

---

<div class="post-metadata">

**Author:** ![labris](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/labris/32/12576_2.png) [@labris](https://forum.babylonjs.com/u/labris)\
**Post date:** [May 12, 2021, 2:44pm UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/29 "2021-05-12T14:44:47Z")

</div>

> [@Dshah\_H](#):
>
> it doesn’t use a lot of memory

> [@Dshah\_H](#):
>
> I viewed in task manager that GPU is using almost 1G memory and CPU also around 1GB memory for my scene

(probably these were 2 different scenes?)  
If the model is lightweight (so we may exclude geometry and animations problems) and dynamic memory usage is low, the most possible thing which loads CPU so hard is some code in render loop. For GPU it can be also some heavy postprocess(es), but I think you don’t use them much.

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 13, 2021, 9:33am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/30 "2021-05-13T09:33:41Z")

</div>

> [@labris](#):
>
> (probably these were 2 different scenes?)

sort of, I just have one static scene for mobile ( without animations and heavy geometry), the one you see in above image displaying memory is static one, but with animated it also does not go above 230 mb. It seems more issue on CPU side.

> [@labris](#):
>
> the most possible thing which loads CPU so hard is some code in render loop.

I have just used one small call in render loop but even after removing it still issue remained, I have this feeling something is going funny on few mobile devices, I tried in emulator but there it seems to work, I guess I will get a similar mobile which has issues to test it, since I have been just receiving feedback of the error from users so its hard to debug.

---

<div class="post-metadata">

**Author:** ![Dshah\_H](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dshah_h/32/3607_2.png) [@Dshah\_H](https://forum.babylonjs.com/u/Dshah_H)\
**Post date:** [May 18, 2021, 7:06am UTC](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645/31 "2021-05-18T07:06:35Z")

</div>

Finally I was able to figure this issue, It was being cause by `addBinaryFileTask`, I was loading a mp3 of around 6mb size, which was causing to crash the app on some devices. as soon I removed this task and file all was working fine.

[Previous page](https://forum.babylonjs.com/t/multiple-materials-with-same-shader-settings/20645.md?page=1)
