# Is there an easy way to use .gif as a texture?
**URL:** https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681
**Category:** Questions
**Created:** [October 11, 2022, 7:56am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681 "2022-10-11T07:56:23Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 11, 2022, 7:56am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/1 "2022-10-11T07:56:23Z")
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?
---
### Author:  [@MarianG](https://forum.babylonjs.com/u/MarianG)
#### Post date: [October 11, 2022, 11:34am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/2 "2022-10-11T11:34:17Z")
Hey,
> **[Animated Gifs in WebGL](https://babylonjs.medium.com/animated-gifs-in-webgl-55a6c7bc9c93)**
>
> The popularity of animated Gifs is only growing, and I have to admit that I totally love it :-) More and more, I receive questions about…
> **[Babylon.js Playground](https://playground.babylonjs.com/#ZDVUR3%235)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 13, 2022, 3:32am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/4 "2022-10-13T03:32:56Z")
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.
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [October 13, 2022, 3:42am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/5 "2022-10-13T03:42:45Z")
> [@Digital\_Mimesis\_Lab](#):
>
> 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](https://github.com/sebavan/BabylonjsAnimatedGifSample)
Then enjoy 🙂
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 13, 2022, 6:02am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/6 "2022-10-13T06:02:31Z")
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.
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [October 13, 2022, 11:27am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/7 "2022-10-13T11:27:16Z")
Then I’d recommend first learning the basics of the language, it helps greatly before jumping in more complex projects 🙂 [The Modern JavaScript Tutorial](https://javascript.info/) [TypeScript Tutorial](https://www.typescripttutorial.net/)
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 13, 2022, 1:28pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/8 "2022-10-13T13:28:14Z")
Could u please provide a clean source code which only do the loading of GIF?
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [October 13, 2022, 1:43pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/9 "2022-10-13T13:43:29Z")
The matter is that the source is already there as separate class - [BabylonjsAnimatedGifSample/animatedGifTexture.ts at master · sebavan/BabylonjsAnimatedGifSample · GitHub](https://github.com/sebavan/BabylonjsAnimatedGifSample/blob/master/src/animatedGifTexture.ts#L58)
(it also uses the shader in the separate file).
Then create a new texture (console logs just to have some info, not needed actually).
```auto
const gifTexture = new AnimatedGifTexture("/tex/peng.gif", engine, () => {
console.log("GIF Loaded");
console.log(gifTexture);
console.log("width: " + gifTexture._frames![0].dims.width);
console.log("height: " + gifTexture._frames![0].dims.height);
});
```
Then use it on desired material
```auto
dummyMat.diffuseTexture = gifTexture;
```
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 13, 2022, 2:02pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/10 "2022-10-13T14:02:41Z")
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.
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [October 13, 2022, 2:53pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/11 "2022-10-13T14:53:50Z")
At least you need add gifuct.js to package.json
```auto
"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.
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [October 13, 2022, 7:25pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/12 "2022-10-13T19:25:08Z")
Let me know if you have issues with GIF texture.
I have simplified version of the same repo which I can put somewhere.
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 14, 2022, 12:40am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/13 "2022-10-14T00:40:25Z")
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.
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [October 21, 2022, 5:45am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/14 "2022-10-21T05:45:12Z")
The simple way with ImageDecoder is here - [https://playground.babylonjs.com/#V2APP3#1](https://playground.babylonjs.com/#V2APP3#1)
But it is supported not with all browsers (Chrome is OK).
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 21, 2022, 6:29am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/15 "2022-10-21T06:29:56Z")
Saddlly few browser support this
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 27, 2022, 6:29am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/16 "2022-10-27T06:29:26Z")
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?
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [October 27, 2022, 11:03am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/17 "2022-10-27T11:03:33Z")
> [@Digital\_Mimesis\_Lab](#):
>
> 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.
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 27, 2022, 2:34pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/18 "2022-10-27T14:34:16Z")
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 ?
---
### Author:  [@carolhmj](https://forum.babylonjs.com/u/carolhmj)
#### Post date: [October 27, 2022, 6:39pm UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/19 "2022-10-27T18:39:07Z")
You won’t be able to, as javascript has no understanding of what typescript is 🙂 I recommend ressearching on the differences between the two and how to use them: [How to Add TypeScript to a JavaScript Project (freecodecamp.org)](https://www.freecodecamp.org/news/how-to-add-typescript-to-a-javascript-project/)
---
### Author:  [@Digital\_Mimesis\_Lab](https://forum.babylonjs.com/u/Digital_Mimesis_Lab)
#### Post date: [October 28, 2022, 12:23am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/20 "2022-10-28T00:23:29Z")
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.
---
### Author:  [@labris](https://forum.babylonjs.com/u/labris)
#### Post date: [October 28, 2022, 2:13am UTC](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681/21 "2022-10-28T02:13:26Z")
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.
[Next page](https://forum.babylonjs.com/t/is-there-an-easy-way-to-use-gif-as-a-texture/34681.md?page=2)