WebGLRenderer: Derivatives based FlatShading in MeshPhongMaterial. See #6117.

src/renderers/WebGLRenderer.js

@@ -4165,6 +4165,8 @@ THREE.WebGLRenderer = function ( parameters ) {
 			useFog: material.fog,
 			fogExp: fog instanceof THREE.FogExp2,
 
+			flatShading: material.shading === THREE.FlatShading,
+
 			sizeAttenuation: material.sizeAttenuation,
 			logarithmicDepthBuffer: _logarithmicDepthBuffer,
 

src/renderers/shaders/ShaderChunk/lights_phong_fragment.glsl

@@ -1,4 +1,15 @@
-vec3 normal = normalize( vNormal );
+#ifdef FLAT_SHADED
+
+	vec3 fdx = dFdx( vViewPosition );
+	vec3 fdy = dFdy( vViewPosition );
+	vec3 normal = normalize( cross( fdx, fdy ) );
+
+#else
+
+	vec3 normal = normalize( vNormal );
+
+#endif
+
 vec3 viewPosition = normalize( vViewPosition );
 
 #ifdef DOUBLE_SIDED

src/renderers/webgl/WebGLProgram.js

@@ -267,7 +267,7 @@ THREE.WebGLProgram = ( function () {
 				'precision ' + parameters.precision + ' float;',
 				'precision ' + parameters.precision + ' int;',
 
-				( parameters.bumpMap || parameters.normalMap ) ? '#extension GL_OES_standard_derivatives : enable' : '',
+				( parameters.bumpMap || parameters.normalMap || parameters.flatShading ) ? '#extension GL_OES_standard_derivatives : enable' : '',
 
 				customDefines,
 
@@ -278,6 +278,7 @@ THREE.WebGLProgram = ( function () {
 
 				'#define MAX_SHADOWS ' + parameters.maxShadows,
 
+				parameters.flatShading ? '#define FLAT_SHADED': '',
 				parameters.alphaTest ? '#define ALPHATEST ' + parameters.alphaTest : '',
 
 				_this.gammaInput ? '#define GAMMA_INPUT' : '',
@@ -345,7 +346,7 @@ THREE.WebGLProgram = ( function () {
 			THREE.error( 'THREE.WebGLProgram: shader error: ' + _gl.getError(), 'gl.VALIDATE_STATUS', _gl.getProgramParameter( program, _gl.VALIDATE_STATUS ), 'gl.getPRogramInfoLog', programLogInfo );
 
 		}
-		
+
 		if ( programLogInfo !== '' ) {
 
 			THREE.warn( 'THREE.WebGLProgram: gl.getProgramInfoLog()' + programLogInfo );