THREEjs - 使用动画 gif 作为置换贴图 - 着色器答案

【问题标题】：THREEjs - using an animated gif as a displacement map - shadersTHREEjs - 使用动画 gif 作为置换贴图 - 着色器
【发布时间】：2017-09-30 02:04:20
【问题描述】：

我一直在研究这个示例http://meetar.github.io/threejs-shader-demos/llama.html，它使用动画 gif 作为置换贴图。但是，它使用 THREE.js r58，而我使用的是 THREE.js r85，示例中的以下代码对我不起作用

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' )};

起初 var shader = THREE.ShaderLib[ "normalmap" ]; 给我带来了麻烦 - 错误消息：

未捕获的类型错误：无法读取未定义的属性“制服”

所以我用normal 替换了normalmap，这修复了该错误，
但随后uniforms["tDiffuse"].value = dispTexture 给了我一条错误消息：

未捕获的类型错误：无法设置未定义的属性“值”

这是我发现 THREE.js 构建的巨大差异的时候。我想知道是否有人可以帮助我了解如何在最新版本的 THREE.js 中实现这一点

它与 geometry.computeTangents(); 有关，它仍然是 r58 的一部分，但已被删除。

谢谢！

更新：我将继续努力，并将tDiffuse 替换为diffuse，每次动画循环更新时都会收到以下错误消息：

Uncaught TypeError: Cannot set property 'value' of undefined

控制台将我指向 three.min.js 中的一个位置，而不是我正在使用的示例代码中：

      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
  }

具体来说，程序停在

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

da.ambient 有问题。我不知道下一步该做什么。

【问题讨论】：

想通了。远没有我想象的那么复杂。在 r85 中，我根本不需要担心明确设置制服。我所要做的就是导入 gif，创建材料，然后添加 gifCanvas： var supGif = new SuperGif({ gif: document.getElementById('gif1') } ); supGif.load(); var gifCanvas = supGif.get_canvas();material = new THREE.MeshStandardMaterial(); material.displacementMap = new THREE.Texture(gifCanvas);

标签： javascript three.js shader

【解决方案1】：

比我想象的要简单得多。

在 r85 中无需显式设置制服。只需要导入 gif，创建材质，然后添加 gifCanvas 作为置换贴图：

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;

然后在animate()函数中：

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

我研究了 CanvasTexture 和 ShaderMaterial 一段时间，但没有必要。

【讨论】：