Merge pull request #17443 from sdinesh86/dev

Physical Material Sheen parameter serialization and deserialization and exposed in editor

editor/js/Sidebar.Material.js

@@ -195,6 +195,18 @@ Sidebar.Material = function ( editor ) {
 
 	container.add( materialMetalnessRow );
 
+	// sheen
+
+	var materialSheenRow = new UI.Row();
+	var materialSheenEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialSheen = new UI.Color().setHexValue(0x000000).onChange( update );
+
+	materialSheenRow.add( new UI.Text( strings.getKey( 'sidebar/material/sheen' ) ).setWidth( '90px' ) )
+	materialSheenRow.add( materialSheenEnabled );
+	materialSheenRow.add( materialSheen );
+
+	container.add( materialSheenRow );
+
 	// emissive
 
 	var materialEmissiveRow = new UI.Row();
@@ -636,6 +648,22 @@ Sidebar.Material = function ( editor ) {
 
 			}
 
+			if ( material.sheen !== undefined ) {
+
+				var sheenEnabled = materialSheenEnabled.getValue() === true;
+
+				var sheen = sheenEnabled ? new THREE.Color(materialSheen.getHexValue()) : null;
+
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'sheen', sheen, currentMaterialSlot ) );
+				
+			}
+			
+			if ( material.sheen !== undefined && material.sheen !== null && material.sheen.getHex() !== materialSheen.getHexValue() ) {
+
+				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'sheen', materialSheen.getHexValue(), currentMaterialSlot ) );
+
+			}
+
 			if ( material.emissive !== undefined && material.emissive.getHex() !== materialEmissive.getHexValue() ) {
 
 				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'emissive', materialEmissive.getHexValue(), currentMaterialSlot ) );
@@ -1157,6 +1185,7 @@ Sidebar.Material = function ( editor ) {
 			'roughness': materialRoughnessRow,
 			'metalness': materialMetalnessRow,
 			'emissive': materialEmissiveRow,
+			'sheen': materialSheenRow,
 			'specular': materialSpecularRow,
 			'shininess': materialShininessRow,
 			'clearcoat': materialClearcoatRow,
@@ -1268,6 +1297,13 @@ Sidebar.Material = function ( editor ) {
 			materialMetalness.setValue( material.metalness );
 
 		}
+		
+		if ( material.sheen !== undefined && material.sheen !== null ) {
+			
+			materialSheenEnabled.setValue( true );
+			materialSheen.setHexValue( material.sheen.getHexString() );
+
+		}
 
 		if ( material.emissive !== undefined ) {
 

editor/js/Strings.js

@@ -225,6 +225,7 @@ var Strings = function ( config ) {
 			'sidebar/material/depthPacking': 'Depth Packing',
 			'sidebar/material/roughness': 'Roughness',
 			'sidebar/material/metalness': 'Metalness',
+			'sidebar/material/sheen': 'Sheen',
 			'sidebar/material/emissive': 'Emissive',
 			'sidebar/material/specular': 'Specular',
 			'sidebar/material/shininess': 'Shininess',

src/loaders/MaterialLoader.js

@@ -61,6 +61,7 @@ MaterialLoader.prototype = Object.assign( Object.create( Loader.prototype ), {
 		if ( json.color !== undefined ) material.color.setHex( json.color );
 		if ( json.roughness !== undefined ) material.roughness = json.roughness;
 		if ( json.metalness !== undefined ) material.metalness = json.metalness;
+		if ( json.sheen !== undefined ) material.sheen = new Color().setHex( json.sheen );
 		if ( json.emissive !== undefined ) material.emissive.setHex( json.emissive );
 		if ( json.specular !== undefined ) material.specular.setHex( json.specular );
 		if ( json.shininess !== undefined ) material.shininess = json.shininess;

src/materials/Material.js

@@ -169,6 +169,7 @@ Material.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 		if ( this.roughness !== undefined ) data.roughness = this.roughness;
 		if ( this.metalness !== undefined ) data.metalness = this.metalness;
 
+		if ( this.sheen && this.sheen.isColor ) data.sheen = this.sheen.getHex();
 		if ( this.emissive && this.emissive.isColor ) data.emissive = this.emissive.getHex();
 		if ( this.emissiveIntensity && this.emissiveIntensity !== 1 ) data.emissiveIntensity = this.emissiveIntensity;
 

src/renderers/WebGLRenderer.d.ts

@@ -326,7 +326,7 @@ export class WebGLRenderer implements Renderer {
 	 * A build in function that can be used instead of requestAnimationFrame. For WebVR projects this function must be used.
 	 * @param callback The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.
 	 */
-	setAnimationLoop( callback: Function ): void;
+	setAnimationLoop( callback: Function | null ): void;
 
 	/**
 	 * @deprecated Use {@link WebGLRenderer#setAnimationLoop .setAnimationLoop()} instead.