thinInstance multiple materials

Questions
1

I have setup an example PG here 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

2

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

1 Like
3

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

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

4

That should definitely work (even more if you can call scene.freezeActiveMeshes() at the end)
More info: Optimize your scene - Babylon.js Documentation

1 Like
5

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

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.

6

Can you repro the glow issue on the playground?

7

here https://www.babylonjs-playground.com/#YAWQ2W#3
line 49

8

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

9

with createInstance it works:
https://www.babylonjs-playground.com/#YAWQ2W#4
with thinInstance it doesnā€™t
https://www.babylonjs-playground.com/#YAWQ2W#3

10

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

11

Actually, I added support for thin instances for the outline renderer :wink:

This PR adds support for the glow layer:

2 Likes
12

you rock!

1 Like
13

This is amazing @Evgeni_Popov :bowing_man:t2: , 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 ,

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

14

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

15

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?
    }
}
16

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

17

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?

18

Loop for 64x64

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

19

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

20

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

1 Like