Threejs - Using An Animated Gif As A Displacement Map - Shaders

I've been working off this example http://meetar.github.io/threejs-shader-demos/llama.html that uses an animated gif as a displacement map. However, it uses THREE.js r58 and I'm us

Solution 1:

Much less complicated than I thought.

In r85 no need to explicitly set up the uniforms. Only had to import the gif, create the material then add the gifCanvas as a displacementMap:

var supGif = new SuperGif({ gif: document.getElementById('gif1') } );
supGif.load();
var gifCanvas = supGif.get_canvas();

                          .      .      .

material = new THREE.MeshStandardMaterial();
material.map = new THREE.Texture( gifCanvas );
material.displacementMap = material.map;

Then in the animate() function:

material.displacementScale = 200;material.map.needsUpdate = true;material.displacementMap.needsUpdate = true;

I looked at CanvasTexture and ShaderMaterial for awhile but not necessary for this.