MeshPhysicalMaterial: Add sheen property (#22466)

docs/api/en/materials/MeshPhysicalMaterial.html

@@ -133,6 +133,11 @@
 			This models the reflectivity of non-metallic materials. It has no effect when [page:MeshStandardMaterial.metalness metalness] is *1.0*
 		</p>
 
+		<h3>[property:Float sheen]</h3>
+		<p>
+			The intensity of the sheen layer, from *0.0* to *1.0*. Default is *0.0*.</p>
+		</p>
+
 		<h3>[property:Float sheenRoughness]</h3>
 		<p>
 			Roughness of the sheen layer, from *0.0* to *1.0*. Default is *1.0*.</p>
@@ -140,7 +145,7 @@
 
 		<h3>[property:Color sheenTint]</h3>
 		<p>
-			Used for rendering materials such as velvet. It has no effect when set to black (0x000000). Default is black.
+			The sheen tint. Default is *0xffffff*, white.
 		</p>
 
 		<h3>[property:Float transmission]</h3>

src/loaders/MaterialLoader.js

@@ -74,6 +74,7 @@ class MaterialLoader extends Loader {
 		if ( json.color !== undefined && material.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 = json.sheen;
 		if ( json.sheenTint !== undefined ) material.sheenTint = new Color().setHex( json.sheenTint );
 		if ( json.sheenRoughness !== undefined ) material.sheenRoughness = json.sheenRoughness;
 		if ( json.emissive !== undefined && material.emissive !== undefined ) material.emissive.setHex( json.emissive );

src/materials/Material.js

@@ -189,6 +189,7 @@ class Material extends EventDispatcher {
 		if ( this.roughness !== undefined ) data.roughness = this.roughness;
 		if ( this.metalness !== undefined ) data.metalness = this.metalness;
 
+		if ( this.sheen !== undefined ) data.sheen = this.sheen;
 		if ( this.sheenTint && this.sheenTint.isColor ) data.sheenTint = this.sheenTint.getHex();
 		if ( this.sheenRoughness !== undefined ) data.sheenRoughness = this.sheenRoughness;
 		if ( this.emissive && this.emissive.isColor ) data.emissive = this.emissive.getHex();

src/materials/MeshPhysicalMaterial.js

@@ -15,6 +15,7 @@ import * as MathUtils from '../math/MathUtils.js';
  *  ior: <float>,
  *  reflectivity: <float>,
  *
+ *  sheen: <float>,
  *  sheenTint: <Color>,
  *  sheenRoughness: <float>,
  *
@@ -84,6 +85,7 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 		this.specularTint = new Color( 1, 1, 1 );
 		this.specularTintMap = null;
 
+		this._sheen = 0.0;
 		this._clearcoat = 0;
 		this._transmission = 0;
 
@@ -91,6 +93,24 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 
 	}
 
+	get sheen() {
+
+		return this._sheen;
+
+	}
+
+	set sheen( value ) {
+
+		if ( this._sheen > 0 !== value > 0 ) {
+
+			this.version ++;
+
+		}
+
+		this._sheen = value;
+
+	}
+
 	get clearcoat() {
 
 		return this._clearcoat;
@@ -147,6 +167,7 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 
 		this.ior = source.ior;
 
+		this.sheen = source.sheen;
 		this.sheenTint.copy( source.sheenTint );
 		this.sheenRoughness = source.sheenRoughness;
 

src/renderers/shaders/ShaderLib.js

@@ -296,6 +296,7 @@ ShaderLib.physical = {
 			clearcoatRoughnessMap: { value: null },
 			clearcoatNormalScale: { value: new Vector2( 1, 1 ) },
 			clearcoatNormalMap: { value: null },
+			sheen: { value: 0 },
 			sheenTint: { value: new Color( 0x000000 ) },
 			sheenRoughness: { value: 0 },
 			transmission: { value: 0 },

src/renderers/webgl/WebGLMaterials.js

@@ -598,9 +598,9 @@ function WebGLMaterials( properties ) {
 
 		uniforms.ior.value = material.ior; // also part of uniforms common
 
-		if ( material.sheenTint && ( material.sheenTint.r > 0 || material.sheenTint.g > 0 || material.sheenTint.b > 0 ) ) {
+		if ( material.sheen > 0 ) {
 
-			uniforms.sheenTint.value.copy( material.sheenTint );
+			uniforms.sheenTint.value.copy( material.sheenTint ).multiplyScalar( material.sheen );
 
 			uniforms.sheenRoughness.value = material.sheenRoughness;
 

src/renderers/webgl/WebGLProgram.js

@@ -631,7 +631,8 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.alphaMap ? '#define USE_ALPHAMAP' : '',
 			parameters.alphaTest ? '#define USE_ALPHATEST' : '',
 
-			parameters.sheenTint ? '#define USE_SHEEN' : '',
+			parameters.sheen ? '#define USE_SHEEN' : '',
+
 			parameters.transmission ? '#define USE_TRANSMISSION' : '',
 			parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
 			parameters.thicknessMap ? '#define USE_THICKNESSMAP' : '',

src/renderers/webgl/WebGLPrograms.js

@@ -48,7 +48,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		'numDirLightShadows', 'numPointLightShadows', 'numSpotLightShadows',
 		'shadowMapEnabled', 'shadowMapType', 'toneMapping', 'physicallyCorrectLights',
 		'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering', 'format',
-		'sheenTint', 'transmission', 'transmissionMap', 'thicknessMap'
+		'sheen', 'transmission', 'transmissionMap', 'thicknessMap'
 	];
 
 	function getMaxBones( object ) {
@@ -214,7 +214,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 
 			gradientMap: !! material.gradientMap,
 
-			sheenTint: ( !! material.sheenTint && ( material.sheenTint.r > 0 || material.sheenTint.g > 0 || material.sheenTint.b > 0 ) ),
+			sheen: material.sheen > 0,
 
 			transmission: material.transmission > 0,
 			transmissionMap: !! material.transmissionMap,