R131 'tangent' : undeclared identifier

Questions
,
1

loader.setPath(‘models/gltf/’); loader.load(‘sphere.glb’, function (gltf) {

                    gltf.scene.traverse(function (child) {

                        if (child.isMesh) {

                            // mat.map = child.material.map;
                            // mat.normalMap = child.material.normalMap;
                            // //mat.metalnessMap = child.material.metalnessMap;
                            // mat.roughness = 0;
                            // //mat.metalness = child.material.metalness;
                            // mat.metalness = 0;

                            var sMat = new THREE.MeshPhysicalMaterial();

                            child.material = sMat;

                            //roughnessMipmapper.generateMipmaps(child.material);
                            console.log(child.geometry);
                            child.geometry.computeVertexNormals();
                            child.geometry.computeTangents();
                            console.log(child.geometry);
                        }

                    });

I am here http://localhost:8080/examples/?q=gltf#webgl_ loader_ Gltf modified the code, loaded a model (ball) exported from threejs editr, and loaded it. But the browser reported an error. Before r131, I could set vertextangents = true in the material, but now I don’t have this attribute. What should I do to use tangents correctly? I forced tangents on the shader：

export default /* glsl */`
#define STANDARD
#define USE_UV
#define USE_TANGENT
2

It should be sufficient to ensure the tangent buffer attribute is defined in the geometry. The renderer automatically uses tangents in this case.

4

According to your prompt, I did something, but I still couldn’t.

			loaderFBX.load('models/fbx/stanford-bunny.fbx', function (object) {

				model = object.children[0];

				model.traverse( ( obj ) => {
					if (obj.type === "Mesh" ) {
						console.log(obj);
						obj.geometry.usage = THREE.DynamicDrawUsage;
						obj.geometry.computeVertexNormals();
						obj.geometry.computeTangents();
						obj.geometry.needsUpdate=true;
					}

				});

				model.position.set(0, 0, 10);
				model.scale.setScalar(1);
				model.material = material;



				scene.add(model);

			});

At the same time, I also checked the geometric buffer of the ball and found that it has tangent data.
But it will still report errors. What should I do?

1628643748(1)
1628643748(1)1000×1730 215 KB

5

Could you create a demo showing this issue?

It is probably not a good idea to force tangents in the shader, are you seeing an error without that? And does this material have a normal map?

1 Like
6

I modified the shader source code of meshphysicalmaterial of threejs.
I need to add some new features to use tangents.
If the tangent is not forced, no error will be reported.
Some mesh materials do not carry normal maps.

7

If the material does not carry the found normal map, an error will be reported。

8

I had a similar issue when extending MeshStandardMaterial. You can override onBeforeCompile and set the defines as below. USE_TANGENT and the “missing” tangent attribute are set before the part of the vertexShader which is exposed in onBeforeCompile.

onBeforeCompile(shader) {
    shader.defines.USE_TANGENT = "";
    ...
1 Like