Is there an easy way to use .gif as a texture?

I want to apply a gif as a texture to a 3d plane. It seems babylonjs has no direct way of doing it. How could I achieve that?



I can not really get it , does the demo highlights on post process or just load and display a gif as a texture? I just want to display gif as a texture.

Take the code which you need from here - GitHub - sebavan/BabylonjsAnimatedGifSample: Quick Demo to show the usage of animated Gifs in Babylon.js

Then enjoy :slight_smile:


Good demo. But I am a newbie in js and ts. How could I only take what I want without any error? I tried compile the 3 ts files to js files, and put them in a new project, but many error occurs.

Then I’d recommend first learning the basics of the language, it helps greatly before jumping in more complex projects :slight_smile: The Modern JavaScript Tutorial TypeScript Tutorial

1 Like

Could u please provide a clean source code which only do the loading of GIF?

The matter is that the source is already there as separate class - BabylonjsAnimatedGifSample/animatedGifTexture.ts at master · sebavan/BabylonjsAnimatedGifSample · GitHub
(it also uses the shader in the separate file).

Then create a new texture (console logs just to have some info, not needed actually).

      const gifTexture = new AnimatedGifTexture("/tex/peng.gif", engine, () => {
        console.log("GIF Loaded");
        console.log("width: " + gifTexture._frames![0].dims.width);
        console.log("height: " + gifTexture._frames![0].dims.height);

Then use it on desired material

dummyMat.diffuseTexture = gifTexture;

Now I have my own project which structure is

Below is the gif demo code structure, which file should I drag from the gif demo into my own project? There are two main ts file i can see, but also many dependencies.

At least you need add gifuct.js to package.json

    "gifuct-js": "^2.1.2",

I would recommend to install the sample repo first to have some working example, then everything will go much simpler.


Let me know if you have issues with GIF texture.
I have simplified version of the same repo which I can put somewhere.

That would be very kind if u could send me the simplified version. GIF is very important to my project cause I want to make a 3d NFT gallery, and many NFTs are GIF format.

The simple way with ImageDecoder is here -
But it is supported not with all browsers (Chrome is OK).

1 Like

Saddlly few browser support this

OK , after a study of the source code, I have some new questions. Can I reference TS files in a JS file? I only know that TS can reference JS file.
If js file can not reference ts file directly, then MUST I change all my js file to ts so that it will be a ts project OR can I just compile the animatedGifTexture.ts and animatedGifTextureShader.ts to js then use them in my project?

Unless you want to set up a TS build for your project, this is probably going to be the easiest solution.


If I import the ts files into my current project which is written all in js. How could the js file reference the function or object defined in a ts file ?

You won’t be able to, as javascript has no understanding of what typescript is :slight_smile: I recommend ressearching on the differences between the two and how to use them: How to Add TypeScript to a JavaScript Project (

Thanks for the patience, I’ll check that. And I have another question resulting from our discussion. Is it better that I write any thing in TS since TS can easily reference JS, but JS can not reference TS. As a result if there are TS libraries written in ts such as this GIF one, I can easily integrate it into my project.

Considering that you are going to display NFT and may have transactions I would recommend to switch to Typescript, it is more reliable and will save a lot of time in future.

1 Like