Animated Gifs in Babylon

If there is an easy way to create a PG that has gifuct in it, I’m happy to do that. Been trying all day with skypack and running into issues with how gifuct is packaged. Also tried codepen and didn’t get much further.

@ericwood73 I have added the transparency support in the repo Supports Gif disposal type · sebavan/BabylonjsAnimatedGifSample@0fca7a9 · GitHub

2 Likes

Thanks. After applying your changes, I’m still seeing the ghosting but now I’m also seeing all textures on all meshes flash with each update. It looks like it is clearing the color buffer for the entire scene and the redrawing the previous frame. Is there something different I need to do in 4.2.1?

Nevermind. I found it. I forgot to change this._renderTarget.texture to this._texture in the clear section. Thank you so much for the quick response and the solution!

1 Like

@sebavan If I want to update a texture on a mesh with image frames (e.g. from video capture) is this the best way to do it from a performance perspective versus just setting the diffuse texture on a material for each frame? Note I can’t use VideoTexture, because the video frames are being streamed from the server.

I would recommend a Texture only and updating every frame with your new content if you do not need some different offsets every frames.

@sebavan Testing with BabylonJS 5 and my animated gifs are wonky. I can’t make a PG, since I can’t include gifuct, but I made a video


. As you can see the gif is flickering. The rate of flickering changes as I rescale the window. Sometimes it stops but then the entire gif will disappear for a period of time. Another issue is that the texture is rendering full screen on the camera rather than on my mesh (the bounding box for which is shown in blue). If I zoom the camera in and out, the gif doesn’t scale so it seems to be rendering as a full screen overlay. Any thoughts on what I might be doing wrong?

can you try updated the code to the latest version of the animated gif repo ?

I can not see why it would not work if not I d need a tiny github repro if possible ?

1 Like

I updated to the latest in your repro and it worked. Odd because I can’t find anything different between my edits and the latest, but in any case it is working great now. Thanks again.

3 Likes

Hey, this looks great. Any chance of getting a PG for this? I’m having a hard time figuring out how to integrate this into babylon.

Thanks

This unfortunately requires extra dependencies hard to integrate in a pg hence the current demo :slight_smile:

I think there is a PG that works with browsers that support the Media Codecs API, but so far that list only has Chrome in it. Without it you need gifuct. I tried loading it into a PG via skypack in a BS PG as well as a codepen, but never got it to work. You could copy and paste the gifuct code, but it in turn has dependencies and at the end of the day it is easier to set up a git repo and give the team access if you need help. Having gone through it recently, I can try to assist if you have questions.

2 Likes

@sebavan I tried to open the demo but it does not work/load?
https://www.babylonjs.com/Demos/AnimatedGif

A redirection might be missing since the latest CDN adjustments cc @RaananW

@ertugrulcetin you can use Animated Gif Processing instead

2 Likes

Working on a fix for that, in the meantime you can add a backslash to make it work - Animated Gif Processing (babylonjs.com)

1 Like