How to improve switching material performance ? (In addition to using instance)

Questions
1

pg: https://playground.babylonjs.com/#6XIT28#996
Hey All, In my project, I have a function to switch the visual style of the whole scene. I know that switching materials will consume a lot of performance. so what optimization skills can I use or how to gradually change their materials like dominoes ?

2

With the upcoming render passes (from this PR) you will be able to set a different material for different render passes and enable the render pass you want on a camera.

In your case you would do:

const renderPassCO = camera.renderPassId;
const renderPassSand = engine.createRenderPassId("sand pass");

Then set the materials to use for each pass:

box.setMaterialForRenderPass(renderPassCO, mat1);
box.setMaterialForRenderPass(renderPassSand, mat2);

Then simply sets the right render pass id to be used by the camera depending on the button clicked:

button.onPointerDownObservable.add(() => {
    camera.renderPassId = renderPassCO;
});
button1.onPointerDownObservable.add(() => {
    camera.renderPassId = renderPassSand;
});

The first switching to “Sand” will be as slow as it is currently because the effects must be compiled for the new materials, but all other switches will be very fast (no lag).

https://playground.babylonjs.com/#6XIT28#1003

(won’t work until the PR is merged)

6 Likes
3

OMG! This is really great news. You are breathtaking !

4

If someone is interested in switching like Domino, this PG will help https://playground.babylonjs.com/#6XIT28#1009

5

Note that the PR is now merged, so this PG is working:

https://playground.babylonjs.com/#6XIT28#1003

2 Likes
6

It’s really cool !!! I’m going to try it tomorrow :rocket: