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,
4 Likes
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 
2 Likes
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 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(gifTexture);
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;
2 Likes
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.
2 Likes
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).
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.
2 Likes
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 I recommend ressearching on the differences between the two and how to use them: How to Add TypeScript to a JavaScript Project (freecodecamp.org)
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