Is texture animation implemented through code or should it be included in the gltf file?

GIF

Blender Project File:
textureAnimation.zip (132.1 KB)

I exported a gltf file with texture animation using blender, but I can’t find this animation in Babylonjs

It’s possible to animate UVs with animation pointer extension:

And some interesting Reddit thread here:

https://www.reddit.com/r/blenderhelp/comments/zaq6ze/how_do_i_export_with_animated_materials/

First of all, thank you very much for your answer, but I don’t understand what your answer means. My real need is to export the gltf file from blender to include the texture animation, but in fact, the gltf file I exported cannot see any texture animation in babylonjs. I want to know clearly whether there is a similar blender plug-in that can meet my needs, or this texture animation itself cannot be implemented in blender?

I think @PatrickRyan will be a better help than me here :slight_smile:

@Buugeed, due to the glTF specification there are only some things that can be animated without an extension. Mostly node/bone transforms and morph target gradients. For anything else, like UVs, @Cedric is right in that you need an extension like Animation Pointers to target other parameters. Unfortunately, that extension isn’t currently supported by Blender. I am assuming that it is likely due to the fact that there would need to be some sort of UI for the user to be able tag animations to be included with pointers that may not be available.

Right now, Babylon supports the animation pointers extension, but unfortunately, the tooling to create a file that uses it does not exist. This means the glTF json would likely need manual editing to add the extension and pointer information. I have not worked with the extension yet due to the limited tooling so there may be some sort of command-line conversion tool that I am not aware of that could produce a glTF that has support for animation pointers.

In terms of animating the UVs, you can do this directly in Babylon through Babylon animations or Node Materials which give you full access to design the shader with whatever animation you like. I’m guessing from your question, however, that you want to author the glTF with the animation on the UVs canned. Is this correct? If so, I can do some looking for a command line tool to convert to animation pointers. Otherwise the animation will need to be done in engine. What would you prefer?

1 Like

@PatrickRyan Yes, I would like to have a GUI tool that can convert animation pointers because I am unfamiliar with the operation of manually adding and editing. I would also like to know about the way you mentioned that I can operate directly in Babylon through Babylon animations or Node Materials. But where can I find them? Is there any relevant tutorial that can guide me to use them?

@Buugeed, I don’t think there are any GUI tools available. At best, there may be a command line tool that will author the glTF file correctly, but I’m not finding any reference. This is the extension specification if you want to dig through it to see how you could manually modify the glTF json file. I will ask one of my teammates tomorrow who may have some extra information, but I wouldn’t put a wager on there being a tool that offers easy conversion. My guess is that it would need to be manually authored in the glTF json.

In terms of illustrating a couple methods of animating UVs right in Babylon, I put together a quick playground to show you a couple of approaches you can use. There are three methods illustrated in it.

  1. Using a Babylon animation to animate the uOffset property of your Texture. You can easily add this to any texture loaded with a glTF. Just point to the appropriate texture in the loaded material and apply the animation. This way is a little more complicated, but gives you the power to change the length of the animation, add easing on the animation, loop or play once, or even group the animation with others to start/stop as needed. If you want complete control over your animation, this is the way to go.
  2. Using an observable on the render loop to simply add/subtract a value from the vOffset property. This is the most simple method, but offers the lease amount of control. You could add easing, change direction, start, stop, etc. but you will need to write that logic yourself.
  3. Using a node material to modify the mesh UVs by adding a value to them. In this method, we are not changing the vOffset of the texture, but offsetting the UV coordinates from the mesh before applying them to the Texture. This is similar to using vOffset, but in this case we can do a lot more than just offset. You could add noise, rotate, step, and much more giving you all sorts of control over how the texture animates. In this method, I am simply adding scene time to the V component of the mesh UVs before passing them to the Texture.

You could also mix the approaches as you like. For example, use a float block added to the mesh UV without the time block and then create a Babylon animation to drive the value of that float block. You can get as complex as you like mixing node materials and animations like in this more advanced example mixing animation and node materials.

Additional resources for node material can be found on the doc page which is full of video tutorials for various effects and uses. Similarly, the animation section of the docs has a lot of information about authoring, using, and grouping animations.

I know this is a lot of information, so please feel free to ping with more questions.

4 Likes

I asked my teammate and they recalled a PR that was open for Blender IO regarding animation pointers. This seems to have been merged, but there doesn’t seem to be any documentation around how to use this extension. I know through the Blender glTF manual that there are certain methods to set up your materials/scene to enable certain glTF extensions on export. However, I have no clue what the process would be for animation pointers. Seems like something that needs updating in the documentation.

I’m this teammate :smiley: . Maybe you can try pinging Julien (who is the developer writing the glTF code for Blender) on twitter (I mean X) and see if there is more information he can share.

Julien Duroure :large_orange_diamond: on X: “@kitaedesigns @hybridherbst I know the documentation is not up to date, but did you see we already have experimental I/O of animation pointer? (for NLATrack/Scene animation mode) https://t.co/fr1eqeVrNL” / X

3 Likes

@bghgary Thank you very much. This is really great and solved my problem perfectly.

1 Like