THREEjs - 使用动画 gif 作为置换贴图 - 着色器 [英] THREEjs - using an animated gif as a displacement map - shaders

问题描述

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

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 using THREE.js r85 and the following code from the example doesn't work for me

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" ]; 给我带来了麻烦 - 错误信息:

at first var shader = THREE.ShaderLib[ "normalmap" ]; was giving me trouble - error message:

未捕获的类型错误:无法读取未定义的属性制服"

Uncaught TypeError: Cannot read property 'uniforms' of undefined

所以我用 normal 替换了 normalmap，它修复了这个错误，
但是uniforms["tDiffuse"].value = dispTexture 给了我一条错误信息:

so I replaced normalmap with normal, which fixes that error,
but then uniforms["tDiffuse"].value = dispTexture gives me an error message:

未捕获的类型错误:无法设置未定义的属性值"

Uncaught TypeError: Cannot set property 'value' of undefined

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

This is when I discovered the huge difference in THREE.js builds. I was wondering if someone can help me understand how this can be implemented in more recent versions of THREE.js

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

It has something to do with geometry.computeTangents(); which was still part of r58, but has been removed.

谢谢！

更新:我继续研究这个，我用 diffuse 替换了 tDiffuse，每次动画循环更新时我都会收到这个错误消息:

update: I'm continuing to work on this and I replaced tDiffuse with diffuse and every time the animation loop updates I get this error message:

Uncaught TypeError: Cannot set property 'value' of undefined

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

The console points me to a spot in three.min.js, not in the example code I am using:

      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 有问题.我不知道接下来要做什么.

having a problem with da.ambient. I have no idea what to do next.

推荐答案

比我想象的要简单得多.

Much less complicated than I thought.

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

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;

然后在animate()函数中:

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

我查看了 CanvasTexture 和 ShaderMaterial 一段时间，但不是必需的.

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

这篇关于THREEjs - 使用动画 gif 作为置换贴图 - 着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！