Multiple materials with same shader settings

An alternate approach (or one that could use NME) might be to combine all the textures into one atlas texture. Then, you use a single material and just set UVs to the appropriate offset.

A uniform passed into your shader could specify or point to the tile texture coordinates, as one potential thought.


Thank you @jelster, the issue is they are already combined as per your suggestion :slight_smile:
each texture is 1024x1024 with 64x64 tile uv mapped on each material,
Now I need somehow to optimise this more, I am still trying to figure out how I would set the NME instead custom material as per @Evgeni_Popov suggestion, but seems I can’t figure out how would I make that conversion. :cry:

1 Like

Ah, I saw you mentioned an atlas in your OP, but I must’ve gotten thrown off by this:

You can try this:

An attribute block is injected into the node material thanks to the NodeAttributeInjector class. Then this attribute is linked to the VectorSplitter block with this code:

const tileOffsetTextAttribute = new NodeAttributeInjector("MyNode", "tileOffsetText", 4);

const VectorSplitterBlock = entranceDoorsTextMaterial.getBlockByName("VectorSplitter");


Also, you need to use the Instances block so that instances / thin instances work with a node material.

1 Like

:bowing_man: @Evgeni_Popov thank you so much, I wish I could learn what you know…it has started to make some sense but still in puzzles due to my lack of knowledge on GLSL and how to combine which node, and not much resources I could find to master NME.

And here are couple of issues:

  1. in Safari (WebGL 1) When I open PG I see few errors in console, like:
    WebGL: ERROR: 0:141: 'gl_InstanceID' : undeclared identifier, at first I thought it is not supported in Safari but from same Safari (WebGL 1) I am able to view the shader working fine in preview at URL , if it display correctly in nme preview window it should also work in PG?
  2. I have updated PG with 2 materials (For demo I just used same mesh with a different texture, which would be different in real scene)
    How can I reuse effects from material 1 on material 2 as you mentioned above:
    reuse the same node material effect for another node material and thus avoid the creation of a new identical effect.?


Regarding 1/, I think you are using 4.2: there’s a bug that has been corrected in 5.0. If you want to fix it for 4.2, see Compiling Node Materials with Instances on Safari - #18 by Evgeni_Popov

For 2/, you need to use clone instead of reloading the 2nd material, and pass true for the 2nd parameter to reuse the same effect. There’s also some code that needs to be added to make NodeAttributeInjector serializable (else clone won’t work):

Thanks :relaxed:

For 1. The error is showing on Babylon.js v5.0.0-alpha.21 - WebGL1 - Parallel shader compilation, I am not using 4.2 but for testing I just set to 4.2 and encountered a different error: input left from block Multiply[MultiplyBlock] is not connected and is not optional. Than I copied above overload method which didn’t help.

It seems NodeAttributeInjector is not compatible with 4.2, so you should stick with 5.0.

Try to add engine.getCaps().canUseGLInstanceID = false; after creating the engine and see if that helps.

sticking with 5.0 :relaxed:

and yes when I included engine.getCaps().canUseGLInstanceID = false; it worked
this is confusing though, it works normally in nme editor but not in the PG and both uses same Babylon.js v5.0.0-alpha.21 - WebGL1 - Parallel shader compilation

please could you put some light on these:

  1. are there any drawbacks if I use engine.getCaps().canUseGLInstanceID = false; ?
  2. if I would like to not use alpha should I just remove alpha value and nodes from above nodes like I removed alpha node from here, is that correct ? or better if there is a way I could remove alpha in my code so I could use same material for my jpeg textures?
  3. how would I add an ambient texture to it?

