THREEjs - utiliser un gif animé comme carte de déplacement - shaders

Question

Je travaille sur cet exemple http://meetar.github.io/threejs-shader-demos/llama.html qui utilise un gif animé comme carte de déplacement. Cependant, il utilise Three.js R58 et je suis en utilisant Three.js R85 et le code suivant de l'exemple ne fonctionne pas pour moi

dispTexture = new THREE.Texture(llamacanvas); 

var shader = THREE.ShaderLib[ "normalmap" ]; 
uniforms = THREE.UniformsUtils.clone(shader.uniforms); 

uniforms[ "enableDisplacement" ] = { type: 'i', value: 1 }; 
uniforms[ "tDisplacement" ] = { type: 't', value: dispTexture }; 
uniforms[ "uDisplacementScale" ] = { type: 'f', value: 35 }; 

uniforms[ "enableDiffuse" ] = { type: 'i', value: 1 }; 
uniforms[ "tDiffuse" ].value = dispTexture; 

uniforms[ "tNormal" ] = { type: 't', value: new 
THREE.ImageUtils.loadTexture('flat.png')}; 

au premier var shader = THREE.ShaderLib[ "normalmap" ]; me donnait du mal - message d'erreur:

Uncaught TypeError: Cannot read property 'uniforms' of undefined

donc je remplacé normalmap avec normal, qui fixe cette erreur, mais
uniforms["tDiffuse"].value = dispTexture me donne un message d'erreur:

Uncaught TypeError: Cannot set property 'value' of undefined

C'est à ce moment que j'ai découvert l'énorme différence dans les constructions THREE.js. Je me demandais si quelqu'un peut m'aider à comprendre comment cela peut être mis en œuvre dans des versions plus récentes de THREE.js

Il a quelque chose à voir avec geometry.computeTangents(); qui faisait encore partie de r58, mais a été supprimé.

Merci!

mise à jour: Je continue à travailler sur ce sujet et je l'ai remplacé tDiffuse avec diffuse et chaque fois que les mises à jour de la boucle d'animation je reçois ce message d'erreur:

Uncaught TypeError: Cannot set property 'value' of undefined 

La console me pointe vers une place dans trois .min.js, pas dans le code exemple j'utilise:

 if (c.morphNormals) 
     for (m = c.numSupportedMorphNormals = 0; m < J.maxMorphNormals; m++) 
      0 <= l["morphNormal" + m] && c.numSupportedMorphNormals++; 
     l = h.__webglShader.uniforms; 
     if (!c.isShaderMaterial && !c.isRawShaderMaterial || !0 === c.clipping) 
     h.numClippingPlanes = Oa.numPlanes, 
     h.numIntersection = Oa.numIntersection, 
     l.clippingPlanes = Oa.uniform; 
     h.fog = b; 
     h.lightsHash = da.hash; 
     c.lights && (l.ambientLightColor.value = da.ambient, 
     l.directionalLights.value = da.directional, 
     l.spotLights.value = da.spot, 
     l.rectAreaLights.value = da.rectArea, 
     l.pointLights.value = da.point, 
     l.hemisphereLights.value = da.hemi, 
     l.directionalShadowMap.value = da.directionalShadowMap, 
     l.directionalShadowMatrix.value = da.directionalShadowMatrix, 
     l.spotShadowMap.value = da.spotShadowMap, 
     l.spotShadowMatrix.value = da.spotShadowMatrix, 
     l.pointShadowMap.value = da.pointShadowMap, 
     l.pointShadowMatrix.value = da.pointShadowMatrix); 
     m = h.program.getUniforms(); 
     l = db.seqWithValue(m.seq, l); 
     h.uniformsList = l 
    } 
    c.needsUpdate = !1 
    } 

Plus précisément, le programme arrête à

c.lights && (l.ambientLightColor.value = da.ambient, 

ayant un problème avec da.ambient. Je n'ai aucune idée de ce qu'il faut faire ensuite.

Answer 1

Beaucoup moins compliqué que je ne le pensais.

En r85, il n'est pas nécessaire de configurer explicitement les uniformes. Seulement dû importer le gif, créer le matériel puis ajoutez les gifCanvas comme 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; 

Puis dans la fonction animate():

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

Je regardais CanvasTexture et ShaderMaterial pendant un certain temps, mais pas nécessaire ce.