Shader error in the section "lights_physical_fragment:"

Questions
1

Here is the line 9750 in three.js r137:
var lights_physical_fragment = "PhysicalMaterial material;\nmaterial.diffuseColor = diffuseColor.rgb * ( 1.0 - metalnessFactor );\nvec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );\n…

I saw the following shader error when using three.js r137:
ERROR: 0:747: ‘geometryNormal’ : undeclared identifier
ERROR: 0:747: ‘=’ : cannot convert from ‘highp float’ to ‘highp 3-component vector of float’

The second error came from this part: “dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) )”

Could you fix it?

2

Do you mind explaining in more detail how this error occurs? Are you using a custom shader material?

3

Yes, I am using custom shader materials as shown at icn3d/src/thirdparty/shader at master · ncbi/icn3d · GitHub. The example page is at iCn3D: Web-based 3D Structure Viewer. I fixed the three.js code by replacing “vec3 dxy = max( abs( dFdx( geometryNormal ) ), abs( dFdy( geometryNormal ) ) );\nfloat geometryRoughness = max( max( dxy.x, dxy.y ), dxy.z );” with “float geometryRoughness = 0.0”.

4

Hi,

I know this is old, but I’m also getting an error that seems to originate from the lights_physical_fragment include. This code:

    const SIZE = 4;
    const RESOLUTION = 256;

    // console.log(THREE.ShaderChunk.meshphysical_vert);
    // console.log(THREE.ShaderChunk.meshphysical_frag);

    const geometry = new THREE.PlaneGeometry(SIZE, SIZE, RESOLUTION, RESOLUTION);

    const uniforms = {
        ...THREE.ShaderLib.physical.uniforms,
        diffuse: { value: "#5B82A6" },
        roughness: { value: 0.5 },
        amplitude: { value: 0.4},
        frequency: { value: 0.5 },
        speed: { value: 0.3 },
        time: { value: 1.0 }
    };

    const material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: THREE.ShaderChunk.meshphysical_vert,
        fragmentShader: THREE.ShaderChunk.meshphysical_frag,
        lights: true,
        side: THREE.DoubleSide,
        defines: {
            STANDARD: '',
            PHYSICAL: '',
        },
        extensions: {
            derivatives: true,
        },
    });

    const plane = new THREE.Mesh(geometry, material);

    plane.rotation.x = -(Math.PI / 2);

    // Place objects
    scene.add(plane);

… results in this error:

// Uncaught TypeError: 
// WebGL2RenderingContext.uniform3fv: 
// Argument 2 could not be converted to any of: Float32Array, sequence<unrestricted float>.
//    setValueV3f three.module.js:18471
//    upload three.module.js:19376
//    setProgram three.module.js:31008
//    renderBufferDirect three.module.js:29615
//    renderObject three.module.js:30492
//    renderObjects three.module.js:30461
//    renderScene three.module.js:30310
//    render three.module.js:30128
//    ...

Additionally, if I copy the contents of THREE.ShaderChunk.meshphysical_frag and comment out “#include <lights_physical_fragment>”, I see another error caused by “#include <lights_fragment_end>”…

// SHADER_INFO_LOG:
//     ERROR: 0:1764: 'material' : undeclared identifier
//     ERROR: 0:1764: 'RE_IndirectDiffuse_Physical' : no matching overloaded function found
//     ERROR: 0:1767: 'material' : undeclared identifier
//     ERROR: 0:1767: 'RE_IndirectSpecular_Physical' : no matching overloaded function found
//
//     FRAGMENT
//
//     ERROR: 0:1764: 'material' : undeclared identifier
//     ERROR: 0:1764: 'RE_IndirectDiffuse_Physical' : no matching overloaded function found
//     ERROR: 0:1767: 'material' : undeclared identifier
//     ERROR: 0:1767: 'RE_IndirectSpecular_Physical' : no matching overloaded function found
//
//       1759: 	#ifdef USE_CLEARCOAT
//       1760: 		clearcoatRadiance += getIBLRadiance( geometryViewDir, geometryClearcoatNormal, material.clearcoatRoughness );
//       1761: 	#endif
//       1762: #endif
//       1763: #if defined( RE_IndirectDiffuse )
//     > 1764: 	RE_IndirectDiffuse( irradiance, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
//       1765: #endif
//       1766: #if defined( RE_IndirectSpecular )
//       1767: 	RE_IndirectSpecular( radiance, iblIrradiance, clearcoatRadiance, geometryPosition, geometryNormal, geometryViewDir, geometryClearcoatNormal, material, reflectedLight );
//       1768: #endif
//       1769: //				#include <aomap_fragment>
//       1770: //				vec3 totalDiffuse = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse; three.module.js:20346:13
//         onFirstUse (js stack)
//         ...
//         ...
5

Well, I think I solved both of the issues above by correctly specifying the “diffuse” uniform variable…

    uniforms = {
        ...THREE.ShaderLib.physical.uniforms,
        diffuse: { value: { "r": 0.36, "g": 0.51, "b": 0.65 } }
        ...
    }

Is there a list of uniform names that have special meaning in THREE.ShaderChunk.meshphysical_vert/THREE.ShaderChunk.meshphysical_frag and what type of value they’re expected to have (I noticed no reference to “diffuse” in THREE.ShaderLib.physical.uniforms).