WebGLProgram Shader Error when loading glb model in three.js r151

[Victorfy1214]

Description

Although I did not use shaders to render my model, I encountered this error when upgrading the three.js version from r150 to r151.

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
Program Info Log: Vertex shader is not compiled.
VERTEX
ERROR: 0:373: ‘uv2’ : undeclared identifier
ERROR: 0:373: ‘constructor’ : not enough data provided for construction

Reproduction steps

1.Change the version number of three. js in the project
2.Load my model which can render normally in the r150 version
3.Check the console and you will see the error message

Code

Please check my live examples, I have provided a demo that runs normally under version r150.1 and another that reports errors in version r151.3.

Live example

• three.js-r151.3-error
• three.js-r150.1-correct

Screenshots

No response

Version

r151.3

Device

Desktop

Browser

Chrome

OS

Windows

[digitalArt3DTobias]

Just a quick guess: Since your error says: "'uv2' : undeclared identifier": May it be that this info from the Migration Guide helps?

"aoMap and lightMap no longer use uv2. Set material.lightMap.channel to 0 for uv and 1 for uv2. Consequently, the uv2_* shader chunks have been removed."

[Victorfy1214]

Just a quick guess: Since your error says: "'uv2' : undeclared identifier": May it be that this info from the Migration Guide helps?

"aoMap and lightMap no longer use uv2. Set material.lightMap.channel to 0 for uv and 1 for uv2. Consequently, the uv2* shader chunks have been removed._"

Thank you for your suggestion. The method in the Migration Guide fixed the above errors, but also raised other issues. When I load another model in my project, the texture appears confused. While set material.lightMap.channel to 0, the render result is
the first picture below, and the correct result should be the second one.

[donmccurdy]

The model has validation errors, visible at https://github.khronos.org/glTF-Validator/. The materials specify that the occlusion texture should use the 2nd UV set, but the model contains no 2nd UV set. This worked in previous versions of three.js where mappings to UV sets were hard coded and GLTFLoader automatically copied the 1st UV set into a 2nd UV set if needed, but r151 is more flexible, supports any mapping, and so we removed that automatic creation of a 2nd UV set.

Error	Message	Pointer
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS	Material is incompatible with mesh primitive: Texture binding '/materials/0/occlusionTexture' needs 'TEXCOORD_1' attribute.	/meshes/0/primitives/0/material
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS	Material is incompatible with mesh primitive: Texture binding '/materials/1/occlusionTexture' needs 'TEXCOORD_1' attribute.	/meshes/1/primitives/0/material
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS	Material is incompatible with mesh primitive: Texture binding '/materials/1/occlusionTexture' needs 'TEXCOORD_1' attribute.	/meshes/2/primitives/0/material
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS	Material is incompatible with mesh primitive: Texture binding '/materials/2/occlusionTexture' needs 'TEXCOORD_1' attribute.	/meshes/3/primitives/0/material

I don't think this is something we should change in three.js, the new behavior is more useful and more correct than the old. A workaround would be to load the model in https://gltf.report and run the script below:

for (const material of document.getRoot().listMaterials()) {
	const info = material.getOcclusionTextureInfo();
	if (info) info.setTexCoord(0);
}

[donmccurdy]

Hm, the model was created by THREE.GLTFExporter. This we should definitely fix:

three.js/examples/jsm/exporters/GLTFExporter.js

Lines 1476 to 1481 in dfb2b17

	if ( material.aoMap ) {
	const occlusionMapDef = {
	index: this.processTexture( material.aoMap ),
	texCoord: 1
	};

[donmccurdy]

• cc GLTFExporter: Support multiple UV sets #25843

[Victorfy1214]

The model has validation errors, visible at https://github.khronos.org/glTF-Validator/. The materials specify that the occlusion texture should use the 2nd UV set, but the model contains no 2nd UV set. This worked in previous versions of three.js where mappings to UV sets were hard coded and GLTFLoader automatically copied the 1st UV set into a 2nd UV set if needed, but r151 is more flexible, supports any mapping, and so we removed that automatic creation of a 2nd UV set.

Error Message Pointer
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS Material is incompatible with mesh primitive: Texture binding '/materials/0/occlusionTexture' needs 'TEXCOORD_1' attribute. /meshes/0/primitives/0/material
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS Material is incompatible with mesh primitive: Texture binding '/materials/1/occlusionTexture' needs 'TEXCOORD_1' attribute. /meshes/1/primitives/0/material
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS Material is incompatible with mesh primitive: Texture binding '/materials/1/occlusionTexture' needs 'TEXCOORD_1' attribute. /meshes/2/primitives/0/material
MESH_PRIMITIVE_TOO_FEW_TEXCOORDS Material is incompatible with mesh primitive: Texture binding '/materials/2/occlusionTexture' needs 'TEXCOORD_1' attribute. /meshes/3/primitives/0/material
I don't think this is something we should change in three.js, the new behavior is more useful and more correct than the old. A workaround would be to load the model in https://gltf.report and run the script below:

for (const material of document.getRoot().listMaterials()) {
	const info = material.getOcclusionTextureInfo();
	if (info) info.setTexCoord(0);
}

Thank you for your patience and professional explanation. Now I understand the reason for this error.I will modify my model according to the report.Thank you very much for your help!