According to the Three.js docs (relevant link) , I can precompute and enable vertex tangents in the standard material like so:
geometry.computeTangents()
material.vertexTangents = true
Then, based on this line in WebGLProgram.js there should be a #define USE_TANGENT
automatically added to the shader due to vertexTangents
being true.
However, it’s not working in this JSFiddle where I’m overriding the fragment color:
https://jsfiddle.net/mattrossman/ewbuk0mx/
The sphere should appear green based on the existence of USE_TANGENT
, but instead it stays red. If instead I manually set material.defines.USE_TANGENT = true
, then the sphere appears green as expected. In fact, it will keep working even if I set .vertexTangents = false
.
This makes me confused – what is the expected behavior of .vertexTangents
? It doesn’t appear to have any effect here.
Vertex tangents only have an effect if you are using a normal map:
gradientMap: !! material.gradientMap,
sheen: !! material.sheen,
transmission: !! material.transmission,
transmissionMap: !! material.transmissionMap,
thicknessMap: !! material.thicknessMap,
combine: material.combine,
vertexTangents: ( material.normalMap && material.vertexTangents ),
vertexColors: material.vertexColors,
vertexAlphas: material.vertexColors === true && object.geometry && object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4,
vertexUvs: !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatMap || !! material.clearcoatRoughnessMap || !! material.clearcoatNormalMap || !! material.displacementMap || !! material.transmission || !! material.transmissionMap || !! material.thicknessMap,
uvsVertexOnly: ! ( !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatNormalMap || !! material.transmission || !! material.transmissionMap || !! material.thicknessMap ) && !! material.displacementMap,
fog: !! fog,
useFog: material.fog,
fogExp2: ( fog && fog.isFogExp2 ),
flatShading: !! material.flatShading,
In your fiddle, you are not applying a normal map to the material.
1 Like