Merge pull request #18522 from higharc/fix-normal-map-handedness

Fix and document normal map handedness

docs/api/en/materials/MeshMatcapMaterial.html

@@ -115,6 +115,8 @@
 		<p>
 			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
 			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+			In case the material has a normal map authored using the left handed convention, the y component of normalScale
+			should be negated to compensate for the different handedness.
 		</p>
 
 		<h3>[property:Integer normalMapType]</h3>

docs/api/en/materials/MeshNormalMaterial.html

@@ -92,6 +92,8 @@
 		<p>
 			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
 			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+			In case the material has a normal map authored using the left handed convention, the y component of normalScale
+			should be negated to compensate for the different handedness.
 		</p>
 
 		<h3>[property:Integer normalMapType]</h3>

docs/api/en/materials/MeshPhongMaterial.html

@@ -166,6 +166,8 @@
 		<p>
 			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
 			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+			In case the material has a normal map authored using the left handed convention, the y component of normalScale
+			should be negated to compensate for the different handedness.
 		</p>
 
 		<h3>[property:Integer normalMapType]</h3>

docs/api/en/materials/MeshStandardMaterial.html

@@ -214,6 +214,8 @@
 		<p>
 			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
 			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+			In case the material has a normal map authored using the left handed convention, the y component of normalScale
+			should be negated to compensate for the different handedness.
 		</p>
 
 		<h3>[property:Integer normalMapType]</h3>

docs/api/en/materials/MeshToonMaterial.html

@@ -147,6 +147,8 @@
 		<p>
 			The texture to create a normal map. The RGB values affect the surface normal for each pixel fragment and change
 			the way the color is lit. Normal maps do not change the actual shape of the surface, only the lighting.
+			In case the material has a normal map authored using the left handed convention, the y component of normalScale
+			should be negated to compensate for the different handedness.
 		</p>
 
 		<h3>[property:Integer normalMapType]</h3>

examples/misc_controls_fly.html

@@ -83,7 +83,9 @@
 					map: textureLoader.load( "textures/planets/earth_atmos_2048.jpg" ),
 					specularMap: textureLoader.load( "textures/planets/earth_specular_2048.jpg" ),
 					normalMap: textureLoader.load( "textures/planets/earth_normal_2048.jpg" ),
-					normalScale: new THREE.Vector2( 0.85, 0.85 )
+
+					// y scale is negated to compensate for normal map handedness.
+					normalScale: new THREE.Vector2( 0.85, -0.85 )
 
 				} );
 

examples/webgl_materials_physical_clearcoat.html

@@ -120,7 +120,9 @@
 								clearcoat: 1.0,
 								normalMap: normalMap4,
 								clearcoatNormalMap: clearcoatNormaMap,
-								clearcoatNormalScale: new THREE.Vector2( 2.0, 2.0 )
+
+								// y scale is negated to compensate for normal map handedness.
+								clearcoatNormalScale: new THREE.Vector2( 2.0, -2.0 )
 							} );
 							var mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = - 100;
@@ -136,7 +138,9 @@
 								normalMap: normalMap2,
 								normalScale: new THREE.Vector2( 0.15, 0.15 ),
 								clearcoatNormalMap: clearcoatNormaMap,
-								clearcoatNormalScale: new THREE.Vector2( 2.0, 2.0 )
+
+								// y scale is negated to compensate for normal map handedness.
+								clearcoatNormalScale: new THREE.Vector2( 2.0, -2.0 )
 							} );
 							var mesh = new THREE.Mesh( geometry, material );
 							mesh.position.x = 100;