# thinInstance multiple materials

**URL:** <https://forum.babylonjs.com/t/thininstance-multiple-materials/13644>\
**Category:** Questions\
**Created:** [August 24, 2020, 9:19pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644 "2020-08-24T21:19:02Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [August 24, 2020, 9:19pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/1 "2020-08-24T21:19:02Z")

</div>

I have setup an example PG here [https://www.babylonjs-playground.com/#BGS59P#4](https://www.babylonjs-playground.com/#BGS59P#4) , I have 2 materials `grass1` and `grass2` and was only able to use `grass1`. I read about custom attributes and was able to create in PG, I used different colours on each sphere, just like colours can we also use different material per sphere? if yes, how?

Thanks

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 24, 2020, 9:23pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/2 "2020-08-24T21:23:08Z")

</div>

Unfortunately no, different materials are not possible with instances. You can use clones in this case but you will end up with far less efficient rendering

---

<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:** [August 25, 2020, 4:40pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/3 "2020-08-25T16:40:41Z")

</div>

Thank you @Deltakosh for clearing this, I have been searching like everywhere about it.

The issue is I have a model with 29 meshes, 4 of them have textures/material which are different on each instance. what could be good approach to create instance of this model? I need like 500 instances of same model. here is PG of model [https://www.babylonjs-playground.com/#YAWQ2W#1](https://www.babylonjs-playground.com/#YAWQ2W#1)

I was thinking to create thinInstance of 25 static meshes and 4 simple instances, which I can add different textures material, is this approach good or anything better to create 500 copies?

Thanks \<3

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 25, 2020, 5:13pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/4 "2020-08-25T17:13:10Z")

</div>

That should definitely work (even more if you can call scene.freezeActiveMeshes() at the end)  
More info: [Optimize your scene - Babylon.js Documentation](https://doc.babylonjs.com/how_to/optimizing_your_scene)

---

<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:** [August 25, 2020, 6:56pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/5 "2020-08-25T18:56:34Z")

</div>

a huge thank you @Deltakosh, I successfully increase FPS from 10 to 60 by combining `thinInstance` for static meshes and normal `createInstance` for materials, I have updated PG if someone in future find it useful its here [https://www.babylonjs-playground.com/#YAWQ2W#2](https://www.babylonjs-playground.com/#YAWQ2W#2)

just one issue, I had glow effect on 1 mesh which is just showing now plain white colour without glow, is it a bug or just glow effect isn’t supported with `thinInstance` ?

p.s if glow effect isn’t supported can I apply some kind of lights? if you see in PG I have 3 lamp lights and having 500X3 lights is huge issue in scene.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 25, 2020, 7:32pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/6 "2020-08-25T19:32:25Z")

</div>

Can you repro the glow issue on the playground?

---

<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:** [August 25, 2020, 7:43pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/7 "2020-08-25T19:43:54Z")

</div>

here [https://www.babylonjs-playground.com/#YAWQ2W#3](https://www.babylonjs-playground.com/#YAWQ2W#3)  
line 49

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 25, 2020, 7:47pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/8 "2020-08-25T19:47:02Z")

</div>

Well that should work as @Evgeni_Popov added support for thin instances in the glow layer recently

---

<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:** [August 25, 2020, 7:51pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/9 "2020-08-25T19:51:08Z")

</div>

with `createInstance` it works:  
[https://www.babylonjs-playground.com/#YAWQ2W#4](https://www.babylonjs-playground.com/#YAWQ2W#4)  
with `thinInstance` it doesn’t  
[https://www.babylonjs-playground.com/#YAWQ2W#3](https://www.babylonjs-playground.com/#YAWQ2W#3)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 25, 2020, 7:57pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/10 "2020-08-25T19:57:27Z")

</div>

ok gotcha. The think is that thinInstances cannot be treated independantly that their root (ie only having some thininstances and not the root do apply glow for instance)

They are the fastest but also the less flexible. In you case you need to use instances for the glow

---

<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:** [August 25, 2020, 10:44pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/11 "2020-08-25T22:44:08Z")

</div>

Actually, I added support for thin instances for the outline renderer 😉

This PR adds support for the glow layer:

> <https://github.com/BabylonJS/Babylon.js/pull/8804>

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 25, 2020, 11:31pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/12 "2020-08-25T23:31:01Z")

</div>

you rock!

---

<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:** [August 26, 2020, 11:24am UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/13 "2020-08-26T11:24:55Z")

</div>

This is amazing @Evgeni_Popov🙇🏻‍♂️ , so much in love with you guys.

@Deltakosh just last question on this, I have to create 500 copies of this model, half of them need to be on oppsiite side which I accomplished using `rotationQuaternion` [https://www.babylonjs-playground.com/#YAWQ2W#7](https://www.babylonjs-playground.com/#YAWQ2W#7) ,

Now 4 meshes I am creating using `createInstance` , each has unique texture/materials, that means 500 X 4 = 2000 unique images/materials. How should I approach this. I am thinking maybe I should load those materials on movement of camera. so when camera is in X distance from instance model or in X radius of camera , then load 4 textures of that model dynamically, or if there is any better way?

Thanks \<3

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [August 26, 2020, 3:29pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/14 "2020-08-26T15:29:50Z")

</div>

This is a great idea. Another approach depending on the texture resolution is to pack them. Like having a big 2048x2048 texture that hosts 64 256x256 textures. That will reduce the load a lot

but if you can implement your solution this is great as well

---

<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:** [August 30, 2020, 5:29pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/15 "2020-08-30T17:29:18Z")

</div>

Thank you @Deltakosh , for my approach I will work on this, but for some textures I could use the pack technique. For that if I understand correctly I will need to set offset of image, right? so if I create a material like this, which has 64 textures as you said:

```
var tvImage = new BABYLON.StandardMaterial("tvImage", scene);
tvImage.diffuseTexture = new BABYLON.Texture("./assets/tvImage.jpg",scene);
tvImage.diffuseTexture.uOffset = 0;
tvImage.diffuseTexture.vOffset = 0;

```

how will I change offsets in loop?

```
task.loadedMeshes.forEach(function (e, index) {
    e.material = tvImage;
    for (i = 0; i < totalStands; i++) {
        var newStand = e.createInstance("stand_" + i);
         // uv offset for next stand?
    }
}
```

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [August 30, 2020, 6:02pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/16 "2020-08-30T18:02:06Z")

</div>

Hi. You need loop twice through columns and rows and if columns count more than 64 go to next row

---

<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:** [August 30, 2020, 6:13pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/17 "2020-08-30T18:13:18Z")

</div>

Thanks @kvasss that’s actually I am not understanding on which elements I have to loop, could you please provide an example with my code above?

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [August 30, 2020, 8:07pm UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/18 "2020-08-30T20:07:53Z")

</div>

Loop for 64x64

for (i = 0; i \< 64; i++) {  
// Set rows here… vOffset?  
for(j =0; j \< 64; j++) {  
Set columns here… uOffset?  
}  
}

---

<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:** [August 31, 2020, 12:15am UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/19 "2020-08-31T00:15:24Z")

</div>

It doesn’t still clears me, see in my code I am creating multiple instance, so I have a new variable `newStand` which holds the instance, so on what I need to set offset?

for example newStand.vOffset ?

so each stand has a unique offset in my loop above

> [@Dshah\_H](#):
>
> ```auto
> e.material = tvImage;
> for (i = 0; i < totalStands; i++) {
> var newStand = e.createInstance("stand_" + i);
> // uv offset for next stand on which property?
> }
> }
> 
> ```

---

<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:** [August 31, 2020, 11:08am UTC](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644/20 "2020-08-31T11:08:40Z")

</div>

I think what @Deltakosh wanted to say is that you would have to use a custom instance attribute given you the offset (x,y) in the atlas to use for mapping. That would also mean you need to use a custom material / shader to read this offset and apply to the texture coordinates before reading inside the atlas.

See this section for custom instance attributes: [Use Instances - Babylon.js Documentation](https://doc.babylonjs.com/how_to/how_to_use_instances#custom-buffers)

[Next page](https://forum.babylonjs.com/t/thininstance-multiple-materials/13644.md?page=2)