Merge pull request #11724 from WestLangley/dev-flat_shading

Remove Material.shading; add Material.flatShading

docs/api/constants/Materials.html

@@ -28,16 +28,6 @@
 		</div>
 
 
-		<h2>Shading</h2>
-		<code>
-	  THREE.SmoothShading
-		THREE.FlatShading
-		</code>
-		<div>
-		[page:Constant SmoothShading] is the default and linearly interpolates color between vertices.<br />
-		[page:Constant FlatShading] uses the color of the first vertex for every pixel in a face.
-		</div>
-
 		<h2>Colors</h2>
 		<code>
 		THREE.NoColors

docs/api/materials/Material.html

@@ -204,10 +204,9 @@
 		Default is *false*.
 		</div>
 
-		<h3>[property:Integer shading]</h3>
+		<h3>[property:Boolean flatShading]</h3>
 		<div>
-		Defines how the material is shaded.
-		This can be either [page:Materials THREE.SmoothShading] (default)	or [page:Materials THREE.FlatShading].
+		Define whether the material is rendered with flat shading. Default is false.
 		</div>
 
 		<h3>[property:Integer side]</h3>

docs/api/materials/ShaderMaterial.html

@@ -371,10 +371,9 @@ this.extensions = {
 		You should not need to access this property.
 		</div>
 
-		<h3>[property:Number shading]</h3>
+		<h3>[property:Boolean flatShading]</h3>
 		<div>
-		Define shading type, which determines whether normals are smoothed between vertices;
-		possible values are [page:Materials THREE.SmoothShading] or [page:Materials THREE.FlatShading]. Default is THREE.SmoothShading.
+		Define whether the material is rendered with flat shading. Default is false.
 		</div>
 
 

docs/scenes/bones-browser.html

@@ -149,7 +149,7 @@
 					color: 0x156289,
 					emissive: 0x072534,
 					side: THREE.DoubleSide,
-					shading: THREE.FlatShading
+					flatShading: true
 				} );
 
 				var mesh = new THREE.SkinnedMesh( geometry,	material );

docs/scenes/geometry-browser.html

@@ -94,7 +94,7 @@
 					color: 0x156289,
 					emissive: 0x072534,
 					side: THREE.DoubleSide,
-					shading: THREE.FlatShading
+					flatShading: true
 				} )
 
 			) );

docs/scenes/js/geometry.js

@@ -22,13 +22,6 @@ var constants = {
 
 	},
 
