Node material animations

Questions
1

How to do color change animation？
https://www.babylonjs.com/demos/productpage/

2

Adding @PatrickRyan who created this demo.

3

@xiaohuangyu,

The material animation is created from a procedural texture node material which creates the pattern for the interpolation between the two materials. I then feed that procedural texture into a custom node material that contains the PBR metallic roughness blocks which are fed by two textures per input. This allows me to assign the textures I am morphing to and the current texture to the shader and then animate a float driving a smooth step of the procedural texture fed into the gradient of the interpolation between textures.

You can find all the code for the custom node materials, animations, and texture management in this repo

1 Like
4

Hi there @PatrickRyan !
Is there any PG where I can see how can I get a shader parameter animated? Really really simple, I just want to animate an exposed value of a block of a custom Node Material. I get to change its value with an event from 0 to 10, but I’m not hitting the right key when it comes to trigger an animation to gradually go from 0 to 10 in float values.
Thanks for your time :slight_smile:
Carlos

5

@ochendricks, you can find a simple implementation of animating a block’s value in a node material in Node Material Glow Layer. This example is doing two different types of setting variables, one for enabling/disabling the glow mask so I am only passing the emissive color to the glow layer and the other is animating the emissive strength in the shader.

This one is a simple looping animation but you can set the loop mode to constant in the animation and just call beginDirectAnimation whenever you need it like on key press. Or if it’s something that you wan to keep around and reuse, you can make an animation on the scene (direct animations are not something that stick around when not playing, they are garbage collected when done) and then call play on it or make it part of an animation group as you like.

The other thing to note is that you do not have to make a block’s value exposed to the inspector to animate it. You can grab most input blocks (disregarding blocks that are not input by the user like TimeBlock) by name or ID and change the value (or texture in the case of TextureBlock or ImageSourceBlock) of any block in your node material that isn’t set to constant.

3 Likes
6

Wow what a quick response! Thank you so much @PatrickRyan

1 Like