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' )};
at first var shader = THREE.ShaderLib[ "normalmap" ];
was giving me trouble - error message:
Uncaught TypeError: Cannot read property 'uniforms' of undefined
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
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
It has something to do with geometry.computeTangents();
which was still part of r58, but has been removed.
Thanks!
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
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
}
Specifically, the program stops at
c.lights && (l.ambientLightColor.value = da.ambient,
having a problem with da.ambient
. I have no idea what to do next.