ensure bump map scale is texture scale invariant. adjust examples. (#26899)

bhouston · web-flow · commit 7b13bb515866 · 2023-10-05T00:05:45.000-07:00
diff --git a/examples/webgl_lights_physical.html b/examples/webgl_lights_physical.html
@@ -111,7 +111,7 @@
 					roughness: 0.8,
 					color: 0xffffff,
 					metalness: 0.2,
-					bumpScale: 0.0005
+					bumpScale: 1
 				} );
 				const textureLoader = new THREE.TextureLoader();
 				textureLoader.load( 'textures/hardwood2_diffuse.jpg', function ( map ) {
@@ -149,7 +149,7 @@
 				cubeMat = new THREE.MeshStandardMaterial( {
 					roughness: 0.7,
 					color: 0xffffff,
-					bumpScale: 0.002,
+					bumpScale: 1,
 					metalness: 0.2
 				} );
 				textureLoader.load( 'textures/brick_diffuse.jpg', function ( map ) {
diff --git a/examples/webgl_materials_bumpmap.html b/examples/webgl_materials_bumpmap.html
@@ -92,7 +92,7 @@
 					specular: 0x666666,
 					shininess: 25,
 					bumpMap: mapHeight,
-					bumpScale: 0.1
+					bumpScale: 10
 				} );
 
 				loader = new GLTFLoader();
diff --git a/src/renderers/shaders/ShaderChunk/bumpmap_pars_fragment.glsl.js b/src/renderers/shaders/ShaderChunk/bumpmap_pars_fragment.glsl.js
@@ -24,8 +24,9 @@ export default /* glsl */`
 
 	vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy, float faceDirection ) {
 
-		vec3 vSigmaX = dFdx( surf_pos.xyz );
-		vec3 vSigmaY = dFdy( surf_pos.xyz );
+		// normalize is done to ensure that the bump map looks the same regardless of the texture's scale
+		vec3 vSigmaX = normalize( dFdx( surf_pos.xyz ) );
+		vec3 vSigmaY = normalize( dFdy( surf_pos.xyz ) );
 		vec3 vN = surf_norm; // normalized
 
 		vec3 R1 = cross( vSigmaY, vN );
