Animated GIF as texture in THREE.js

Question

I'm looking for a way to use a GIF animation as texture in THREE.js. I am currently able to load a texture (even GIF format), but it doesn't play its animation.

Is there any way to do it? I found some links like these:

https://github.com/JordiRos/GLGif

http://stemkoski.github.io/Three.js/Texture-Animation.html

But I need to play GIF animation as a texture, not in a Canvas.

Purpleness

You say "I need to play GIF animation as a texture, not in a Canvas" but Three.js textures are rendered to a canvas. – Captive

What do you mean "not in a Canvas"? – Unwitting

Answer 1

What you're seeing isn't an animated GIF as a texture. The sites you linked use libraries to render each individual frame of the GIF as a texture and then cycle through them by changing the offset of the textured image.

Look at the source for the TextureAnimation link and see line 157. That is the object that performs this. You can see that the running animation isn't a GIF at all:

http://stemkoski.github.io/Three.js/images/run.png

Bacteriolysis

Answer 2

I had a similiar issue with animations using threejs. So I created a simple package to solve that: https://github.com/MaciejWWojcik/three-plain-animator

I hope that will help someone who get here for answers about threejs animations.

Grinnell

the example from stemkoski was very helpful for creating this – Grinnell

Gif files are not supported. – Hemianopsia

Answer 3

Use gifuct-js to render a gif into a Canvas and then use CanvasTexture with that canvas as a source.

Here's my POC that seems to work(may need refreshing the preview after it loads) https://codesandbox.io/s/giftexture-51rmw

Bigler

Answer 4

Create a video element, load that element using VideoTexture and add the texture to your mesh.

// Create video and play
let textureVid = document.createElement("video")
textureVid.src = `texture.mp4`; // transform gif to mp4
textureVid.loop = true;
textureVid.play();


// Load video texture
let videoTexture = new THREE.VideoTexture(textureVid);
videoTexture.format = THREE.RGBFormat;
videoTexture.minFilter = THREE.NearestFilter;
videoTexture.maxFilter = THREE.NearestFilter;
videoTexture.generateMipmaps = false;

// Create mesh
var geometry = new THREE.SphereGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { map: videoTexture } );
mesh = new THREE.Mesh( geometry, material );
scene.add(mesh);

Galliard

Thanks, this allowed me to have a cloud animation video on my Earth sphere. I had to add textureVid.crossOrigin = 'anonymous'; and use textureVid.src = 'http://localhost:8080/texture.mp4'; to have locally served files in the element, textureVid.muted = true; to have the element working in the first place, and videoTexture.format = THREE.RGBAFormat; since it seems that the RGBFormat was removed from Three.js recently. – Jap

Answer 5

An alternative to using an animated GIF as texture could be to use a tool such as ffmpeg to convert the animated gif into a video file, and then use that video as a texture, which is supported by WebGL.

Logos