-	shading : {
-
-		"THREE.FlatShading" : THREE.FlatShading,
-		"THREE.SmoothShading" : THREE.SmoothShading
-
-	},
-
 	colors : {
 
 		"THREE.NoColors" : THREE.NoColors,

docs/scenes/js/material.js

@@ -20,13 +20,6 @@ var constants = {
 
 	},
 
-	shading : {
-
-		"THREE.FlatShading" : THREE.FlatShading,
-		"THREE.SmoothShading" : THREE.SmoothShading
-
-	},
-
 	colors : {
 
 		"THREE.NoColors" : THREE.NoColors,
@@ -202,7 +195,6 @@ function needsUpdate ( material, geometry ) {
 
 	return function () {
 
-		material.shading = +material.shading; //Ensure number
 		material.vertexColors = +material.vertexColors; //Ensure number
 		material.side = +material.side; //Ensure number
 		material.needsUpdate = true;
@@ -330,7 +322,6 @@ function guiMeshBasicMaterial ( gui, mesh, material, geometry ) {
 	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'shading', constants.shading);
 	folder.add( material, 'vertexColors', constants.colors).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'fog' );
 
@@ -360,6 +351,7 @@ function guiMeshNormalMaterial ( gui, mesh, material, geometry ) {
 
 	var folder = gui.addFolder('THREE.MeshNormalMaterial');
 
+	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
 	folder.add( material, 'morphTargets' ).onChange( updateMorphs( mesh, material ) );
@@ -438,7 +430,7 @@ function guiMeshPhongMaterial ( gui, mesh, material, geometry ) {
 	folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
 
 	folder.add( material, 'shininess', 0, 100);
-	folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
 	folder.add( material, 'vertexColors', constants.colors);
@@ -470,7 +462,7 @@ function guiMeshStandardMaterial ( gui, mesh, material, geometry ) {
 
 	folder.add( material, 'roughness', 0, 1 );
 	folder.add( material, 'metalness', 0, 1 );
-	folder.add( material, 'shading', constants.shading).onChange( needsUpdate( material, geometry ) );
+	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 	folder.add( material, 'wireframe' );
 	folder.add( material, 'wireframeLinewidth', 0, 10 );
 	folder.add( material, 'vertexColors', constants.colors);
@@ -533,7 +525,7 @@ function chooseFromHash ( gui, mesh, geometry ) {
 
 	case "MeshDepthMaterial" :
 
-		material = new THREE.MeshDepthMaterial({color: 0x2194CE});
+		material = new THREE.MeshDepthMaterial();
 		guiMaterial( gui, mesh, material, geometry );
 		guiMeshDepthMaterial( gui, mesh, material, geometry );
 

src/Three.Legacy.js

@@ -1034,6 +1034,20 @@ Object.defineProperties( Material.prototype, {
 			console.warn( 'THREE.Material: .wrapRGB has been removed.' );
 			return new Color();
 
+		}
+	},
+
+	shading: {
+		get: function () {
+
+			console.error( 'THREE.' + this.type + ': .shading has been removed. Use the boolean .flatShading instead.' );
+
+		},
+		set: function ( value ) {
+
+			console.warn( 'THREE.' + this.type + ': .shading has been removed. Use the boolean .flatShading instead.' );
+			this.flatShading = ( value === THREE.FlatShading ) ? true : false;
+
 		}
 	}
 

src/materials/Material.js

 import { EventDispatcher } from '../core/EventDispatcher';
-import { NoColors, FrontSide, SmoothShading, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor } from '../constants';
+import { NoColors, FrontSide, FlatShading, NormalBlending, LessEqualDepth, AddEquation, OneMinusSrcAlphaFactor, SrcAlphaFactor } from '../constants';
 import { _Math } from '../math/Math';
 
 /**
@@ -23,7 +23,7 @@ function Material() {
 
 	this.blending = NormalBlending;
 	this.side = FrontSide;
-	this.shading = SmoothShading; // THREE.FlatShading, THREE.SmoothShading
+	this.flatShading = false;
 	this.vertexColors = NoColors; // THREE.NoColors, THREE.VertexColors, THREE.FaceColors
 
 	this.opacity = 1;
@@ -86,6 +86,15 @@ Object.assign( Material.prototype, EventDispatcher.prototype, {
 
 			}
 
+			// for backward compatability if shading is set in the constructor
+			if ( key === 'shading' ) {
+
+				console.warn( 'THREE.' + this.type + ': .shading has been removed. Use the boolean .flatShading instead.' );
+				this.flatShading = ( newValue === FlatShading ) ? true : false;
+				continue;
+
+			}
+
 			var currentValue = this[ key ];
 
 			if ( currentValue === undefined ) {
@@ -201,7 +210,7 @@ Object.assign( Material.prototype, EventDispatcher.prototype, {
 		if ( this.sizeAttenuation !== undefined ) data.sizeAttenuation = this.sizeAttenuation;
 
 		if ( this.blending !== NormalBlending ) data.blending = this.blending;
-		if ( this.shading !== SmoothShading ) data.shading = this.shading;
+		if ( this.flatShading === true ) data.flatShading = this.flatShading;
 		if ( this.side !== FrontSide ) data.side = this.side;
 		if ( this.vertexColors !== NoColors ) data.vertexColors = this.vertexColors;
 
@@ -271,7 +280,7 @@ Object.assign( Material.prototype, EventDispatcher.prototype, {
 
 		this.blending = source.blending;
 		this.side = source.side;
-		this.shading = source.shading;
+		this.flatShading = source.flatShading;
 		this.vertexColors = source.vertexColors;
 
 		this.opacity = source.opacity;

src/materials/MeshBasicMaterial.js

@@ -26,7 +26,6 @@ import { Color } from '../math/Color';
  *  reflectivity: <float>,
  *  refractionRatio: <float>,
  *
- *  shading: THREE.SmoothShading,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *

src/renderers/WebGLRenderer.js

@@ -629,7 +629,7 @@ function WebGLRenderer( parameters ) {
 			if ( ! material.isMeshPhongMaterial &&
 				! material.isMeshStandardMaterial &&
 				! material.isMeshNormalMaterial &&
-				material.shading === FlatShading ) {
+				material.flatShading === true ) {
 
 				for ( var i = 0, l = object.count * 3; i < l; i += 9 ) {
 

src/renderers/webgl/WebGLPrograms.js

@@ -2,7 +2,7 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-import { BackSide, DoubleSide, FlatShading, CubeUVRefractionMapping, CubeUVReflectionMapping, GammaEncoding, LinearEncoding } from '../../constants';
+import { BackSide, DoubleSide, CubeUVRefractionMapping, CubeUVReflectionMapping, GammaEncoding, LinearEncoding } from '../../constants';
 import { WebGLProgram } from './WebGLProgram';
 
 function WebGLPrograms( renderer, capabilities ) {
@@ -162,7 +162,7 @@ function WebGLPrograms( renderer, capabilities ) {
 			useFog: material.fog,
 			fogExp: ( fog && fog.isFogExp2 ),
 
-			flatShading: material.shading === FlatShading,
+			flatShading: material.flatShading,
 
 			sizeAttenuation: material.sizeAttenuation,
 			logarithmicDepthBuffer: capabilities.logarithmicDepthBuffer,