Another thing , as all above looks so complex I wanted to do some basic learning by using a standard material,

  1. could you please show a simple example of nodes (only at nme) for standardMaterial to node material nodes for:
    var standardMaterial = new BABYLON.StandardMaterial(“standardMaterial”, scene);
    standardMaterial.diffuseColor = new BABYLON.Color3(2.7,2.7, 2.7);
    standardMaterial l.diffuseTexture = new BABYLON.Texture(‘https//…’);
    I actually couldn’t understand if I need light or not, and how will I increase diffuseColor
  2. comparing with above standard material, which is more performant? a standard material or a node material port of above snippet?

Thanks a million :bowing_man:

What do you get if you do console.log(engine.getCaps().canUseGLInstanceID) before setting it to false?

Yes, just don’t connect the a input of the FragmentOutput block if you don’t want to support alpha. If you want to have two materials with and without alpha, you should do two node materials (or clone the node material that has alpha connected and remove programmatically the connection to the FragmentOutput.a input) because meshes with alpha materials are handled specifically, they don’t write to the zbuffer and they are sorted/rendered last, and it’s not something you want for materials that don’t have alpha: if the FragmentOutput.a input is connected with something, the material is considered transparent even if it occurs that alpha is always 1.

See Node Material | Babylon.js Documentation

It’s the best way to learn, this node material supports everything the StandardMaterial supports and is (or at least should be) cleanly split into building blocks. There are also some explanations on how it has been built in the doc linked above.

It should be more or less the same perf as the code will do the same thing.

1 Like

Thank you @Evgeni_Popov a lot,

It outputs true

please how would I use ambientTexture in same material? should I copy then how to link and use in code
something like this?

const entranceDoors2TextMaterial = entranceDoorsTextMaterial.clone("mat2", true);
const diffuseTexture2Block = entranceDoors2TextMaterial.getBlockByName("DiffuseTexture");
diffuseTexture2Block.texture = new BABYLON.Texture("", scene);
diffuseTexture2Block.texture.hasAlpha = true;
const ambientTexture2Block = entranceDoors2TextMaterial.getBlockByName("AmbientTexture");
ambientTexture2Block.texture = new BABYLON.Texture("", scene);

if so how to connect in ?

The PR that fixed the problem was bugged, here’s another one that should be ok:

As a workaround, you can use:

engine.getCaps().canUseGLInstanceID = engine.webGLVersion > 1;

(that’s what the fix is doing)

You should simply multiply the Lights.diffuse output with the AmbientTexture.rgb output before linking to the Add block.

1 Like

Thank you so much for all @Evgeni_Popov , It has been a year I learned so much from you <3

I was able to port all 50 custom materials to node materials, but result is ,node materials are decreasing my performance, with custom materials I was around 250 but with node materials around 350.

My real issue is I have a huge CPU load, specially on mobile devices its heating up a lot, even though my FPS is at 60 ( draw calls are lower in this screen cause I removed some meshes for testing, otherwise drawcanllss are between 250-350) .

second screen when I have various animated objects in scene:

making it run on some mobile devices seems so complex, I have followed various techniques to optimise my scene, I have combined as much materials as possible by using atlas, used thin instances for every duplicated meshes, almost all objects I am optimising with:

        obj.doNotSyncBoundingInfo = true;

freezing materials ,ktx2 textures etc and scene:

scene.autoClear = false; // Color buffer
scene.autoClearDepthAndStencil = false; // Depth and stencil, obviously

My most big issue is I am getting huge CPU usage, at first I thought it was due to so many custom material but after trying node material it seems not the issue, and I am not able to understand 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?

p.s: can I send you link in private message to check please? and of course I would be very glad to show you what I have built :smiley:
Thanks <3

There is extremely high ratio (10:1) between faces numbers and vertices numbers in your model, is it possible to optimize its geometry? Without this it will be hard for mobiles.

1 Like

That’s a nice cache @labris, my actual scene in blender displays 53k vertices and in babylon so many, let me see what is wrong here, I actually have few meshes which I just hide on mobile.

1 Like

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 @Evgeni_Popov ? if you change totalObjs line#66 value in PG
you will notice indices/face count increase with it, but it doesn’t change Total vertices value, strange hm

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

It seems you have quite a number of bones, maybe the skeleton animation functions are taking a sizable chunk of the time.

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.

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.

1 Like

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.

device details and it has 4GB of ram

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.

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).