Material animation when using setMaterialForRenderPass

[Rainbow_Doge]

Hi everyone,

I’ve been trying to reengineer my code to switch materials of meshes. I’ve seen the discussion in this post and found it very useful.

It works great to switch the materials using setMaterialForRenderPass, however I’m having difficulty to make it work with Animations.

Here’s a playground I setup that on button click can switch the materials on each box mesh, and also randomly pick a few to run an alpha animation tween:

Babylon.js Playground

If you click Change material, you will see some boxes go completely transparent, then after 3 seconds (the animation duration), they just pops up with endAlpha value set on material.

I wonder how I can get smooth animation run on the materials when update camera.renderPassId? My desired outcome is that when clicks Change material button, the material changes, then there’s nice alpha animation fade in/out the material.

As soon as I click Change material:

After 3 seconds (animation duration):

---

Thanks for the help! It’s resolved
Here’s the new working playground for reference, hope it helps anyone with similar question in future!

Babylon.js Playground

[ryantrem]

@sebavan any ideas on this?

[sebavan]

The issue is a typo in the code where you use Animation instead of BABYLON.Animation:

Babylon.js Playground

This area sounds suspect as well cause there is no alpha on mesh:

I guess you meant to use meshMat

[Rainbow_Doge]

Hi @sebavan thanks for the details

I updated the new playground so it is setting the alpha on mesh material instead, now I think the animation works!

Here’s the new playground for reference, hope it helps anyone with similar question in future!

Babylon.js Playground