Merge pull request #10330 from bhouston/normalDoubleSided

add support for front/back/double to MeshNormalMaterial

examples/webgl_materials_channels.html

@@ -59,7 +59,8 @@
 
 			var params = {
 				material: 'normal',
-				camera: 'perspective'
+				camera: 'perspective',
+				side: 'double'
 			};
 
 			var cameraOrtho, cameraPerspective;
@@ -84,7 +85,7 @@
 				var gui = new dat.GUI();
 				gui.add( params, 'material', [ 'standard', 'normal', 'depthBasic', 'depthRGBA' ] );
 				gui.add( params, 'camera', [ 'perspective', 'ortho' ] );
-
+				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
 			}
 
 			function init() {
@@ -188,7 +189,9 @@
 					side: THREE.DoubleSide
 				} );
 
-				materialNormal = new THREE.MeshNormalMaterial();
+				materialNormal = new THREE.MeshNormalMaterial( {
+					side: THREE.DoubleSide
+				} );
 
 				//
 
@@ -266,6 +269,14 @@
 
 					}
 
+					switch ( params.side ) {
+
+						case 'front': material.side = THREE.FrontSide; break;
+						case 'back': material.side = THREE.BackSide; break;
+						case 'double': material.side = THREE.DoubleSide; break;
+	
+					}
+
 					mesh.material = material;
 
 				}

examples/webgl_materials_envmaps_hdr.html

@@ -63,7 +63,8 @@
 				roughness: 1.0,
 				bumpScale: 0.3,
 				background: false,
-				exposure: 1.0
+				exposure: 1.0,
+				side: 'front'
 			};
 			var camera, scene, renderer, controls, objects = [];
 			var hdrCubeMap;
@@ -91,8 +92,8 @@
 				standardMaterial = new THREE.MeshStandardMaterial( {
 					map: null,
 					bumpScale: - 0.05,
-					color: 0xffffff,
-					metalness: 1.0,
+					color: 0xff4444,
+					metalness: 0.5,
 					roughness: 1.0,
 					shading: THREE.SmoothShading
 				} );
@@ -127,6 +128,7 @@
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 4;
 					map.repeat.set( 9, 2 );
+					standardMaterial.map = map;
 					standardMaterial.roughnessMap = map;
 					standardMaterial.bumpMap = map;
 					standardMaterial.needsUpdate = true;
@@ -219,6 +221,7 @@
 				gui.add( params, 'roughness', 0, 1 );
 				gui.add( params, 'bumpScale', - 1, 1 );
 				gui.add( params, 'exposure', 0.1, 2 );
+				gui.add( params, 'side', [ 'front', 'back', 'double' ] );
 				gui.open();
 
 			}
@@ -275,6 +278,23 @@
 
 					}
 
+
+					var side = standardMaterial.side;
+
+					switch ( params.side ) {
+
+						case 'front': side = THREE.FrontSide; break;
+						case 'back': side = THREE.BackSide; break;
+						case 'double': side = THREE.DoubleSide; break;
+	
+					}
+
+					if( standardMaterial.side !== side ) {
+						
+						standardMaterial.side = side;
+						standardMaterial.needsUpdate = true;
+
+					}
 				}
 
 				renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );

src/renderers/shaders/ShaderLib/normal_frag.glsl

@@ -9,7 +9,9 @@ varying vec3 vNormal;
 void main() {
 
 	#include <clipping_planes_fragment>
-	gl_FragColor = vec4( packNormalToRGB( vNormal ), opacity );
+	#include <normal_flip>
+   
+   	gl_FragColor = vec4( packNormalToRGB( vNormal * flipNormal ), opacity );
 
 	#include <logdepthbuf_fragment>