MeshPhysicalMaterial: Added sheen textures. (#22687)

* ArcballControls:  Rename _tbCenter to target.

* MeshPhysicalMaterial: Added sheen textures.

* WebGLProgram: Clarify order of parameter names.

docs/api/en/materials/MeshPhysicalMaterial.html

@@ -134,12 +134,18 @@
 
 		<h3>[property:Float sheen]</h3>
 		<p>
-			The intensity of the sheen layer, from *0.0* to *1.0*. Default is *0.0*.</p>
+			The intensity of the sheen layer, from *0.0* to *1.0*. Default is *0.0*.
 		</p>
 
 		<h3>[property:Float sheenRoughness]</h3>
 		<p>
-			Roughness of the sheen layer, from *0.0* to *1.0*. Default is *1.0*.</p>
+			Roughness of the sheen layer, from *0.0* to *1.0*. Default is *1.0*.
+		</p>
+
+		<h3>[property:Texture sheenRoughnessMap]</h3>
+		<p>
+			The alpha channel of this texture is multiplied against [page:.sheenRoughness], for per-pixel control
+			over sheen roughness. Default is *null*.
 		</p>
 
 		<h3>[property:Color sheenTint]</h3>
@@ -147,6 +153,12 @@
 			The sheen tint. Default is *0xffffff*, white.
 		</p>
 
+		<h3>[property:Texture sheenTintMap]</h3>
+		<p>
+			The RGB channels of this texture are multiplied against [page:.sheenTint], for per-pixel control
+			over sheen tint. Default is *null*.
+		</p>
+
 		<h3>[property:Float transmission]</h3>
 		<p>
 		Degree of transmission (or optical transparency), from *0.0* to *1.0*. Default is *0.0*.<br />

docs/api/zh/materials/MeshPhysicalMaterial.html

@@ -129,10 +129,31 @@
 			这模拟了非金属材质的反射率。当[page:MeshStandardMaterial]为*1.0*时，此属性无效。
 		</p>
 
-		<h3>[property:Color sheen]</h3>
+		<h3>[property:Float sheen]</h3>
 		<p>
-			If a color is assigned to this property, the material will use a special sheen BRDF intended for rendering cloth materials such as velvet.
-			The sheen color provides the ability to create two-tone specular materials. *null* by default.
+			The intensity of the sheen layer, from *0.0* to *1.0*. Default is *0.0*.
+		</p>
+
+		<h3>[property:Float sheenRoughness]</h3>
+		<p>
+			Roughness of the sheen layer, from *0.0* to *1.0*. Default is *1.0*.
+		</p>
+
+		<h3>[property:Texture sheenRoughnessMap]</h3>
+		<p>
+			The alpha channel of this texture is multiplied against [page:.sheenRoughness], for per-pixel control
+			over sheen roughness. Default is *null*.
+		</p>
+
+		<h3>[property:Color sheenTint]</h3>
+		<p>
+			The sheen tint. Default is *0xffffff*, white.
+		</p>
+
+		<h3>[property:Texture sheenTintMap]</h3>
+		<p>
+			The RGB channels of this texture are multiplied against [page:.sheenTint], for per-pixel control
+			over sheen tint. Default is *null*.
 		</p>
 
 		<h3>[property:Float transmission]</h3>

examples/jsm/loaders/GLTFLoader.js

@@ -767,7 +767,17 @@ class GLTFMaterialsSheenExtension {
 
 		}
 
-		// TODO sheenColorTexture and sheenRoughnessTexture
+		if ( extension.sheenColorTexture !== undefined ) {
+
+			pending.push( parser.assignTexture( materialParams, 'sheenTintMap', extension.sheenColorTexture ) );
+
+		}
+
+		if ( extension.sheenRoughnessTexture !== undefined ) {
+
+			pending.push( parser.assignTexture( materialParams, 'sheenRoughnessMap', extension.sheenRoughnessTexture ) );
+
+		}
 
 		return Promise.all( pending );
 

src/loaders/MaterialLoader.js

@@ -288,6 +288,9 @@ class MaterialLoader extends Loader {
 		if ( json.transmissionMap !== undefined ) material.transmissionMap = getTexture( json.transmissionMap );
 		if ( json.thicknessMap !== undefined ) material.thicknessMap = getTexture( json.thicknessMap );
 
+		if ( json.sheenTintMap !== undefined ) material.sheenTintMap = getTexture( json.sheenTintMap );
+		if ( json.sheenRoughnessMap !== undefined ) material.sheenRoughnessMap = getTexture( json.sheenRoughnessMap );
+
 		return material;
 
 	}

src/materials/MeshPhysicalMaterial.js

@@ -17,7 +17,9 @@ import * as MathUtils from '../math/MathUtils.js';
  *
  *  sheen: <float>,
  *  sheenTint: <Color>,
+ *  sheenTintMap: new THREE.Texture( <Image> ),
  *  sheenRoughness: <float>,
+ *  sheenRoughnessMap: new THREE.Texture( <Image> ),
  *
  *  transmission: <float>,
  *  transmissionMap: new THREE.Texture( <Image> ),
@@ -71,7 +73,9 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 		} );
 
 		this.sheenTint = new Color( 0x000000 );
