In case you wonder how to use animated gifs in babylon, please have a read at:
Hope you ll enjoy it.
If it shows a lot of traction, we ll make it an official texture 
11 Likes
Nice!
Wouldn’t it be possible to convert the gif to an animated sprite sheet? Don’t know if there would be some advantages to do se, though.
Note: I think you linked a wrong PG in your blog post => Babylon.js Playground
Main issue is the sprite sheet needs different size per sprites (each frame has a different size this is crazy) so would need to pack weirdly to save space … and would go over ios max size.
The best would be to do the color lookup for each texture and use only a r texture per frame so we could save lot more memory but the code was getting dirty so I kept more demo focused 
Didn’t know that an animated gif could have frames of different sizes!
Me neither but basically all frames are tiny patches to stick on the previous one with alpha test for the moving part. It saves lots of space but is annoying as hell
1 Like
Couldn’t a procedural texture handle this as well instead of a whole effect wrapper?
1 Like
It should but was a bit bigger in dependencies. It will eventually become one if the community would like to use it
1 Like
In cryptovoxels we spritesheet the gifs, the main problem is keeping the spritesheet at a reasonable size means we have to crush the resolution quite badly.
We’re going to use AnimatedGifTexture when a user zooms in on a .gif to display the high res version.
Great work thanks @sebavan.
2 Likes
great work @sebavan
may i ask about the modules?? i’ve got error at this._patchEffectRenderer.render function.
I have just updated the package to babylon latest preview and it looks ok for me.
Do you happen to have a repro to share here it looks like you render target is undefined for some reason.
No error in 5.2.0 (well, also there is a possibility of code typo in my previous question).
Anyway, I would be grateful if anybody could point the link to the example where animated GIF is used as plane or other mesh texture.
I am not sure we have but as I did the demo with a baseTexture, it should be ready to use ?
Also this might be more align with modern browsers: https://playground.babylonjs.com/#ZDVUR3#5
2 Likes
This is exactly what I was looking for! Thanks a lot! 
ImageDecoder doesn’t work in Firefox and Safari… what a pity…
yup still on the bleeding edge 
but the other sample should be ok to be used as a material in any texture slot isnt it ?
Should be, with the help of Gifuct-js
1 Like
@sebavan Thanks for this example. I implemented it, changing the render target to be compatible with 4.2 which we are still on, and it is working. Only when I have an animated gif with transparency, I see a ghosting effect of the old frames, as though the render buffer isn’t cleared. We have autoClear set to true for our scene and my code matches exactly yours prior to the 5.0 compatibility commit. Unfortunately I can’t provide a PG, due to the external libraries, but can you think of anything I would need to change to handle transparency in an animated gif? This is the example gif I am using - https://media.giphy.com/media/7C1gCvIRwltitr5gu4/giphy.gif
