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?

Hey, [image] Animated Gifs in WebGL 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… Reading time: 3 min read Babylon.js Playground Babylon.js play…

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

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 act…

Now I have my own project which structure is [2] 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. [gif demo]

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 - https://playground.babylonjs.com/#V2APP3#1 But it is supported not with all browsers (Chrome is OK).

Saddlly few browser support this

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

Questions

carolhmj October 28, 2022, 10:54am 25

Typescript is a great skill to have for any projects as it makes web code much more reliable

Load Gif as asset

Topic		Replies	Views
Animated Gifs in Babylon Announcements	42	5687	February 4, 2026
How to play a GIF on Plane Questions documentation , tutorial , material , shader , unity-exporter	8	1105	October 18, 2022
.Gif displacement maps Questions	7	2998	September 4, 2020
Need code for editing texture(jpg) of a 3D gltf model in babylon js Questions tutorial , gui , material , babylon , texture	1	411	March 6, 2023
Animated GIF Texture Demos and projects shader , animation , materialpluginbase	4	350	May 9, 2025

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

Related topics