+		this.sheenTintMap = null;
 		this.sheenRoughness = 1.0;
+		this.sheenRoughnessMap = null;
 
 		this.transmissionMap = null;
 
@@ -169,7 +173,9 @@ class MeshPhysicalMaterial extends MeshStandardMaterial {
 
 		this.sheen = source.sheen;
 		this.sheenTint.copy( source.sheenTint );
+		this.sheenTintMap = source.sheenTintMap;
 		this.sheenRoughness = source.sheenRoughness;
+		this.sheenRoughnessMap = source.sheenRoughnessMap;
 
 		this.transmission = source.transmission;
 		this.transmissionMap = source.transmissionMap;

src/renderers/shaders/ShaderChunk/lights_physical_fragment.glsl.js

@@ -76,7 +76,20 @@ material.roughness = min( material.roughness, 1.0 );
 #ifdef USE_SHEEN
 
 	material.sheenTint = sheenTint;
+
+	#ifdef USE_SHEENTINTMAP
+
+		material.sheenTint *= sheenTintMapTexelToLinear( texture2D( sheenTintMap, vUv ) ).rgb;
+
+	#endif
+
 	material.sheenRoughness = clamp( sheenRoughness, 0.07, 1.0 );
 
+	#ifdef USE_SHEENROUGHNESSMAP
+
+		material.sheenRoughness *= texture2D( sheenRoughnessMap, vUv ).a;
+
+	#endif
+
 #endif
 `;

src/renderers/shaders/ShaderLib.js

@@ -298,7 +298,9 @@ ShaderLib.physical = {
 			clearcoatNormalMap: { value: null },
 			sheen: { value: 0 },
 			sheenTint: { value: new Color( 0x000000 ) },
+			sheenTintMap: { value: null },
 			sheenRoughness: { value: 0 },
+			sheenRoughnessMap: { value: null },
 			transmission: { value: 0 },
 			transmissionMap: { value: null },
 			transmissionSamplerSize: { value: new Vector2() },

src/renderers/shaders/ShaderLib/meshphysical.glsl.js

@@ -96,6 +96,14 @@ uniform float opacity;
 #ifdef USE_SHEEN
 	uniform vec3 sheenTint;
 	uniform float sheenRoughness;
+
+	#ifdef USE_SHEENTINTMAP
+		uniform sampler2D sheenTintMap;
+	#endif
+
+	#ifdef USE_SHEENROUGHNESSMAP
+		uniform sampler2D sheenRoughnessMap;
+	#endif
 #endif
 
 varying vec3 vViewPosition;

src/renderers/webgl/WebGLMaterials.js

@@ -265,6 +265,14 @@ function WebGLMaterials( properties ) {
 
 			uvScaleMap = material.thicknessMap;
 
+		} else if ( material.sheenTintMap ) {
+
+			uvScaleMap = material.sheenTintMap;
+
+		} else if ( material.sheenRoughnessMap ) {
+
+			uvScaleMap = material.sheenRoughnessMap;
+
 		}
 
 		if ( uvScaleMap !== undefined ) {
@@ -604,6 +612,18 @@ function WebGLMaterials( properties ) {
 
 			uniforms.sheenRoughness.value = material.sheenRoughness;
 
+			if ( material.sheenTintMap ) {
+
+				uniforms.sheenTintMap.value = material.sheenTintMap;
+
+			}
+
+			if ( material.sheenRoughnessMap ) {
+
+				uniforms.sheenRoughnessMap.value = material.sheenRoughnessMap;
+
+			}
+
 		}
 
 		if ( material.clearcoat > 0 ) {

src/renderers/webgl/WebGLProgram.js

@@ -488,6 +488,9 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
 			parameters.thicknessMap ? '#define USE_THICKNESSMAP' : '',
 
+			parameters.sheenTintMap ? '#define USE_SHEENTINTMAP' : '',
+			parameters.sheenRoughnessMap ? '#define USE_SHEENROUGHNESSMAP' : '',
+
 			parameters.vertexTangents ? '#define USE_TANGENT' : '',
 			parameters.vertexColors ? '#define USE_COLOR' : '',
 			parameters.vertexAlphas ? '#define USE_COLOR_ALPHA' : '',
@@ -634,6 +637,8 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.alphaTest ? '#define USE_ALPHATEST' : '',
 
 			parameters.sheen ? '#define USE_SHEEN' : '',
+			parameters.sheenTintMap ? '#define USE_SHEENTINTMAP' : '',
+			parameters.sheenRoughnessMap ? '#define USE_SHEENROUGHNESSMAP' : '',
 
 			parameters.transmission ? '#define USE_TRANSMISSION' : '',
 			parameters.transmissionMap ? '#define USE_TRANSMISSIONMAP' : '',
@@ -681,6 +686,7 @@ function WebGLProgram( renderer, cacheKey, parameters, bindingStates ) {
 			parameters.envMap ? getTexelDecodingFunction( 'envMapTexelToLinear', parameters.envMapEncoding ) : '',
 			parameters.emissiveMap ? getTexelDecodingFunction( 'emissiveMapTexelToLinear', parameters.emissiveMapEncoding ) : '',
 			parameters.specularTintMap ? getTexelDecodingFunction( 'specularTintMapTexelToLinear', parameters.specularTintMapEncoding ) : '',
+			parameters.sheenTintMap ? getTexelDecodingFunction( 'sheenTintMapTexelToLinear', parameters.sheenTintMapEncoding ) : '',
 			parameters.lightMap ? getTexelDecodingFunction( 'lightMapTexelToLinear', parameters.lightMapEncoding ) : '',
 			getTexelEncodingFunction( 'linearToOutputTexel', parameters.outputEncoding ),
 

src/renderers/webgl/WebGLPrograms.js

@@ -40,8 +40,7 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		'lightMap', 'lightMapEncoding', 'aoMap', 'emissiveMap', 'emissiveMapEncoding', 'bumpMap', 'normalMap',
 		'objectSpaceNormalMap', 'tangentSpaceNormalMap',
 		'clearcoat', 'clearcoatMap', 'clearcoatRoughnessMap', 'clearcoatNormalMap',
-		'displacementMap',
-		'specularMap', 'specularIntensityMap', 'specularTintMap', 'specularTintMapEncoding', 'roughnessMap', 'metalnessMap', 'gradientMap',
+		'displacementMap', 'specularMap', , 'roughnessMap', 'metalnessMap', 'gradientMap',
 		'alphaMap', 'alphaTest', 'combine', 'vertexColors', 'vertexAlphas', 'vertexTangents', 'vertexUvs', 'uvsVertexOnly', 'fog', 'useFog', 'fogExp2',
 		'flatShading', 'sizeAttenuation', 'logarithmicDepthBuffer', 'skinning',
 		'maxBones', 'useVertexTexture', 'morphTargets', 'morphNormals', 'morphTargetsCount', 'premultipliedAlpha',
@@ -49,7 +48,9 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 		'numDirLightShadows', 'numPointLightShadows', 'numSpotLightShadows',
 		'shadowMapEnabled', 'shadowMapType', 'toneMapping', 'physicallyCorrectLights',
 		'doubleSided', 'flipSided', 'numClippingPlanes', 'numClipIntersection', 'depthPacking', 'dithering', 'format',
-		'sheen', 'transmission', 'transmissionMap', 'thicknessMap'
+		'specularIntensityMap', 'specularTintMap', 'specularTintMapEncoding',
+		'transmission', 'transmissionMap', 'thicknessMap',
+		'sheen', 'sheenTintMap', 'sheenTintMapEncoding', 'sheenRoughnessMap'
 	];
 
 	function getMaxBones( object ) {
@@ -222,6 +223,9 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			gradientMap: !! material.gradientMap,
 
 			sheen: material.sheen > 0,
+			sheenTintMap: !! material.sheenTintMap,
+			sheenTintMapEncoding: getTextureEncodingFromMap( material.sheenTintMap ),
+			sheenRoughnessMap: !! material.sheenRoughnessMap,
 
 			transmission: material.transmission > 0,
 			transmissionMap: !! material.transmissionMap,
@@ -232,8 +236,8 @@ function WebGLPrograms( renderer, cubemaps, cubeuvmaps, extensions, capabilities
 			vertexTangents: ( !! material.normalMap && !! object.geometry && !! object.geometry.attributes.tangent ),
 			vertexColors: material.vertexColors,
 			vertexAlphas: material.vertexColors === true && !! object.geometry && !! object.geometry.attributes.color && object.geometry.attributes.color.itemSize === 4,
-			vertexUvs: !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatMap || !! material.clearcoatRoughnessMap || !! material.clearcoatNormalMap || !! material.displacementMap || !! material.transmissionMap || !! material.thicknessMap || !! material.specularIntensityMap || !! material.specularTintMap,
-			uvsVertexOnly: ! ( !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatNormalMap || material.transmission > 0 || !! material.transmissionMap || !! material.thicknessMap || !! material.specularIntensityMap || !! material.specularTintMap ) && !! material.displacementMap,
+			vertexUvs: !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatMap || !! material.clearcoatRoughnessMap || !! material.clearcoatNormalMap || !! material.displacementMap || !! material.transmissionMap || !! material.thicknessMap || !! material.specularIntensityMap || !! material.specularTintMap || !! material.sheenTintMap || material.sheenRoughnessMap,
+			uvsVertexOnly: ! ( !! material.map || !! material.bumpMap || !! material.normalMap || !! material.specularMap || !! material.alphaMap || !! material.emissiveMap || !! material.roughnessMap || !! material.metalnessMap || !! material.clearcoatNormalMap || material.transmission > 0 || !! material.transmissionMap || !! material.thicknessMap || !! material.specularIntensityMap || !! material.specularTintMap || !! material.sheen > 0 || !! material.sheenTintMap || !! material.sheenRoughnessMap ) && !! material.displacementMap,
 
 			fog: !! fog,
 			useFog: material.fog,